CSS3 Spin Animation

J'ai passé en revue tout à fait quelques démos et n'ai aucune idée de pourquoi je ne peux pas obtenir le CSS3 tour pour la fonction. Je suis l'aide de la dernière version stable de Chrome.

Le violon:
http://jsfiddle.net/9Ryvs/1/

CSS:

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

HTML:

<div></div>

InformationsquelleAutor iambriansreed | 2013-02-13
  1. 279

    À utiliser CSS3 Animation, vous devez également définir l'animation d'images clés (, que vous avez appelé spin)

    Lire https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations pour plus d'info

    Une fois que vous avez configuré l'animation du calendrier, vous devez définir l'apparence de l'animation. Ceci est fait par la création de deux ou plusieurs images clés à l'aide de la @keyframes à la règle. Chaque image-clé décrit comment l'animation élément doit rendre à un moment donné au cours de la séquence d'animation.

    Démo à http://jsfiddle.net/gaby/9Ryvs/7/

    @-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
    • Vous obtenez l' ✓ parce que vous l'explique et vous êtes la seule réponse qui inclus toutes les versions préfixées.
    • C'est super pinailleurs, mais vous devriez vraiment avoir animer à 359 degrés. 360 et 0 degrés sont les mêmes radialement, de sorte que l'animation de la pause jamais très brièvement lors d'un tour complet.
    • Merci, c'est presque m'a causé des maux de tête aujourd'hui lol
    • Vous souhaitez animer à 359.9999999999 degrés, pas de 359. Degrés de rotation sont une gamme continue de [0, 360) et si vous tournez à 359.0 vous aurez 1 degré tique au début de chaque rotation lorsque qu'il déforme à partir de 359 à 0.
    • Afin de clarifier tous ces commentaires qui donnent des informations incorrectes... la réponse sélectionnée EST CORRECTE sans modifications. 0 et 360 degrés sont en fait différents dans les yeux du navigateur, tout en étant toujours au même point. Par exemple, si vous essayez de le faire pivoter de 0deg de 0deg (ou 360deg à 360deg), il ne tourne pas du tout. Le tournant de 0deg à 360deg indique au navigateur pour tourner l'objet à 360 ° avant de terminer l'animation. Définir la animation-iteration-count: infinite; et vous aurez infini d'images dans l'animation. Même 20 minutes de rotation seront un look parfait & lisse.
    InformationsquelleAutor Gabriele Petrioli
  2. 27

    Vous n'avez pas spécifié les images clés. Je l'ai fait travailler ici.

    div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

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

    Vous pouvez effectivement faire beaucoup de trucs vraiment cool avec cette. Ici est celle que j'ai faite plus tôt.

    🙂

    N. B. Vous pouvez sauter d'avoir à écrire tous les préfixes si vous utilisez -prefix-free.

    InformationsquelleAutor Jezen Thomas
  3. 16

    Que de la dernière version de Chrome/FF et sur IE11 il n'y a pas besoin d'-ms/-moz/-webkit préfixe.
    Voici une courte code (basé sur les réponses précédentes):

    div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

    Démo Live: http://jsfiddle.net/9Ryvs/3057/

    • Combiner l'animation des règles d'abréviation animation: spin 4s linear infinite.
    InformationsquelleAutor oriadam
  4. 8

    HTML avec font-awesome glyphicon.

    <span class="fa fa-spinner spin"></span>

    CSS

    @-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}
    • Vous bénéficiez également de mon upvote pour l'ajout de la définition .spin
    InformationsquelleAutor Pere Pages
  5. 4

    À tourner, vous pouvez utiliser des images clés et une transformation. 

    div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

    Exemple

    InformationsquelleAutor
  6. 4

    Pour le bien de l'achèvement, voici une Sass /Compass exemple qui raccourcit le code, la compilation des CSS va contenir les préfixes, etc.

    div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))
    InformationsquelleAutor miphe
  7. 2

    La seule réponse qui donne la bonne 359deg:

    @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

    Voici un bon gradient de sorte que vous pouvez le prouver, c'est de filature (si c'est un cercle):

    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
    InformationsquelleAutor danday74
  8. 0
    @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

    cela vous aidera à répondre à la question

    InformationsquelleAutor sudarshan