JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<h2>css3 animation method</h2>

<div class="red">I gonna change</div>

CSS

.red {

                background-color:orange;

                font-size:24px;

                padding-left:10px;

                margin:50px;

                color:white;

                width:100px;

                height:100px;

                display:block;    

                animation-duration:4s;

                -webkit-animation-name: colorchnage; /* Chrome, Safari, Opera */

                -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

                animation-name: colorchnage;

                animation-iteration-count: infinite;

                border-radius:12px;

}

 

 

/* Standard syntax */

@keyframes colorchnage {

 from {

background-color: red;

}

to {

                background-color: yellow;

}