CSS3 Spin Animation

158

Ich habe einige Demos überprüft und habe keine Ahnung, warum ich den CSS3-Spin nicht zum Laufen bringen kann. Ich verwende die neueste stabile Version von Chrome.

Die Geige: 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>

iambriansreed
quelle

Antworten:

299

Um CSS3-Animation verwenden zu können, müssen Sie auch die tatsächlichen Animations-Keyframes definieren ( die Sie benannt habenspin ).

Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

Nachdem Sie das Timing der Animation konfiguriert haben, müssen Sie das Erscheinungsbild der Animation definieren. Dies erfolgt durch Einrichten von zwei oder mehr Keyframes mithilfe der @keyframesat-Regel. Jeder Keyframe beschreibt, wie das animierte Element zu einem bestimmten Zeitpunkt während der Animationssequenz gerendert werden soll.


Demo unter 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);}
}
Gabriele Petrioli
quelle
9
Sie erhalten das ✓, weil Sie es am besten erklärt haben und Sie die einzige Antwort sind, die alle vorangestellten Versionen enthält.
Iambriansreed
53
Das ist super pingelig, aber Sie sollten es wirklich auf 359 Grad animieren lassen. 360 und 0 Grad sind radial gleich, sodass die Animation bei einer vollen Umdrehung so kurz angehalten wird.
Adam Grant
1
@ AdamGrant Danke, das hat mir heute fast Kopfschmerzen bereitet lol
mattslone
5
Sie möchten auf 359,9999999999 Grad animieren, nicht auf 359. Rotationsgrade sind ein kontinuierlicher Bereich von [0, 360]. Wenn Sie auf 359,0 drehen, wird zu Beginn jeder Drehung ein Häkchen von 1 Grad angezeigt, wenn sie sich von 359 auf 0 verzieht .
mdonoughe
16
Um all diese Kommentare zu verdeutlichen, die falsche Informationen enthalten ... IST die ausgewählte Antwort ohne Änderungen RICHTIG. 0 und 360 Grad unterscheiden sich in den Augen des Browsers tatsächlich, sind aber immer noch der gleiche Punkt. Wenn Sie beispielsweise versuchen, es von 0 Grad auf 0 Grad (oder 360 Grad auf 360 Grad) zu drehen, wird es überhaupt nicht gedreht. Durch Drehen von 0 Grad auf 360 Grad wird der Browser angewiesen, das Objekt vor Abschluss der Animation um volle 360 ​​Grad zu drehen. Stellen Sie das ein animation-iteration-count: infinite;und Sie haben unendlich viele Frames in der Animation. Selbst eine 20-minütige Drehung sieht makellos und glatt aus.
Jacurtis
28

Sie haben keine Keyframes angegeben. Ich habe es hier zum Laufen gebracht .

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

Damit kann man tatsächlich viele wirklich coole Sachen machen. Hier ist eine, die ich früher gemacht habe .

:) :)

NB Sie können überspringen, dass Sie alle Präfixe ausschreiben müssen, wenn Sie -prefix-free verwenden .

Jezen Thomas
quelle
17

Ab dem neuesten Chrome / FF und unter IE11 ist das Präfix -ms / -moz / -webkit nicht mehr erforderlich. Hier ist ein kürzerer Code (basierend auf früheren Antworten):

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

Live-Demo: http://jsfiddle.net/9Ryvs/3057/

Oriadam
quelle
5
Kombinieren Sie Animationsregeln mit Kurzschrift animation: spin 4s linear infinite.
Josh Habdas
10

HTML mit tollem 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;
}
Pere Seiten
quelle
1
Sie erhalten auch meine Gegenstimme für das Hinzufügen der Definition für .spin
Blair Connolly
6

Die einzige Antwort, die die richtigen 359 Grad ergibt:

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

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

Hier ist ein nützlicher Farbverlauf, damit Sie beweisen können, dass er sich dreht (wenn es sich um einen Kreis handelt):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
danday74
quelle
4

Zum Drehen können Sie Keyframes und eine Transformation verwenden.

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

Beispiel


quelle
4

Der Vollständigkeit halber hier ein Sass / Compass-Beispiel, das den Code wirklich verkürzt. Das kompilierte CSS enthält die erforderlichen Präfixe usw.

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

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))
Miphe
quelle
0
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Dadurch können Sie die Frage beantworten

Sudarshan
quelle
Dies scheint nur eine Wiederholung dieser bestehenden Antwort zu sein .
Pang