Бесконечная анимация вращения на CSS

Всем доброго времени суток. Ранее на href.kz уже публиковался пост про то как сделать анимацию вращения элемента при наведении курсора. Сегодня изобретем колесо рассмотрим похожий эффект, отличие будет в том, что вращение элемента будет происходить самостоятельно, без каких-либо воздействий со стороны пользователя. Для этого мы будет использовать возможности CSS3 для анимации. Подобные эффекты так же часто могут использоваться в веб-разработке, для различных целей, начиная от прогресс-баров, заканчивая анимацией вращения колеса автомобиля. Задачи в общем то могут быть абсолютно разные.

Давайте в качестве нашего примера элемента возьмем изображение колеса автомобиля, и заставим его вращаться. Пример с демонстрацией работы кода вы можете посмотреть к конце этой статьи.

Первым делом, добавляем наше изображение на страницу:

<img src="https://href.kz/example/koleso.png" />

После этого, прописываем такой CSS код:

img {
	width: 200px;
	animation-name: rotation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

Итак, теперь немного пояснения значений CSS свойств для тега img.
animation-name – мы задали имя анимации, в нашем случае это «rotation»;
animation-duration — время в секундах, за которое происходит цикл вращения;
animation-iteration-count – количество повторений, в нашем случае – бесконечно;
animation-timing-function – тип анимации, в нашем случае линейный (равномерный) – «linear»;

Теперь самое время прописать саму анимацию:

@keyframes rotation {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

Здесь, как вы, наверное, уже смогли догадаться заданы ключевые кадры анимации «rotation». Положение элемента на начальном этапе цикла (0%) указано 0 градусов, положение на конечном этапе цикла (100%) — 360 градусов. Таким образом анимация вращения будет происходить от 0 до 360 градусов, далее цикл будет повторяться. Всё довольно просто не так ли.

А вот полный CSS-код, особенность его в том, что здесь сделано для учета особенностей всех браузеров:

img {
   margin-top:20px;
    width: 200px;
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotation;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: rotation;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: rotation;
    animation-duration: 5s;
    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);}
}

Демонстрация работы кода.