How to Animate Bullets in Lists using CSS ?

Last Updated : 02 Sep, 2022

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:

How to set Bullet colors in HTML Lists using only CSS?

vkash8574

Improve

Article Tags :

How to Animate Bullets in Lists using CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?