Menu
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.
244
CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS.
You have to hover on the image and you will get the 360 degree rotation effect. Fiddle doesn't work o.O Chrome inspector does not like your CSS, specifically the "transform" and "transition-property".
Use CSS Animations to Rotate Image Continuously We will add the CSS command to the element we wish to rotate in this example. You can adjust the 2s to slow or speed up the rotation duration and rotate to 360 degrees in animation. Output: The image will be rotated to a full 360 degrees.
CSS3:
@keyframes rotate360 {
to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
/* TODO: Add -vendor-prefixes for different browsers */<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
