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

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

 

Share

Останні пости

Сомерсет Моем

Подорослішавши, ви збагнете, що світ стає стерпним за однієї умови: коли розумієш, що людський егоїзм… Читати далі

27/03/2024

Михайло Грушевський

Всі вчаться своєї рідної мови, а наша біда така, що треба вчитися її більше, ніж… Читати далі

26/03/2024

ТОП-5 покерних обмінників

Професійний покер – це численні турніри та великі гроші, що потребує правильного налаштування фінансових інструментів.… Читати далі

25/03/2024

Гай Юлій Цезар

Всі довкола прагнуть винищити ворогів, а не об'єднатися з друзями Гай Юлій Цезар   Читати далі

24/03/2024

Як вибрати оптимальний смартфон для дитини?

Сьогоднішні діти стикаються з технологіями вже в ранньому віці, і смартфон давно перестав бути просто… Читати далі

22/03/2024

Вибираємо електроскутер: важливі критерії та характеристики

Років 20 тому спостерігався пік популярності скутерів із двигуном внутрішнього згоряння (ДВЗ). Маленькі, юркі, з… Читати далі

21/03/2024