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

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
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
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
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
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
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
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
source

1

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}

— vinkal
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

Animation de rotation sans fin CSS

Animation de rotation infinie en CSS