CSS3 Spin Animation

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>

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

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 .

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/

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

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

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

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

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

Dadurch können Sie die Frage beantworten