How to Make a Picture rotate Continuously? [closed]

) 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 ]

Answer

@-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 :).

Update

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;
}