Animation de rotation infinie en utilisant CSS et Javascript

J'ai été en passant par une page web d'exemples et trouvé ceci: http://alwayscreative.net/. Je suis totalement surpris par le disque en arrière-plan qui tourne à l'infini. j'ai regardé quelques exemples, mais aucune n'a fonctionné de cette façon. Quelqu'un peut-il me dire comment a été mis en œuvre.
Merci.

source d'informationauteur Anuj Kaithwas

  1. 3

    Cet exemple rend rotation infinie très bien:

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

    Vous Pouvez le tester ici: http://jsfiddle.net/HS68a/2/

  2. 2

    veuillez cocher cette ligne. nous pouvons utiliser css3 pour faire pivoter l'image. et je vais testé dans chrome fonctionne bien
    http://jsfiddle.net/sUHKh/

  3. 2

    Ici est de savoir comment il est mis en œuvre dans votre exemple :

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

    Mais je ne vois pas l'intérêt (j'oserais même dire qu'il semble un peu étrange...)en mettant navigateur préfixé transformer en un autre navigateur spécifique des images clés.

    Il manque également un générique des images clés et IE10 soutien donc, c'est comment j'ai mis en place :

    @-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}
  4. 1

    J'ai juste fait un "inspecter l'élément" dans Chrome. Voici le 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;
}