Press "Enter" to skip to content

Keyframes Examples in CSS

Last updated on October 5, 2019

Definition :

It means change the background color to the operation using animations.

Program 1 :

<html>

     <style type=”text/css”>

                    @keyframes ex

                                {

                                from {background-color: red;}

                                to {background-color: green}

                                }

                                div

                                {

                                width: 100px;

                                height: 100px;

                                background-color: red;

                                animation-name: ex;

                                animation-duration: 4s;

                                }

                </style>

                <body>

                     <div>

                                 </div>

                </body>

</html>

Program 2 :

<html>

     <style type=”text/css”>

                    @keyframes ex

                                {

                                0% {background-color: red; left: 0px; top: 0px;}

                                50% {background-color: green; left: 100px; top: 100px;}

                                100% {background-color: cyan; left: 0px; top: 0pxx;}

                                }

                                div

                                {

                                width: 100px;

                                height: 100px;

                                position: relative;

                                background-color: red;

                                animation-name: ex;

                                animation-duration: 4s;

                                animation:iteration-count: 3;

                                animation-delay: 2s;

                                }

                </style>

                <body>

                     <div>

                                 </div>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *