Урок 18

Анімація у вебдокументах


CSS дозволяє зробити анімацію HTML-елементів без використання JavaScript!


Підручник Анімація CSS з редактором  


Можна також задавати зміну позиції в анімації; для цього у початкових властивостях слід вказати відносне позиціювання, а у кадрах анімації - задати параметри розташування об'єкта відносно верху та лівої межі сторінки. 

Стиль

результат

border-radius: 30px;

 

border-radius: 25% 10%;

 

border-radius: 10% 30% 50% 70%;

 

border-radius: 10% / 50%;

 

border-radius: 10px 100px / 120px;

 

border-radius: 50% 20% / 10% 40%;

 


Серед анімованих властивостей можна використати трансформацію transform, яка може набувати значень:

  • matrix(n,n,n,n,n,n) - перетворення, 
  • translate(x,y) - переміщення, 
  • scale(x,y) - масштаб, 
  • rotate(кут) - поворот, 
  • skew(кут-x,кут-y) - перспектива
@Keyframes  — це «ключові кадри», на основі яких створюється анімація для вебсторінки. Вони показують, як буде виглядати анімований елемент у конкретний момент часу. У стилі CSS @keyframes — це правило, яке описує створення «ключового кадру»

Властивість

Опис

@keyframes

Указує код анімації

animation

Скорочена властивість для завдання всіх анімацій властивостей

animation-delay

Указує паузу до початку анімації

animation-direction

Указує, чи відповідає анімація вперед, назад або в альтернативних циклах

animation-duration

Указує, скільки часу має забрати анімацію для завершення одного циклу

animation-fill-mode

Задає стильовий елемент, якщо анімація не відтворюється (до початку, після завершення або і того, і іншого)

animation-iteration-count

Указує, скільки разів повинна відтворюватися анімація

animation-name

Указує ім'я анімації @keyframes

animation-play-state

Указує, запущена чи анімація або призупинена

animation-timing-function

Задає криву швидкість анімації


GIF Анімація, ресурси онлайн   





Практичне завдання
Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.

Завдання 1:
Створити анімаційні ефекти до картинки, чи з групи картинок.

  • вибрати групу картинок чи картинку;
  • виконати зміни у картинках, створивши 4-6 послідовних змін за задуманим сценарієм;
  • завантажити картинки на ресурс, створити GIF-анімацію за задуманим сценарієм.
  • зберегти результати роботи в файл GIF та надати на перевірку

Завдання 2:
Створити анімаційні ефекти для текстів. Анімувати своє прізвище та ім'я
Використати аніматор текстів онлайн.
Наприклад: https://www.textstudio.com/text-animation-generator 
  • обрати дизайн для тексту, налаштувати анімацію за своїм вибором  
  • у тексті задати своє ім'я та прізвище
  • зберегти файли та надати на перевірку



Підписатися на: Дописи (Atom)