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

}

 

Recent Posts

Мати Тереза

Якщо молитва – це твоє звернення до Бога, то інтуїція – це розмова Бога з… Read More

17/02/2021

Особливості маркування косметики

Косметична продукція – товари, що належать до особливої ​​категорії. Упаковка повинна відповідати ряду вимог. Важливо,… Read More

16/02/2021

Основні компоненти системи розсувних дверей (купе)

Розсувні двері купе – це стильний і сучасний спосіб додати індивідуальності вашому будинку. Вони не… Read More

12/02/2021

Дивовижні місця України для відпочинку душею і тілом

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

05/02/2021

Покращуємо показники Core Web Vitals – основний тренд SEO в 2021 році

Раніше ми писали про те, що таке Основні веб-показники (по-англійськи Core Web Vitals) в інструменті… Read More

30/01/2021

Відповіді на найпоширеніші питання про жорсткі диски для ноутбуків

Не всі жорсткі диски однакові, і коли ви купуєте новий ноутбук, на вибір у вас… Read More

29/01/2021