По умолчанию ЦСС‑свойства изменяются мгновенно. Кнопка сразу меняет цвет при наведении:

button {
  background: green;
}
  ​
button:hover {
  background: red;
}
Ховер ми!

Свойство transition задаёт скорость изменения свойств. Цвет кнопки плавно изменится за секунду:

button {
  background: blue;
  transition: 1s;
}
  ​
button:hover {
  background: red;
}

Некоторые свойства нельзя изменять плавно, например, visibility, display и position. Ещё нельзя плавно изменять фон‑градиент (но есть трюк!).

Можно задать скорость отдельных свойств. Например, полсекунды для всех свойств, две для фона и четверть секунды для трансформа:

button {
  background: blue;
  transition:
    .5s, 
    background 2s, 
    transform .25s;
}
  ​
button:hover {
  background: red;
  transform: scale(1.25);
}

Кроме скорости, можно указать задержку и функцию сглаживания.

Функция сглаживания определяет, как прогресс анимации будет распределён по времени — как резко начнётся, когда ускорится и как плавно закончится анимация. В качестве функции можно использовать предустановленные значения linear, ease-in, ease-out, ease-in-out или задать свою функцию — кривую Безье.

button {
  background: blue;
  transition: background 1s linear .25s, 
    transform .25s cubic-bezier(.05,.25,.25,2);
}
  ​
button:hover {
  background: red;
  transform: scale(1.25);
}

Продвинутое использование

Ховер — самый частый сценарий использования транзишена. Кроме ховера, транзишен иногда комбинируют с псевдоклассом взаимодействия :focus:

input {
  transition: .75s;
  border-bottom: 1px solid transparent;
}
  ​
input:focus {
  border-bottom-color: red;
}

Но самое интересное начинается, когда в дело вступает Яваскрипт. Он сразу даёт гораздо больший простор для использования транзишенов.

Яваскриптом можно переключать классы — наборы стилей:

.shapeToMorph {
  /* … */
  transition: .75s ease-in-out;
}
  ​
.shapeToMorph.is__morphed {
  border-radius: 50%;
  transform: rotate(45deg);
}
document
  .querySelector('.shapeToMorph')
  .addEventListener('click', function() {
    this.classList.toggle('is__morphed')
  })
Тык в меня!

А ещё — на ходу менять стили прямо в атрибуте style элемента. Например, сдвигать и увеличивать элемент по скроллу:

.star {
  transition: .1s linear;
}
const $star = document.querySelector('.star')
​
document.addEventListener('scroll', () => {
  /* Вычисляем свойства, в зависимости от задачи */
  const shiftX = /* … */
  const scale = /* … */
  ​
  /* Подставляем получившиеся числа в стили элемента */
  $star.style.left = `${shiftX}px`
  $star.style.transform = `scale(${scale})`
})

Транзишены в интерфейсе

Хороший интерфейс даёт мгновенную обратную связь. Если интерактивные элементы реагируют медленно, интерфейс ощущается неотзывчивым. Поэтому не переусердствуйте с транзишенами для кнопок, ссылок, полей ввода.

Чтобы добавить кайфушность плавного изменения и при этом сохранить мгновенную обратную связь, можно сбросить транзишены элементов в состоянии ховера. Тогда они будут мгновенно изменять свойства при наведении и плавно возвращаться обратно, когда мышку убирают:

nav a {
  transition: .75s;
}
nav a:hover {
  color: red;
  /* Если написать 0 без s, правило не сработает */
  transition: 0s;
}

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы