Animacja CSS3 Spin

Question

Sprawdziłem kilka wersji demonstracyjnych i nie mam pojęcia, dlaczego nie mogę uruchomić spinów CSS3. Korzystam z najnowszej stabilnej wersji Chrome.

skrzypcach: 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>

Answer 1

Aby użyć CSS3 animacji należy również określić rzeczywiste klatek kluczowych animacji (którego nazwie spin)

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

Po” ve skonfigurował czas animacji, musisz zdefiniować wygląd animacji. Odbywa się to poprzez ustanowienie dwóch lub więcej klatek kluczowych za pomocą reguły at @keyframes. Każda klatka kluczowa opisuje, w jaki sposób animowany element powinien renderować się 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);} 
} 

Answer 2

Nie podano żadnych klatek kluczowych. I made it work here.

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 zrobić naprawdę wiele fajnych rzeczy. Here is one I made earlier.

:)

nb Możesz pominąć wypisywanie wszystkich prefiksów, jeśli używasz -prefix-free.

Answer 3

Aby obrócić, można 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); 
    } 
} 

Example

Answer 4

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

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

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

Answer 5

Dla zakończenia, oto przykład Sass/Kompas który naprawdę skraca kod, skompilowany CSS obejmie 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)) 

Answer 6

HTML z fantastycznym kodem glifowym.

<span class="fa fa-spinner spin"></span> 

CSS

@-moz-keyframes spin { 
    to { -moz-transform: rotate(359deg); } 
} 
@-webkit-keyframes spin { 
    to { -webkit-transform: rotate(359deg); } 
} 
@keyframes spin { 
    to {transform:rotate(359deg);} 
} 

.spin { 
    animation: spin 1000ms linear infinite; 
}