12

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.

Anuj Kaithwas
  • 803
  • 1
  • 10
  • 30
  • `-browserSpecificSyntax-animation: 30s linear 0s normal none infinite rotation1;` – Ohgodwhy Aug 18 '12 at 14:04
  • @Ohgodwhy:I t did not work in my web page using any other image. – Anuj Kaithwas Aug 18 '12 at 14:10
  • 1
    @Anuj Kaithwas well duh...That's beacuse `rotation1` is a pre-defined CSS key....`@-webkit-keyframes rotation1 { /* line 220, ../sass/screen.scss */ from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }` [why not just inspect this CSS file and check out the keyframes within?](http://www.alwayscreative.net/stylesheets/screen.css) – Ohgodwhy Aug 18 '12 at 14:11
  • https://stackoverflow.com/questions/6410730/css-endless-rotation-animation – blackgreen Nov 19 '22 at 20:40

5 Answers5

27

Endless rotation - CSS3 Animation property and Keyframes:

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />

or instead of degrees you can use: rotate(1turn)

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 3
    No reason to prefix with browser-based selectors in jQuery 1.8. – Ohgodwhy Aug 18 '12 at 14:13
  • @Roko: Hey , i know it is lame, can you help me out with a JS problem :D, I have posted it here a long time ago but it is yet unsolved, perhaps u can give me ur email-id or fb id... – Anuj Kaithwas Aug 18 '12 at 14:29
  • @Roko http://stackoverflow.com/questions/11883124/browsing-video-files-for-html5-web-player-from-local-disk-almost-done – Anuj Kaithwas Aug 18 '12 at 14:33
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15508/discussion-between-anuj-kaithwas-and-roko) – Anuj Kaithwas Aug 18 '12 at 14:37
  • Is possible change the duration of loop? –  Sep 04 '13 at 21:40
3

This example makes infinite rotation very well:

div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;
}

@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}

You Can test it here: http://jsfiddle.net/HS68a/2/

Mohammad Ghaheri
  • 29
  • 6
2

please check this line. we can use css3 to rotate the image. and i will tested in chrome is working fine http://jsfiddle.net/sUHKh/

Muthukumar M
  • 1,138
  • 10
  • 19
  • Please include the relevant code and description in the answer itself so that we have a full answer if the link goes down – Zach Saucier Mar 23 '15 at 14:17
2

Here is how it is implemented in your example :

@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-moz-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-o-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}

.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}

But I don't see any interest (I would dare say it seem a bit strange...)in putting browser prefixed transform in an other browser specific keyframes.

It also lack a generic keyframes and IE10 support so this is how I implemented it :

@-webkit-keyframes rotation1{
  from{-webkit-transform:rotate(0deg);}
  to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
  from{-moz-transform:rotate(0deg);}
  to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
  from{-o-transform:rotate(0deg);}
  to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
  }
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
Thony
  • 2,300
  • 1
  • 20
  • 20
1

I just did an "inspect element" in Chrome. Here's the CSS.

.vector1 {
  -moz-animation: rotation1 30s linear infinite;
  -o-animation: rotation1 30s linear infinite;
  -webkit-animation: rotation1 30s linear infinite;
  animation: rotation1 30s linear infinite;
}
Phil
  • 6,686
  • 2
  • 19
  • 25