web-dev-qa-db-fra.com

Animation de rotation CSS3

J'ai examiné pas mal de démos et je ne sais pas pourquoi je ne parviens pas à faire tourner CSS3. J'utilise la dernière version stable de Chrome.

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

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

css3css-animations
125
iambriansreed

Pour utiliser CSS3 Animation, vous devez également définir les images clés de l'animation réelles (que vous avez nommées spin).

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

Une fois que vous avez configuré le minutage de l'animation, vous devez définir l'apparence de l'animation. Pour ce faire, vous devez créer deux ou plusieurs images clés à l'aide de la règle @keyframes at-rule. Chaque image clé décrit le rendu de l'élément animé à un moment donné de la séquence d'animation.

Démo sur 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);}
}
244
Gabriele Petrioli

Vous n'avez spécifié aucune image clé. Je l'ai fait fonctionner 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 réellement faire beaucoup de choses vraiment cool avec ça. Voici celui que j'ai fait plus tôt .

:)

N.B. Vous pouvez éviter de devoir écrire tous les préfixes si vous utilisez -prefix-free .

18
Jezen Thomas

À compter des derniers Chrome/FF et IE11, le préfixe -ms/-moz/-webkit ..__ est inutile. Voici un code plus court (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 en direct: http://jsfiddle.net/9Ryvs/3057/

10
oriadam

HTML avec glyphicon font-awesome.

<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;
}
6
Pere Pages

Pour effectuer une rotation, 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

3
user2985029

Par souci d’achèvement, voici un exemple Sass/Compass qui raccourcit vraiment le code, le CSS compilé inclut les préfixes nécessaires, 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))
3
miphe

La seule réponse qui donne le bon 359deg:

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

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

Voici un dégradé utile pour prouver qu'il tourne (si c'est un cercle):

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

cela vous fera répondre à la question

0
sudarshan