Вращение изображения через CSS3

#html5 #css3 #вёрстка

Нужно из этой картинки сделать прелоадер для мобильного приложения 



чтобы она вращалась, когда ее показывают, этот код работает, только по какому нибудь
событию, например :hover

-moz-transform:rotate(360deg);
-moz-transition-duration:1000ms;
-moz-transition-timing-function: ease-out;


Вопрос: как заставить картинку крутиться циклически и как сделать, чтобы анимация
происходила сразу в момент показывания дива с этим изображением используя только цсс3.
    

Ответы

Ответ 1

Оставлю ка я это здесь, для наглядности решения

.loader{
    -webkit-animation: preloader 1.5s infinite linear;
    -moz-animation: preloader 1.5s infinite linear;
    -ms-animation: preloader 1.5s infinite linear;
    -o-animation: preloader 1.5s infinite linear;
    animation: preloader 1.5s infinite linear;
}

@-webkit-keyframes preloader {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes preloader {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes preloader {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes preloader {
    to { -o-transform: rotate(360deg); }
}

@keyframes preloader {
    to { transform: rotate(360deg); }
}


Chrome 2+, Safari 4+, Firefox 5+, IE10 PP3, iOS Safari 3.2+, Android 2.1+.




Есть ещё такое, без картинок.