курси програмування для дітей безкоштовно

Анімація у CSS

Анімація у 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: Знайдіть приклад анімації в інтернеті. Додайте цей приклад у свій редактор коду (можна в окремий проєкт). Відредагуйте анімацію, змінивши її якимось чином на ваш смак, можна навіть щось просте змінити. В гугл клас скиньте посилання на оригінальний приклад і посилання на ваш проєкт.

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *