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>
źródło
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.Nie określono żadnych klatek kluczowych. Zrobiłem to tutaj .
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 .
źródło
Od najnowszego Chrome / FF i IE11 nie ma potrzeby stosowania przedrostka -ms / -moz / -webkit. Oto krótszy kod (oparty na poprzednich odpowiedziach):
Demo na żywo: http://jsfiddle.net/9Ryvs/3057/
źródło
animation: spin 4s linear infinite
.HTML z niesamowitym glifem czcionek.
CSS
źródło
Jedyna odpowiedź, która daje prawidłowe 359 stopni:
Oto przydatny gradient, dzięki któremu możesz udowodnić, że się obraca (jeśli jest to okrąg):
źródło
Aby obrócić, możesz użyć klatek kluczowych i transformacji.
Przykład
źródło
Aby zakończyć, oto przykład Sass / Compass, który naprawdę skraca kod, skompilowany CSS będzie zawierał niezbędne prefiksy itp.
źródło
to sprawi, że odpowiesz na pytanie
źródło