Home > Article > Web Front-end > CSS3-Rotating Gear_html/css_WEB-ITnose
CSS3-Rotating Gear
View DEMO
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many web pages.
First, let’s get to know CSS3 animation
The abbreviation of animation animation: name duration timing-function delay iteration-count direction;
**The second is at keyframes* *
Okay, let’s use the above two attributes to make a rotating gear
<style> .img { margin: 0 auto; text-align: center; width: 400px; height: 400px; padding: 0; animation-name:myrotate; animation-duration:3s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:normal; animation-play-state:running; -moz-animation-name:myrotate; -moz-animation-duration:3s; -moz-animation-timing-function:linear; -moz-animation-delay:0s; -moz-animation-iteration-count:infinite; -moz-animation-direction:normal; -moz-animation-play-state:running; -webkit-animation-name:myrotate; -webkit-animation-duration:3s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; -o-animation-name:myrotate; -o-animation-duration:3s; -o-animation-timing-function:linear; -o-animation-delay:0s; -o-animation-iteration-count:infinite; -o-animation-direction:normal; -o-animation-play-state:running; } @keyframes myrotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-moz-keyframes myrotate { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-webkit-keyframes myrotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-o-keyframes myrotate { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} }</style><div class="img"> <img src="chilun.png" alt=""></div>