Bullets in a HTML list can be animated using the ::marker CSS selector. This selector selects the marker box (bullet / number) for <li> elements inside a <ul> or <ol>.
The ::marker selector is animatable. However it allows only a few selected CSS properties to be animated :
- color
- all font properties
Example
- Item 1
- Item 2
- Item 3
HTML & CSS :
<ol id="sample-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
#sample-list li::marker {
animation-name: example;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#sample-list li:nth-child(1)::marker {
animation-delay: 0;
}
#sample-list li:nth-child(2)::marker {
animation-delay: 0.3s;
}
#sample-list li:nth-child(3)::marker {
animation-delay: 0.6s;
}
@keyframes example {
from {
font-size: 14px;
}
to {
font-size: 30px;
}
}
Browser Compatibility
Although ::marker is supported in all modern browsers, however animation on this is only supported in Chrome, Edge & Firefox (Safari Technology Preview supports this, so this should also be supported in Safari soon).