Open In App

How to Animate Bullets in Lists using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to animate bullet lists using CSS properties. First, we will create a bullet list using <ol> (or <ul>) and <li> and then we will apply some CSS properties to animate the lists.

We will create an animation to increase the bullet point size and also set the animation time. After that, we will add an animation-delay property for each list of elements to display the animation effect.

Example 1: In this example, we will create five unordered list elements, and then apply the animation and animation-delay properties on each element to animate the bullet points.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to Animate Bullets
        in Lists using CSS ?
    </title>
  
    <style>
        h1 {
            color: green;
        }
        ul li {
            list-style: square;
        }
  
        ul li::marker {
            animation-name: GFG;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }
  
        ul li:nth-child(1)::marker {
            animation-delay: 0;
        }
  
        ul li:nth-child(2)::marker {
            animation-delay: 0.5s;
        }
  
        ul li:nth-child(3)::marker {
            animation-delay: 1.0s;
        }
  
        ul li:nth-child(4)::marker {
            animation-delay: 1.5s;
        }
  
        ul li:nth-child(5)::marker {
            animation-delay: 2.0s;
        }
  
        @keyframes GFG {
            from {
                font-size: 12px;
            }
  
            to {
                font-size: 30px;
                color: green;
            }
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to Animate Bullets in
        Lists using CSS ?
    </h3>
  
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>PHP</li>
        <li>Angular.js</li>
    </ul>
</body>
  
</html>


Output:

 

Example 2: In this example, we will create 5 ordered list elements, and then apply the animation and animation-delay properties on each element to animate the bullet points.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to Animate Bullets
        in Lists using CSS ?
    </title>
  
    <style>
        h1 {
            color: green;
        }
  
        ol li::marker {
            animation-name: GFG;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }
  
        ol li:nth-child(1)::marker {
            animation-delay: 0;
        }
  
        ol li:nth-child(2)::marker {
            animation-delay: 0.5s;
        }
  
        ol li:nth-child(3)::marker {
            animation-delay: 1.0s;
        }
  
        ol li:nth-child(4)::marker {
            animation-delay: 1.5s;
        }
  
        ol li:nth-child(5)::marker {
            animation-delay: 2.0s;
        }
  
        @keyframes GFG {
            from {
                font-size: 12px;
            }
  
            to {
                font-size: 30px;
                color: green;
            }
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to Animate Bullets in
        Lists using CSS ?
    </h3>
  
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>PHP</li>
        <li>Angular.js</li>
    </ol>
</body>
  
</html>


Output:

 



Last Updated : 02 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads