CSS transition — скорочення для плавної зміни стилів

CSS властивість transition встановлює ефект переходу між двома станами елемента. Використовується з псевдокласом :hover або :active або якщо стан елементу був динамічно змінений за допомогою JavaScript.

Властивість transition - це універсальна властивість, яка дозволяє одночасно задати чотири значення, які розділені пропуском:

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

правити

Загальний опис

правити

Порада

Завжди вказуйте властивість transition-duration, якщо цього не зробити тривалість переходу буде 0s, тому перехід не матиме ніякого ефекту.

автор: NagarD правити

Нотатка

Зверніть увагу, що порядок запису значень для властивості має дуже велике значення.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

transition: property duration timing-function delay|initial|inherit;

Властивість transition може отримувати 6 значень:

transition-property

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

автор: NagarD

правити

transition-duration

Тривалість ефекту переходу.

автор: NagarD

правити

transition-timing-function

Визначає криву (функцію) ефекту переходу.

автор: NagarD

правити

transition-delay

Затримка ефекту переходу.

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

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

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	26	16	9	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	26	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<p>Клацни в поле — ширина плавно виросте зі 100 до 250 пікселів:</p>
<input type="text">

input[type=text] {
    width: 100px;
    transition: width .35s ease-in-out;
}

input[type=text]:focus {
    width: 250px;
}

<div>Наведи — розтягнуся до 300px</div>

div {
    width: 100px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition: width 2s;
}

div:hover {
    width: 300px;
}

<p>Клацни в поле — воно розшириться з невеликою затримкою:</p>
<input type="text">

input[type=text] {
    width: 100px;
    transition: width .35s ease-in-out .2s;
}

input[type=text]:focus {
    width: 250px;
}

<div>Наведи — виросту й зміню колір</div>

div {
    width: 100px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition: width 2s, background-color 1s;
}

div:hover {
    width: 300px;
    background-color: #d81b60;
}

<p>Зараз блок без ефектів при наведенні. Ви ожете їх уввімкнути, тицнувши на пунктик нижче, та подивитися на результат.</p>

<label>
  Уввімкнути ефект:
  <input type="checkbox" id="field">
  <span>transition: all .15s ease-in 0s;</span>
</label>

<div class="wrapper">
  <div id="block">
    <p>Блок</p>
  </div>
</div>

body {
  font-family: monospace;
  font-size: 18px;
  color: #222;
  line-height: 1.45;
}

label {
  padding: 16px 0;
  display: block;
  border-bottom: 2px dashed #666;
}

span {
  padding: 4px 6px;
  background-color: orange;
  border-radius: 4px;
}

.wrapper {
  background-color: #eee;
  padding: 16px;
  margin-top: 16px;
  border-radius: 4px;
}

#block {
  background-color: #666;
  padding: 16px;
  width: 100px;
  text-align: center;
  color: #ddd;
  border-radius: 4px;
  transition: all 0s ease-in 0s;
}

#block:hover {
  background-color: #111;
  color: red;
}

document.getElementById('field').onchange = function () {
  document.getElementById('block').style.transitionDuration = '0.5s';
};
//# sourceURL=pen.js

<div class="block">
	<code>transition: width .2s ease-out .15s</code>
</div>

body {
  padding: 36px;
}

.block {
  width: 350px;
  background-color: gold;
  color: #444;
  font-size: 15px;
  padding: 16px 8px;
  transition: width .2s ease-out .15s
}

.block:hover {
  width: 425px;
}