О web-разработке
и даже немного больше...

Бесконечная анимация вращения на 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);}
}

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

Опубликован: 08.08.2018 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта
Подсветка синтаксиса кода на вашем сайте

Комментарии

  1. almooftah пишет:

    Thanks so much for the post.Really thank you! Great.

  2. Анастасия пишет:

    А что делать, если завертелись все картинки на странице?)))

  3. htmaker пишет:

    Добавьте отдельный CSS-класс для картинки, и задавайте стили непосредственно для этого класса

  4. ИмяИмя пишет:

    Спасибо большое!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта