) I have a star image in top-left of my screen want to rotate continuously. so can anyone tell me How can we make a Picture rotate Continuously for browsers Mozilla Firefox, Google chrome!?
[Css Position type is 'Absolutely' and image resolution:25*25 ]
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
img.star {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Add -moz-transform/animation, -ms-transform/animation, etc rules to support other browsers.
You could also make an animated GIF :).
Animation support is available is most current browsers which means that the prefixes can be removed:
(For reverse rotation flip the 'from' and 'to')
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
img.star {
animation-name: rotate;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Shorthand:
img.star {
animation: rotate 0.5s infinite linear;
}
