CSS3 Spin Animation

Przejrzałem kilka dem i nie mam pojęcia, dlaczego nie mogę uruchomić spinu CSS3. Używam najnowszej stabilnej wersji Chrome.

The fiddle: 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>
Author: Mosh Feu, 2013-02-13
Source

6 answers

Aby użyć animacji CSS3, musisz również zdefiniować rzeczywiste klatki kluczowe animacji (, które nazwałeś spin)

Czytaj https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations Więcej informacji

Po skonfigurowaniu czasu animacji należy zdefiniować jej wygląd. Odbywa się to poprzez ustanowienie dwóch lub więcej klatek kluczowych przy użyciu @keyframes Zasady. Każda klatka kluczowa opisuje, w jaki sposób animowany element powinien renderowanie w określonym czasie podczas sekwencji animacji.

Demo na 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);}
}
 232
Author: Gabriele Petrioli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-13 17:38:07

Nie podałeś żadnych klatek kluczowych. udało mi się to tutaj .

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);}   
}
Możesz z tym zrobić wiele fajnych rzeczy. Oto jeden, który zrobiłem wcześniej.

:)

N. B. możesz pominąć konieczność wypisywania wszystkich prefiksów, jeśli używasz - prefiks-free .

 16
Author: Jezen Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-05 11:02:58

Od najnowszego Chrome / FF i na IE11 nie ma potrzeby stosowania prefiksu-ms/-moz/-webkit. Oto krótszy kod (oparty na poprzednich odpowiedziach): 

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/

 8
Author: oriadam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-30 09:56:58

HTML z czcionką-awesome gliphicon.

<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;
}
 5
Author: Pere Pages,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-13 16:33:01

Aby obracać, możesz użyć ramek kluczowych i transformacji. 

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

Przykład

 3
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-13 17:37:31

Dla uzupełnienia, oto przykład Sass / Compass, który naprawdę skraca kod, skompilowany CSS będzie zawierał niezbędne prefiksy itp.

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

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))
 2
Author: miphe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-03 08:02:07