Just for fun!
See demo CSS3 Keyframe Animation Propeller
(Do not open the demo page, if you do not tolerate high speed changing frames!)
<html> <head> <title>CSS3 Propeller</title> </head> <body> <div class="propeller"></div> </body> </html>
.propeller { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 0px; height: 0px; border-width: 200px; border-style: solid; border-color: #fff #00f #fff #00f; border-radius: 50%; -webkit-animation-duration: 0.2s; -moz-animation-duration: 0.2s; -o-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-name: rotateCircle; -moz-animation-name: rotateCircle; -o-animation-name: rotateCircle; animation-name: rotateCircle; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
More on CSS animations you can find here:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
https://css-tricks.com/almanac/properties/a/animation
https://css-tricks.com/snippets/css/keyframe-animation-syntax
Leave a Reply