Animation de rotation sans fin CSS

146

Je veux faire une rotation de mon icône de chargement par CSS.

J'ai une icône et le code suivant:

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

Mais ça ne marche pas. Comment faire pivoter l'icône avec CSS?

css animation webkit Alexandre Ruliov
la source
3
solution fondée - jsfiddle.net/LwwfG réponse s'il vous plaît, pour fermer la question.
Alexander Ruliov
3
Vous pouvez ajouter votre propre réponse. Incluez-y le code de votre démo jsFiddle.
thirtydot

Réponses:

263 

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>
Développer l'extrait

Kirk Strobeck
la source
12
une question, les préfixes -moz-et sont -ils -ms-nécessaires sous -webkit-keyframes? comme seul webkit lira, -webkit-keyframesje pense qu'il est sûr de les supprimer.
Bor691 le
2
Ai-je raison de comprendre que ce n'est pas théoriquement parfait puisque les propriétés non préfixées par le fournisseur doivent toujours être les dernières afin de ne pas remplacer le comportement conforme aux normes? Voir: css-tricks.com/ordering-css3-properties
Cool. Vérifiait avant de modifier. N'était pas sûr à 100%.
@Ricky - Astuce: Lorsque vous avez déjà discuté d'une modification avec l'auteur (comme ci-dessus), ce n'est pas une mauvaise idée de le mentionner dans la rubrique "modifier les commentaires". Donc le montage n'est pas rejeté comme un "changement radical" ;-)
Leigh
1
Si vous utilisez PostCSS, envisagez d'utiliser l'autoprefixer pour gérer tous les problèmes de navigateurs croisés lors de l'utilisation transform.
Michał Pietraszko
88

Fonctionnement agréable:

#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}
<div id='test' class='rotating'></div>
Développer l'extrait

Alexandre Ruliov
la source
existe-t-il une solution css crossbrowser disponible?
andrej
13

Animation de rotation infinie en CSS

/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}
<span class="spinner rotate"></span>
Développer l'extrait

MDN - Animation CSS Web

Roko C. Buljan
la source
6

Sans aucun préfixe, par exemple au plus simple:

.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
Dorian
la source
5

Fonctionne dans tous les navigateurs modernes

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}
Kareem
la source
1 
<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>
pradip kor
la source
1

Rotation sur ajout de classe .active

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }
DINESH Adhikari
la source
1 
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}
vinkal
la source
3
Bonjour, bienvenue dans Stack Overflow! Lorsque vous répondez à une question, vous devez inclure une sorte d'explication, comme ce que l'auteur a fait de mal et ce que vous avez fait pour y remédier. Je vous dis cela parce que votre réponse a été signalée comme étant de mauvaise qualité et est actuellement en cours de révision. Vous pouvez modifier votre réponse en cliquant sur le bouton "Modifier".
Federico Grandi