Анімація у CSS може допомагати створювати ефекти руху або зміни властивостей для різних елементів сторінки. Сьогодні ми створимо кілька нескладних анімацій і наша сторінка оживе!
Властивість animation працює разом з правилом @keyframes. У animation прописуємо ім’я анімації , її швидкість і властивості. Правило @keyframes має таке ж ім’я, яке прописано у основній властивості та задає правило для зміни властивості.
Анімації можуть бути як простенькими, так і надзвичайно складними. Для простих достатньо властивостей animation та @keyframes, які ми й розглянемо на занятті. Для складних є додаткові параметри, про які можна почитати тут та тут.
Давайте відразу розглянемо на прикладі.
1: Створимо анімацію для картинки без фону. Будемо змінювати їй фон. Для початку знайдіть картинку без фону (Гуглимо по картинках. Обираємо “Інструменти пошуку/Колір/прозорі”) і додайте її з класом ex1:
<img class="ex1" src="https://png.pngtree.com/png-clipart/20231019/original/pngtree-cute-monster-illustration-png-image_13371657.png">Тепер для класу ex1 пропишемо стилі: розміри (якщо треба) та анімацію.
.ex1 {
width: 100px;
animation: change-background 10s linear;
}
@keyframes change-background {
/* допишіть самостійно за прикладом на картинці */
}
2: Змініть стилі для цієї анімації. Додайте кольори для 25% та 75%. Змініть властивість, щоб анімація проходила швидше.
3: У наступному прикладі ми будемо крутити зображення. 🙃. Додайте нове зображення, з класом ex1. Створіть нову анімацію з додатковою властивістю infinite в кінці. В правило додайте для 100% зміну властивості transform: rotate(360deg);
Перевірте себе :
4: Тепер створіть картинку, яка буде збільшуватись в розмірах поступово. Наприклад від 100 до 600 пікселів у ширину.
5: А тепер попрацюємо над анімацією колеса фортуни. Зробіть Fork з проєкту : https://codepen.io/AnikaAmiga/pen/VwNbRJX?editors=0110.
Розгляньте те, як прописані стилі для кольорів і де прописана анімація.
Перше, що треба, заставити колесо крутитися. Додайте такі скрипти :
let a = document.getElementById ("circle");
function myfunON() {
a.style.animationPlayState = 'running';
a.style.animationDuration=3+"s";
}
function myfunOFF() {
a.style.animationPlayState = 'paused';
}Перша функція включає колесо. Воно буде крутитися з малою швидкістю (один оберт за 3 секунди). Друга функція ставить на паузу.
Знайдіть у html кнопки. Що робить властивість onclick=”myfunON()” ?
6: Змініть написи на колесі. Воно може обирати їжу, домашні обов’язки, ваших друзів тощо.
Домашня робота
1: Створіть анімацію для картинки з серцем, яке буде збільшуватись і зменшуватись (за допомогою transform: scale(1); )нескінченно імітуючи серцебиття.
Підказка:
transform: scale(1);
....
transform: scale(.9);
....
transform: scale(1.1);2: Створіть анімацію для тексту або заголовку, який буде змінювати розмір та колір.
3: У проєкті з колесом створіть функції myfun1, myfun2, myfun3 (за прикладом myfunON) . Кожна функція має задавати нову швидкість обертання. Де myfunON – найповільніша, myfun1- трохи швидша, myfun2 – ще швидша, myfun3 – максимальна швидкість.
Підказка : для швидкості працюють дробові числа, наприклад: 0.5.
4: Перед колесом додайте картинку зі стрілкою вниз, яка буде показувати, яке значення обрали.
Підказка для розташування стрілки:
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;5: Змініть значення на колесі. Замість цифр поставте їжу або імена друзів, або ще щось на ваш вибір. Змініть стилі для колеса або кнопок.
Level Up
1: Створіть анімацію машини з колесами, які крутяться. Можете використати картинки нижче.
<img src="https://img.freepik.com/free-vector/racing-car-in-yellow-on-white_1308-41219.jpg?size=338&ext=jpg&ga=GA1.1.1546980028.1711065600&semt=ais">
<img src="https://png.pngtree.com/png-clipart/20210912/original/pngtree-car-wheel-tires-png-image_6750879.jpg">
<img src="https://png.pngtree.com/png-clipart/20210912/original/pngtree-car-wheel-tires-png-image_6750879.jpg">
Для цього для машини можна задати властивості position: absolute; та z-index: -1; (остання допоможе перейти картинці машини ніби на другий план і картинки колес та інші картинки будуть спереду, а машина ззаду.)
2: Знайдіть приклад анімації в інтернеті. Додайте цей приклад у свій редактор коду (можна в окремий проєкт). Відредагуйте анімацію, змінивши її якимось чином на ваш смак, можна навіть щось просте змінити. В гугл клас скиньте посилання на оригінальний приклад і посилання на ваш проєкт.
