Infinite rotation animation using CSS and Javascript

javascript jquery css jquery-animate css-animations
Anuj Kaithwas picture Anuj Kaithwas · Aug 18, 2012 · Viewed 25.7k times · Source

I was going thru some single page website examples and found this: http://alwayscreative.net/. I am totally amazed by the disc in the background that rotates infinitely. i have looked at some examples but none worked that way. Can anyone tell me how was that implemented. Thanks.

Answer

Roko C. Buljan picture Roko C. Buljan · Aug 18, 2012

CSS3: 

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
/* TODO: Add -vendor-prefixes for different browsers */
<img src="//placehold.it/200x200/cfc?text=Wooo!" />

Related questions

Why are slow jQuery animations choppy?

I'm having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding an animation that I want to have …

Read More
animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More