Застосування переходів CSS

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

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

Перехід CSS каже браузеру малювати проміжні стани між вихідним і фінальним станами, демонструючи користувачеві плавний перехід.

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

До яких властивостей CSS можна застосувати переходи?

Веброзробник може визначати, яка властивість буде анімована і як. Це дає змогу створювати складні переходи. Оскільки немає сенсу анімувати частину властивостей, список анімованих властивостей обмежений конкретним їх набором.

Примітка: Набір властивостей, котрі можна анімувати, змінюється по ходу розвитку специфікації.

Примітка: Значення auto нерідко є дуже складним випадком. Специфікація радить не анімувати від і до auto. Частина користувацьких агентів, як то засновані на Gecko, реалізовують цю вимогу, а інші, як то засновані на WebKit, є менш суворими. Використання анімацій з auto може приводити до неочікуваних результатів, залежних від браузера та його версії, його слід уникати.

Визначення переходів

Переходи CSS контролюються за допомогою властивості-скорочення transition. Це найкращий спосіб для налаштування переходів, адже він полегшує уникання несинхронізованих параметрів, на обтяжливе зневадження котрих можна витратити багато часу.

Контролювати окремі деталі переходу можна за допомогою наступних підвластивостей:

transition-property: Задає ім'я чи імена властивостей CSS, до яких застосовуються переходи. Лише перелічені тут властивості анімуються під час переходів; зміни решти властивостей відбуваються негайно, як зазвичай.
transition-duration: Задає тривалість, протягом якої відбуваються переходи. Можна задати одну тривалість, котра застосовується до всіх властивостей переходу, або декілька значень, аби дати змогу кожній властивості застосовуватися протягом інакшого проміжку часу.
transition-timing-function: Задає функцію, котра визначає, як обчислюються проміжні значення властивостей. Функції хронометражу визначають, як обраховуються проміжні значення переходу. Більшість функцій хронометражу можуть бути задані шляхом опису графіка відповідної функції, що задає чотири точки, по яких будується кубічна крива Безьє. Також можна обрати пом'якшення зі Шпаргалки функцій пом'якшення.
transition-delay: Визначає, скільки триватиме очікування між зміною властивості й фактичним початком переходу.

Скорочений синтаксис CSS transition записується отак:

div {
  transition: <property> <duration> <timing-function> <delay>;
}

Приклади

Простий приклад

Цей приклад виконує чотирисекундну зміну розміру шрифту з двосекундною затримкою між часом, коли користувач навів курсор на елемент, і початком ефекту анімації:

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

Приклад з кількома анімованими властивостями

<body>
  <p>
    Рамки нижче поєднують переходи для: width, height, background-color,
    transform. Наведіть на рамки, щоб побачити анімування цих властивостей.
  </p>
  <div class="box">Зразок</div>
</body>

Вміст CSS

.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  rotate: 180deg;
}

Коли списки значень властивостей мають різну довжину

Якщо список значень будь-якої властивості коротший за інші, то її значення повторюються, поки довжини не будуть однакові. Наприклад:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Обробляється так, ніби це було:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Подібно до цього, якщо список значень певної властивості довший за довжину списку в transition-property, він обрізається, тож якщо є такий CSS:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Він тлумачиться отак:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Застосування переходів для виділення меню

Поширене застосування CSS – для виділення елементів меню, на котрі користувач наводить мишею. Можна легко застосувати переходи, аби зробити ефект іще привабливішим.

По-перше, саме меню за допомогою HTML:

<nav>
  <a href="#">Головна</a>
  <a href="#">Про нас</a>
  <a href="#">Контакти</a>
  <a href="#">Посилання</a>
</nav>

Потім – CSS для реалізації вигляду й відчуття меню:

nav {
  display: flex;
  gap: 0.5rem;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover,
a:focus {
  background-color: #fff;
  color: #333;
}

Такий CSS створює вигляд меню, колір і тла, і тексту якого змінюється, коли елемент перебуває в станах :hover і :focus:

Приклади JavaScript

Примітка: Особлива обережність необхідна, коли перехід застосовується відразу після:

додавання елемента до DOM за допомогою .appendChild()

усунення властивості елемента display: none;.

Це обробляється так, ніби початкового стану ніколи не було, натомість елемент завжди був у своєму фінальному стані. Легкий спосіб обійти це обмеження – застосувати setTimeout() зі жменею мілісекунд перед зміною властивості CSS, за якою необхідний перехід.

Застосування переходів для пом'якшення функціональності JavaScript

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

<p>Клацніть будь-де, аби перемістити м'яч</p>
<div id="foo" class="ball"></div>

За допомогою JavaScript можна реалізувати ефект руху м'яча до певного положення:

const f = document.getElementById("foo");
document.addEventListener(
  "click",
  (ev) => {
    f.style.transform = `translateY(${ev.clientY - 25}px)`;
    f.style.transform += `translateX(${ev.clientX - 25}px)`;
  },
  false
);

За допомогою CSS такий рух можна без зайвих зусиль зробити плавним. Слід додати до елемента перехід, і будь-які зміни відбудуться плавно:

.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Відстеження початку й завершення переходу

Подію transitionend можна використати для відстеження того, що анімація завершила виконання. Це об'єкт TransitionEvent котрий має на дві властивості більше, ніж типовий об'єкт Event:

propertyName: Рядок, котрий вказує на ім'я властивості CSS, чий перехід завершився.
elapsedTime: Число з рухомою комою, котре вказує на число секунд, протягом якого відбувався перехід на мить спрацювання події. На це значення не впливає значення transition-delay.

Як зазвичай, для стеження за цією подією можна використати метод addEventListener():

el.addEventListener("transitionend", updateTransition, true);

Початок переходу відстежується за допомогою transitionrun (спрацьовує до усіх затримок) і transitionstart (спрацьовує після усіх затримок), в аналогічний спосіб:

el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);

Примітка: Подія transitionend не спрацьовує, якщо перехід переривається до свого завершення через те, що елемент став display: none, чи те, що анімована властивість змінила своє значення.

Специфікації

Дивіться також

Інтерфейс TransitionEvent і подія transitionend.
Застосування анімацій CSS

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.