НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Анімації


CSS Анімації

CSS дозволяє зробити анімацію HTML-елементів без використання JavaScript або Flash!

CSS

В цьому розділі ви дізнаєтесь про наступні властивості:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Браузерна підтримка анімації

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

Властивість
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Що таке CSS анімація?

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

Ви можете змінити стільки CSS властивостей, скільки хочете, і стільки разів, скільки хочете.

Щоб використовувати CSS-анімацію, спочатку необхідно вказати кілька ключових кадрів для анімації.

Ключові кадри містять стилі, які елемент буде мати у визначений час.


Правило @keyframes (ключові кадри)

Коли ви задаєте CSS стилі всередині правила @keyframes анімація поступово зміниться з поточного стилю на новий стиль у визначені моменти часу.

Щоб анімація працювала, ви повинні прив’язати її до елементу.

В наступному прикладі анімація "example" зв’язується з елементом <div>. Анімація буде тривати 4 секунди та поступово змінить колір фону елемента <div> з червоного - "red" на жовтий - "yellow":

Приклад

/* Код анімації */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Елемент, до якого застосовується анімація */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Спробуйте самі »

Примітка: Властивість animation-duration властивість визначає, скільки часу анімація має зайняти для завершення. Якщо властивість animation-duration не вказано, анімація не буде виконуватись, оскільки значення за замовчуванням дорівнює 0s (0 секунд).

В наведеному вище прикладі ми вказали, коли стиль зміниться, використовуючи ключові слова "від" і "до" (що відповідає 0% (початок) і 100% (завершення)).

Також можна використовувати проценти. Використовуючи проценти, ви можете додавати стільки стилів, скільки хочете.

В наступному прикладі буде змінено колір фону елемента <div>, коли анімація завершена на 25%, завершена на 50% и снова, коли анімація завершена на 100%:

Приклад

/* Код анімації */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* Елемент, до якого застосовується анімація */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Спробуйте самі »

Наступний приклад змінить колір фону і положення елемента <div>, коли анімація завершена на 25%, завершена на 50%, і знову, коли анімація завершена на 100%:

Приклад

/* Код анімації */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Елемент, до якого застосовується анімація */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Спробуйте самі »

Затримка анімації

Властивість animation-delay вказує затримку початку анімації.

В наступному прикладі перед запуском анімація затримується на 2 секунди:

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
 animation-duration: 4s;
  animation-delay: 2s;
}
Спробуйте самі »

Негативні значення також допускаються. При використанні негативних значень анімація почнеться так, як би вона вже відтворювалась протягом N секунд.

В наступному прикладі анімація запуститься так, як би вона вже відтворювалась протягом 2 секунд:

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}
Спробуйте самі »

Встановіть, скільки разів анімація має запускатися

Властивість animation-iteration-count вказує, скільки разів анімація має запускатися.

В наступному прикладі анімація буде запущена 3 рази до її зупинки:

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
Спробуйте самі »

В наступному прикладі використовується значення "infinite" (безкінечно), щоб анімація тривала постійно:

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
Спробуйте самі »

Запустіть анімацію в зворотньому напрямку або альтернативних циклах

Властивість animation-direction вказує, чи слід відтворювати анімацію вперед, назад або в циклах, що змінюються.

Властивість animation-direction може мати наступні значення:

  • normal - Анімація відтворюється як завжди (вперед). Це за замовчуванням
  • reverse - Анімація відтворюється в зворотньому напрямку (назад)
  • alternate - Спочатку анімація відтворюється вперед, потім назад
  • alternate-reverse - Спочатку анімація відтворюється в зворотньому напрямку, потім вперед

В наступному прикладі анімація буде запущена в зворотньому напрямку (назад):

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
 animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}
Спробуйте самі »

В наступному прикладі використовується значення "alternate", щоб спочатку запустити анімацію вперед, а потім назад:

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
Спробуйте самі »

В наступному прикладі використовується значення "alternate-reverse", щоб спочатку запустити анімацію назад, а потім вперед:

Приклад

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}
Спробуйте самі »

Вкажіть криву швидкості анімації

Властивість animation-timing-function задає криву швидкості анімації.

Властивість animation-timer-function може мати наступні значення:

  • ease - Визначає анімацію з повільним початком, потім швидким, а потім повільним завершенням (за замовчуванням)
  • linear - Визначає анімацію з однаковою швидкістю від початку до кінця
  • ease-in - Визначає анімацію з повільним початком
  • ease-out - Визначає анімацію з повільним закінченням
  • ease-in-out - Визначає анімацію з повільним початком та закінченням
  • cubic-bezier(n,n,n,n) - Дозволяє визначити свої власні значення в функції кубічного Без’є

В наступному прикладі показані деякі з різних кривих швидкості, які можна використовувати:

Приклад

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Спробуйте самі »

Вкажіть режим заповнення для анімації

CSS-анімація не впливає на елемент перед відтворенням першого ключового кадру або після відтворення останнього ключового кадру. Властивість animation-fill-mode може перевизначити цю поведінку.

Властивість animation-fill-mode визначає стиль для цільового елемента, коли анімація не відтворюється (до її запуску, після її завершення або в обох випадках).

Властивість animation-fill-mode може мати наступні значення:

  • none - Значення за замовчуванням. Анімація не буде застосовувати які-небудь стилі до елементу до або після його виконання
  • forwards - Елемент збереже значення стилю, встановлені останнім ключовим кадром - залежить від animation-direction (направлення анімації) та animation-iteration-count (ітеративного підрахунку анімації)
  • backwards - Елемент отримає значення стилю, задані першим ключовим кадром - залежить від animation-direction (направлення анімації), та збереже його протягом періоду animation-delay (затримки анімації)
  • both - Анімація буде слідувати правилам як вперед, так і назад, розширюючи властивості анімації в обох напрямках.

В наступному прикладі елемент <div> зберігає значення стилю з останнього ключового кадра після закінчення анімації:

Приклад

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
Спробуйте самі »

В наступному прикладі елемент <div> отримує значення стилю, встановлені першим ключовим кадром, до початку анімації (протягом періоду затримки анімації):

Приклад

div {
  width: 100px;
  height: 100px;
 background: red;
  position: relative;
 animation-name: example;
 animation-duration: 3s;
 animation-delay: 2s;
  animation-fill-mode: backwards;
}
Спробуйте самі »

В наступному прикладі елемент <div> отримує значення стилю, встановлені першим ключовим кадром до початку анімації, і зберігає значення стилю з останнього ключового кадру після завершення анімації:

Приклад

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
 animation-name: example;
 animation-duration: 3s;
 animation-delay: 2s;
  animation-fill-mode: both;
}
Спробуйте самі »

Скорочені властивості анімації

В наведеному нижче прикладі використовуються шість властивостей анімації:

Приклад

div {
 animation-name: example;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}
Спробуйте самі »

Той же ефект анімації, що і вище, може бути досягнутий за допомогою скороченої властивості animation:

Приклад

div {
  animation: example 5s linear 2s infinite alternate;
}
Спробуйте самі »

Перевірте себе за допомогою вправ!


CSS Властивості анімації

В наступній таблиці перераховані правила @keyframes та всі властивості CSS-анімації:

Властивість Опис
@keyframes Визначає код анімації
animation Скорочена властивість для встановлення всіх властивостей анімації
animation-delay Визначає затримку початку анімації
animation-direction Визначає, чи повинна анімація відтворюватись вперед, назад або почергово
animation-duration Визначає, скільки часу анімація повинна зайняти для завершення одного циклу
animation-fill-mode Визначає стиль для елемента, коли анімація не відтворюється (до її початку, після її завершення або і того, й іншого)
animation-iteration-count Визначає, скільки разів анімація має відтворюватись
animation-name Визначає ім’я анімації @keyframes
animation-play-state Визначає, чи запущена анімація або призупинена
animation-timing-function Визначає криву швидкості анімації