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