CSS-Animation mit endloser Rotation

146

Ich möchte mein Ladesymbol per CSS drehen.

Ich habe ein Symbol und den folgenden Code:

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

Aber es funktioniert nicht. Wie kann das Symbol mit CSS gedreht werden?

css animation webkit Alexander Ruliov
quelle
3
Gründungslösung - jsfiddle.net/LwwfG bitte antworten, um die Frage zu schließen.
Alexander Ruliov
3
Sie können Ihre eigene Antwort hinzufügen. Fügen Sie den Code aus Ihrer jsFiddle-Demo hinzu.
30.

Antworten:

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>
Erweitern Sie das Snippet

Kirk Strobeck
quelle
12
eine Frage, sind -moz-und -ms-Präfixe unter notwendig -webkit-keyframes? Da nur das Webkit gelesen wird, -webkit-keyframesglaube ich, dass es sicher ist, sie zu entfernen.
Bor691
2
Habe ich Recht, wenn ich verstehe, dass dies theoretisch nicht perfekt ist, da die Eigenschaften ohne Herstellerpräfix immer die letzten sein sollten, um standardkonformes Verhalten nicht zu überschreiben? Siehe: css-tricks.com/ordering-css3-properties
Cool. Wurde vor dem Bearbeiten überprüft. War nicht 100% sicher.
@ Ricky - Tipp: Wenn Sie bereits eine Bearbeitung mit dem Autor besprochen haben (wie oben), ist es keine schlechte Idee, dies in den "Kommentaren bearbeiten" zu erwähnen. Die Bearbeitung wird also nicht als "radikale Veränderung" abgelehnt ;-)
Leigh
1
Wenn Sie PostCSS verwenden, sollten Sie Autoprefixer verwenden, um alle browserübergreifenden Probleme zu lösen, wenn Sie nur PostCSS verwenden transform.
Michał Pietraszko
88

Funktioniert gut:

#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>
Erweitern Sie das Snippet

Alexander Ruliov
quelle
Gibt es eine Crossbrowser-CSS-Lösung?
Andrej
13

Animation mit unendlicher Rotation in 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>
Erweitern Sie das Snippet

MDN - Web CSS Animation

Roko C. Buljan
quelle
6

Ohne Präfixe, zB am einfachsten:

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

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

Funktioniert in allen modernen Browsern

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}
Kareem
quelle
2

Drehung beim Hinzufügen der Klasse .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
quelle
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
quelle
1 
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}
vinkal
quelle
3
Hallo, willkommen bei Stack Overflow! Wenn Sie eine Frage beantworten, sollten Sie eine Erklärung hinzufügen, z. B. was der Autor falsch gemacht hat und was Sie getan haben, um das Problem zu beheben. Ich sage Ihnen dies, weil Ihre Antwort als minderwertig gekennzeichnet wurde und derzeit überprüft wird. Sie können Ihre Antwort bearbeiten , indem Sie auf die Schaltfläche "Bearbeiten" klicken.
Federico Grandi