How to Animate Bullets in Lists

css
Published on December 26, 2020

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

  1. Item 1
  2. Item 2
  3. 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).

In this Tutorial