CSS animation and css3 Animation

CSS animation and css3 Animation

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many webpages.

Internet Explorer 10, Firefox, and Opera support the @ keyframes rule and the animation attribute.

Chrome and Safari require prefix-webkit-

The following is a simple example of changing the color of an image from red to yellow.

<Style> div {width: 100px; height: 100px; background: red; animation: myfirst 5S;-moz-animation: myfirst 5S;/* Firefox */-webkit-animation: myfirst 5S;/* Safari and Chrome */-o-animation: myfirst 5S;/* Opera */} @ keyframes myfirst {from {background: red;} to {background: yellow ;}@-moz-keyframes myfirst/* Firefox */{from {background: red;} to {background: yellow ;}} @-webkit-keyframes myfirst/* Safari and Chrome * /{From {background: red;} to {background: yellow; }}@-o-keyframes myfirst/* Opera */{from {background: red;} to {background: yellow ;}</style> 
Note: The above time length is set to animation. Considering the compatibility of the browser, the prefix is required for animation.
The following example shows how to change the background color when the animation is 25% or 50%, and then when the animation is 100% completed:
Div {width: 100px; height: 100px; background: red; position: relative; animation: myfirst 5S;-moz-animation: myfirst 5S; /* Firefox */-webkit-animation: myfirst 5S;/* Safari and Chrome */-o-animation: myfirst 5S; /* Opera */} @ keyframes myfirst {0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px ;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200 Px;} 100% {background: red; left: 0px; top: 0px; }}@-moz-keyframes myfirst/* Firefox */{0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px ;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}} @-webkit-keyframes myfirst/* Safari and Chrome */{0% {background: red; left: 0px; top: 0px;} 25% {backgr Ound: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-o-keyframes myfirst/* Opera */{0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px ;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0 Px; top: 0px ;}}< p> <B> Note: </B> This example is invalid in Internet Explorer. </P>
The small div moves from the starting position to the left and then moves down to the right to return to the origin.