По умолчанию ЦСС‑свойства изменяются мгновенно. Кнопка сразу меняет цвет при наведении:
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})`
})
Транзишены в интерфейсе
Хороший интерфейс даёт мгновенную обратную связь. Если интерактивные элементы реагируют медленно, интерфейс ощущается неотзывчивым. Поэтому не переусердствуйте с транзишенами для кнопок, ссылок, полей ввода.
Чтобы добавить кайфушность плавного изменения и при этом сохранить мгновенную обратную связь, можно сбросить транзишены элементов в состоянии ховера. Тогда они будут мгновенно изменять свойства при наведении и плавно возвращаться обратно, когда мышку убирают:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.