«Как творить чудеса» или же просто CSS анимация

Доброго времени суток, уважаемые Хабравчане, сегодня я хочу написать о CSS анимации, а точнее навести один ее очень легкий, но довольно прикольный, пример.
Я возьму вот такую вот шестеренку, и заставлю ее крутиться плавно и бесконечно.



Для этого нам нужна лишь сама шестеренка (для удобства с прозрачным фоном) и ну хоть немного прямые руки для того что бы писать на CSS, ну или копипастить как вариант.
Вы же можете взять свою картинку, какая вам больше по душе, она тоже закрутится, не переживайте.

В HTML вставляем нашу картинку, выглядит это как обычно, никакой специальной магии:




Далее переходим к CSS.
Сначала настраиваем нашу картинку:

img {
width: 400px; Устанавливаем ее размеры
animation-name: rotation; Имя анимации. Немного ниже мы создадим анимацию с этим именем. Не сделайте их разными, иначе не заработает.
animation-duration: 10s; Задаем продолжительность одного цикла анимации.
animation-iteration-count: infinite; Задаем количество повторений цикла, в нашем случае — бесконечность.
animation-timing-function: linear; Ну и указываем плавный тип анимации.
}


Ну а теперь, создаем нашу анимацию. Не забываем что мы уже указали ее название «rotation». Она настолько простая, что повторить такое сможет каждый.

@keyframes rotation { Создаем ключевые кадры для анимации с именем «rotation».
0% {transform:rotate(0deg);} Старт цикла, картинка повернута на 0 градусов о.О
100% {transform:rotate(360deg);} Конец цикла, картинка повернута на 360 градусов, т.е. ее полный оборот.
}


Вот и все, готово.
Результат — codepen.io/willardholly/pen/iaxAK

Надеюсь что описал все просто и понятно.

Вот конечный CSS код с учетом разных браузеров:

img {
width: 400px;
-webkit-animation-name: rotation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotation;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotation;
-o-animation-duration: 10s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotation;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-moz-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-o-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}