Change color via animations via CSS

 How to add animation in a div to change its color?

Last updated:7/20/2021 1:10:13 AM

1 Answers

Ethan Karla
Ethan Karla

An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

Let's have a look on a below code :

<!DOCTYPE html>

<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: example 4s infinite;
        }
        @keyframes example {
            from {
                background-color: orangered;
            }
            to {
                background-color: greenyellow;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <p><b>Note:</b> When an animation is finished, it continue back from its original style.</p>
</body>
</html>

Hope this information will be helpful for you.

Happy Coding!

Answer