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