Ознайомлення з CSS-переходами (transition)

В сьогоднішній статті ми проведемо ознайомлювальний рейд по корисним, як я сподіваюся, питанням CSS-переходів. Ця нова властивість в CSS3 дозволяє створювати на сайті привабливу і «магічну» інтерактивність, навіть без використання JavaScript. Розглянемо також деякі практичні приклади застосування цієї властивості в CSS.

 

 

Розвиток мови CSS в останні роки зробив можливою реалізацію деяких дійсно дивовижних нововведень. Якщо ще 5 років тому для створення якоїсь інтерактивності на сайті була потрібна така програма, як, наприклад, Adobe Flash, і використання мови програмування JavaScript, то сьогодні практично все це можна реалізувати за допомогою тільки HTML і CSS.

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

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

 

Що таке CSS-переходи (transition)?

Переходи в CSS дозволяють змінювати значення властивостей елемента за заданий період часу. Іншими словами, здійснюється перехід від одного стану до іншого. Наприклад, блок div має білий фоновий колір – це його початковий стан. А ми хочемо, щоб при наведенні курсору на цей блок, фоновий колір змінювався на чорний – це і буде його новим станом. Для подібного трюку можна було б використовувати і просту властивість :hover, але якісна відмінність transition полягає саме в можливості вказувати час для переходу, — що дозволяє додати «плавності» такому переходові.

transition присвоюється певному блоку в його «спокійному» (звичайному) стані. Щоб створити перехід, необхідно вибрати CSS-властивість, до якої буде застосовуватися перехід (наприклад, колір фону — background-color), а потім вказати тривалість такого ефекту (в секундах). Врахуйте, що якщо тривалість ефекту не встановлена, перехід просто не відбудеться. Також, замість вказування певної властивості CSS, можна вказати всі властивості (використовуйте ключове слово all).

 

Є чотири властивості transition:

  • transition-property – вказує на ім’я властивості CSS, для якої призначено ефект переходу (наприклад, background-color, color, font-size та інші), або ж можна вказати всі властивості CSS (використовується ключове слово all).
  • transition-duration – визначає тривалість переходу, в секундах (s) або мілісекундах (ms)
  • transition-timing-function – визначає криву швидкості ефекту для переходу. Тобто, відповідає за тип зміни швидкості переходу. У цій властивості немає варіантів «швидко» або «повільно». Замість цього використовуються варіанти кривої, по якій йде зміна від однієї швидкості до іншої. Наприклад, дуже популярна властивість ease, яка має на увазі: спочатку повільно, потім швидко, і тоді повільно
  • transition-delay – визначає затримку перед виконанням переходу, в секундах (s). Можна не вказувати.

 

Весь синтаксис виглядає так:

div {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

 

Приклад коду CSS, коли при наведенні на блок div, відбувається зміна (перехід) фонового кольору за 0,5 секунд:

div {
  transition: background-color 0.5s ease;
  background-color: white;
}

div:hover {
  background-color: black;
}

 

 

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

p {
  transition: all 1s ease;
  color: white;
  font-size: 14px;
  background-color: black;
  padding: 25px;
}

p:hover {
  color: black;
  font-size: 16px;
  background-color: white;
}

 

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

Дивитися Пен Ознайомлення з CSS-переходами (transition) by ZAnatoly (@ZAnatoly) на CodePen.

 

 

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

.div {
  -webkit-transition: color 0.5s ease-in 1s;
  -moz-transition: color 0.5s ease-in 1s;
  -o-transition: color 0.5s ease-in 1s;
  transition: color 0.5s ease-in 1s;
}

 

 

В продовження теми: Ознайомлення із CSS-анімацією (animation)

Recent Posts

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021

Google Search Console – Проблема з CLS та як її вирішити

Ми раніше писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

11/01/2021

Найкращі водоспади світу (частина 3/3)

Водоспад – є одним з найбільш хвилюючих і найкрасивіших творінь матінки-природи у нашому світі. По… Read More

08/01/2021

Що таке Основні веб-показники в Google Search Console?

В кінці травня минулого року, а точніше 28 травня 2020 року, Google почав більш активно… Read More

07/01/2021