Ознайомлення із 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);
  }
}

 

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

Дивіться більше прикладів анімації в CSS з допомогою ключових кадрів keyframes у нашому практичному уроці.

Практично всі сучасні браузери підтримують цю властивість, але для більшої сумісності потрібно використовувати префікси браузерів, причому стандартний синтаксис оголошується останнім. Це відноситься і до властивості 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; }
}

Дякую за увагу!