CSS3 анимация rotateSpinner не работает

Question

img { 
text-align: center; 
width: 20px; 
margin: auto; 
display: block; 
-webkit-animation: rotateSpinner 1.2s linear infinite; 
} 

демо http://jsfiddle.net/cfe2ym54/

Что здесь проблема?

Answer 1

вы забыли добавить keyframes

img { 
 
    text-align: center; 
 
    width: 20px; 
 
    margin: auto; 
 
    display: block; 
 
    -webkit-animation: rotateSpinner 1.2s linear infinite; 
 
    animation: rotateSpinner 1.2s linear infinite; 
 
} 
 
@-webkit-keyframes rotateSpinner { 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes rotateSpinner { 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="loading"> 
 
    <img src="http://assets.57square.com/img/loading.png"> 
 
</div>