forum

Home / DeveloperSection / Forums / Change color via animations via CSS

Ask Question

Change color via animations via CSS

Anonymous User 311 20-Jul-2021

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

css-css3 html  css-css3 
Updated on 20-Jul-2021
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

Animations in HTML basically convert one style to another through CSS. It switches up the style with a little bounce. You can change the properties through animation as many times as you want. To use CSS animations, you must specify a certain number of keyframes for the animation.

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!

Liked By