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

Давайте в якості нашого прикладу елемента візьмемо зображення колеса автомобіля, і змусимо його обертатися. Приклад з демонстрацією роботи коду ви можете подивитися на кінці цієї статті.

Першим ділом, додаємо наше зображення на сторінку:

Після цього, прописуємо такий 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);}
}

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

Додав: htmaker, 08.08.2018 р.
(Ще не оцінили)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript

Анімація набору тексту на JQuery плагіні — TypeIt
Рубрика: Html, CSS, Javascript

Коментарі

  • almooftah пише:
    22.08.2018 в 21:45

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

    Відповісти