CSS transition-property — які властивості анімувати плавно

Властивість transition-property встановлює ім'я стильової властивості, значення якого буде відслідковуватися для створення ефекту переходу. Найчастіше відслідковується положення курсора.

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

Можна задавати декілька значень одночасно, розділивши їх комами. Для відслідковування всіх можливих властивостей задайте ключове слово all. Наприклад transition-property: width, color, font-size; означає, що ефект буде застосований лише для цих властивостей.

Якщо задати для transition-property в якості значення універсальну властивість, буде анімовано також всі її під-властивості.

правити

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

правити

Порада

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

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

Нотатка

Зверніть увагу, що набір властивостей, які можливо анімувати змінюється. Тому Ви мусите уникати включення до списку значень transition-property властивостей, які не можна анімувати, щоб у майбутньому це не викликало несподівані результати.

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

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

Синтаксис

transition-property: none|all|property|initial|inherit;

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

none

Властивість не задана. Без задання.

автор: Svitlana

правити

all

Всі властивості відслідковуються.

автор: Svitlana

правити

property

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

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

body {
  padding: 36px;
}

.block {
  width: 400px;
  background-color: gold;
  color: #444;
  font-size: 15px;
  padding: 16px 8px;
  transition: width .62s ease-out .15s;
  margin-bottom: 36px;
}

.block2 {
  transition-property: width, color;
}

.block:hover {
  width: 425px;
  color: red;
}

<div>Наведи: ширина плавно, колір одразу</div>

div {
    width: 170px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition-property: width;
    transition-duration: 1s;
}

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

<p>Вибери потрібні значення для <code>transition-property</code>, а потім спробуй навести курсор на блок:</p>

<select id="form">
  <option value="all" name="value2" selected>all</option>
  <option value="width" name="value2">width</option>
  <option value="color" name="value2">color</option>
  <option value="background" name="value2">background</option>
</select>

<p id="text"></p>

<hr>

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

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  width: 250px;
  padding: 16px;
  font-size: 18px;
  color: #222;
  transition: all .75s ease-in 0s;
}

#block:hover {
  width: 350px;
  color: red;
  background: #000;
}

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'all': 'Анімуються всі задані властивості',
  'width': 'Анімується тільки ширина',
  'color': 'Анімується тільки колір тексту',
  'background': 'Анімується тільки фоновий колір' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.transitionProperty = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js