CSS3 Spin Animation

158

Przejrzałem kilka wersji demonstracyjnych i nie mam pojęcia, dlaczego nie mogę sprawić, aby spin CSS3 działał. Używam najnowszej stabilnej wersji Chrome.

Skrzypce: 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
źródło

Odpowiedzi:

299

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

Przeczytaj https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations, aby uzyskać więcej informacji

Po skonfigurowaniu czasu animacji musisz zdefiniować wygląd animacji. Odbywa się to poprzez ustanowienie dwóch lub więcej klatek kluczowych za pomocą @keyframesreguły at. Każda klatka kluczowa opisuje, jak animowany element powinien być renderowany w danym momencie 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);}
}
Gabriele Petrioli
źródło
9
Otrzymujesz ✓, ponieważ wyjaśniłeś to najlepiej i jesteś jedyną odpowiedzią, która zawiera wszystkie wersje z prefiksem.
iambriansreed
53
To jest bardzo trudne, ale naprawdę powinieneś mieć animację do 359 stopni. 360 i 0 stopni są takie same promieniowo, więc animacja zatrzymywałaby się na krótko przy pełnym obrocie.
Adam Grant
1
@AdamGrant Dziękuję, prawie przyprawiło mnie to dzisiaj o ból głowy lol
mattslone
5
Chcesz animować do 359.9999999999 stopni, a nie 359. Stopnie obrotu to ciągły zakres [0, 360) i jeśli obrócisz do 359.0, będziesz miał 1 stopień tikka na początku każdego obrotu, gdy wypaczy się z 359 do 0 .
mdonoughe
16
Aby wyjaśnić wszystkie te komentarze, które podają nieprawidłowe informacje ... wybrana odpowiedź JEST PRAWIDŁOWA bez modyfikacji. 0 i 360 stopni są w rzeczywistości różne w oczach przeglądarki, ale wciąż są tym samym punktem. Na przykład, jeśli spróbujesz obrócić go od 0 stopni do 0 stopni (lub 360 do 360 stopni), w ogóle się nie obróci. Obrócenie go od 0 do 360 stopni mówi przeglądarce, aby obróciła obiekt o pełne 360 ​​stopni przed zakończeniem animacji. Ustaw, animation-iteration-count: infinite;a będziesz mieć nieskończoną liczbę klatek w animacji. Nawet 20-minutowa rotacja będzie wyglądać bezbłędnie i gładko.
jacurtis
28

Nie określono żadnych klatek kluczowych. Zrobiłem 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);}   
}

Dzięki temu możesz zrobić wiele naprawdę fajnych rzeczy. Oto jeden, który zrobiłem wcześniej .

:)

NB Możesz pominąć zapisywanie wszystkich przedrostków, jeśli używasz -prefix-free .

Jezen Thomas
źródło
17

Od najnowszego Chrome / FF i IE11 nie ma potrzeby stosowania przedrostka -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);}
}

Demo na żywo: http://jsfiddle.net/9Ryvs/3057/

oriadam
źródło
5
Połącz zasady animacji ze skrótami animation: spin 4s linear infinite.
Josh Habdas
10

HTML z niesamowitym glifem czcionek.

<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 Pages
źródło
1
Otrzymujesz również moje poparcie za dodanie definicji domeny .spin
Blair Connolly.
6

Jedyna odpowiedź, która daje prawidłowe 359 stopni:

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

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

Oto przydatny gradient, dzięki któremu możesz udowodnić, że się obraca (jeśli jest to okrąg):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
danday74
źródło
4

Aby obrócić, możesz użyć klatek 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


źródło
4

Aby zakończyć, 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))
miphe
źródło
0
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

to sprawi, że odpowiesz na pytanie

sudarshan
źródło
Wydaje się, że jest to tylko powtórka istniejącej odpowiedzi .
Pang