Ознайомлення із CSS-анімацією (animation)

У минулій статті ми робили короткий огляд CSS-переходів, а в цьому пості проведемо ознайомлювальний рейд по корисним, як я сподіваюся, питанням CSS-анімації. Ці дві нові властивості в CSS3 дозволяють створювати на сайті привабливу і «магічну» інтерактивність, навіть без використання JavaScript. Також, в сьогоднішньому пості, розглянемо практичний приклад застосування властивості animation в CSS.

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

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

Що таке CSS-анімація (animation)?

Якщо CSS-переходи пов’язані зі зміною властивостей елемента при переході із одного стану в інший, то CSS-анімація залежить від ключових кадрів і властивостей анімації. За допомогою CSS-анімації можна створювати ефекти, які будуть автоматично запускатися і повторюватися в заданому проміжку часу.

  • keyframes – це ключові кадри, які використовуються для визначення стилів для елемента в різні проміжки часу.
  • Властивості анімації – це ті властивості, які призначаються елементу за допомогою ключових кадрів (@keyframes) і визначають те, як елемент буде анімований.

Анімація в CSS може застосовуватися практично до всіх елементів в HTML5 (включаючи псевдо елементи :before та :after).

animation присвоюється певному блокові в його «спокійному» (звичайному) стані за допомогою властивостей анімації, які можна використовувати для анімації багатьох властивостей CSS (наприклад, колір фону, висота або ширина). Поведінка анімації визначається за допомогою правил в ключових кадрах (@keyframes).

Є вісім властивостей animation (в алфавітному порядку):

  • animation-delay – задає затримку перед початком анімації, в секундах
  • animation-direction – вказує на те, чи повинна анімація відтворюватися в зворотному або чергованому циклах (reverse або alternate)
  • animation-duration – визначає те, скільки секунд або мілісекунд потрібно анімації для завершення одного циклу
  • animation-fill-mode – стиль для елемента, коли анімація не відтворюється. Наприклад, коли анімація завершилася або у неї задана затримка
  • animation-iteration-count – задає кількість разів, яку має відтворюватися анімація (infinite – для нескінченної кількості разів)
  • animation-name – визначає ім’я @keyframes анімації
  • animation-play-state – вказує на те, чи запущена анімація або припинена (running або paused)
  • animation-timing-function – визначає криву швидкості анімації

Весь синтаксис властивостей анімації виглядає так:

div {
  animation-name: тут назва для ключових кадрів;
  animation-duration: тривалість анімації в секундах або мілісекундах;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

А короткий запис властивостей анімації виглядає так:

div {

  animation: nazva-animaciyi 1.5s ease-out 0s alternate infinite none running;

}

Властивості записуються без ком, бажано в порядку слідування властивостей. При цьому, якщо деякі властивості не вказати, будуть задіяні властивості за замовчуванням. Якщо потрібно присвоїти одному елементу кілька різних ключових кадрів, тоді між властивостями ставиться кома.

Зразок синтаксису ключових кадрів @keyframes виглядає так:

@keyframes [назва анімації] {

  0% {/* початковий кадр */
    [властивість CSS]: [значення властивості];

  }

  100% {/* фінальний кадр */
    [властивість CSS]: [значення властивості];

  }

}

У правилах @keyframes можна використовувати більше двох (початкового і фінального) ключових кадрів (наприклад, проміжні в позначці 30%, 75% і т.д.). Також в кожному ключовому кадрі можна вказувати досить велику кількість властивостей CSS.

Нижче представлений практичний приклад CSS коду для створення анімації великого червоного кола.

div {

  background-color: red;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  margin: 50px;
  animation: pulsuvannya 2s ease infinite;

}

 

@keyframes pulsuvannya {

  0% {
    transform: scale (1);
  } 

  50% {
    transform: scale (1.3);
  }

  100% {
    transform: scale (1);
  }

}

Демо-приклад коду:

Практично всі сучасні браузери підтримують цю властивість, але для більшої сумісності потрібно використовувати префікси браузерів, причому стандартний синтаксис оголошується останнім. Це відноситься і до властивості animation, і до правил ключових кадрів keyframes:

div {
  -webkit-animation: [назва кейфрейма] 3s infinite;
  -moz-animation: [назва кейфрейма] 3s infinite;
  -o-animation: [назва кейфрейма] 3s infinite;
  animation: [назва кейфрейма] 3s infinite;
}
 

@-webkit-keyframes [назва кейфрейма] {

  0% {opacity: 0; }
  100% {opacity: 1; }

}

@-moz-keyframes [назва кейфрейма] {

  0% {opacity: 0; }
  100% {opacity: 1; }

}

@-o-keyframes [назва кейфрейма] {

  0% {opacity: 0; }
  100% {opacity: 1; }

}

@keyframes [назва кейфрейма] {

  0% {opacity: 0; }
  100% {opacity: 1; }

}

Tags: CSS3HTML5

Recent Posts

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020

Футбольний Інстаграм – що нового у топових футболістів

Деякі відомі футболісти ретельно приховують свої особисте життя, а інші – активно постять фотографії з… Read More

24/08/2020

Види та типи компресійних панчіх

Вироби називають компресійними, коли їх застосовують для лікування, а також профілактики порушень кровотоку в нижніх… Read More

22/08/2020

Як правильно замінити оливу у двотактному гідроциклі?

Гідроцикли – це класний плавзасіб, який може подарувати вам незліченні години приємного проведення часу на… Read More

19/08/2020