How to Make a Picture rotate Continuously? [closed]

Question

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

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

Answer 2

You can do that with CSS: (utilizing your GPU core):

img{ 
    animation:2s rotate infinite linear; 
}

@keyframes rotate{
    100%{ transform:rotate(1turn) } // or 360deg
}

<img src="https://ih0.redbubble.net/image.364229144.1663/flat,200x200,075,t.jpg">