Урок 18

Використання зображень у веб-документах.
Створення GIF-анімації. Анімація CSS


Приклади GIF-анімації ->   
Animexample.gif
Автор: Branko из английский Википедия - Перенесено с en.wikipedia на Викисклад. собственная работа, Общественное достояние, Ссылка
Створення GIF-файлів за допомогою он-лайн програм:
 30 идей для gif-анимации: разборы, примеры, шаблоны
За допомогою стилів можна задавати не лише статичний вигляд сторінки та її елементів, їх динамічну зміну.

div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
/* Standard syntax */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}

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

Стиль

результат

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

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


Практичне завдання

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

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

Завдання 2:
Створити анімаційні ефекти за допомогою стилів CSS.
матеріали: приклад 1         приклад 2
  • створити файл html  із css
  • за своїми уподобаннями створити 3-4 зміни кольору (форми) фігури, що переміщується
  • у тексті задати своє ім'я та прізвище
  • зберегти файли та надати на перевірку



Немає коментарів:

Дописати коментар

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