Свойства CSS Transition. Плавные переходы

transition-duration — контроль над временем перехода

Свойство transition-duration - является, пожалуй, самым фундаментальным в наборе. Оно определяет, сколько времени займет полный цикл перехода от начального состояния элемента к конечному. Без указания длительности переход произойдет мгновенно, как это и происходит по умолчанию в CSS, сводя на нет весь смысл использования transition.

Значение задается в секундах (s) или миллисекундах (ms). Именно от этого параметра зависит восприятие анимации пользователем. Слишком короткая длительность (менее 100ms) может остаться незамеченной и создать ощущение резкости, тогда как слишком длинная (более 1-2 секунд) будет раздражать и заставит пользователя ждать. Оптимальные значения обычно лежат в диапазоне от 200ms до 500ms. Это свойство сообщает браузеру: "Превращение этого элемента из состояния А в состояние Б должно занять, например, ровно 0.3 секунды". Пример: transition-duration: 0.3s; или transition-duration: 300ms; (эквивалентные значения).

div {
    background: red;
    transition-duration: 0s;
}
div:hover {
    transform: translateX(100px);
    background: blue;
}

transition-property — выбор цели для плавного перехода

Свойство transition-property - выполняет роль "селектора целей". Оно указывает браузеру, какие именно CSS-свойства должны анимироваться плавно, а какие — изменяться мгновенно, как обычно. Не все свойства можно анимировать, но список анимируемых очень широк и включает color, background-color, opacity, width, height, transform и многие другие.

Вы можете указать одно конкретное свойство, несколько через запятую или ключевые слова all / none. Использование all очень удобно, но может быть неэффективно с точки зрения производительности, так как браузер будет отслеживать и плавно применять изменения ко всем свойствам элемента, даже к тем, которые вы, возможно, не планировали анимировать. Более производительным подходом является явное перечисление только необходимых свойств. Это прямое указание браузеру: "Следи за изменениями background-color и transform, а всё остальное можешь менять мгновенно".

div {
    background: red;
    transition-duration: 2s;
    transition-property: all;
}
div:hover {
    transform: translateX(100px);
    background: blue;
}

transition-timing-function — скорость изменения плавного перехода

Если transition-duration отвечает на вопрос "как долго?", то transition-timing-function — "как?". Например, сначала медленно, потом быстро, потом медленно и т.д. Это свойство определяет функцию распределения скорости анимации во времени, придавая переходу характер и эмоцию. Оно делает анимацию не просто монотонным движением, а динамичным и естественным процессом. Это самое сложное для понимания, но и самое выразительное свойство. Оно использует математические функции Безье для управления скоростью.

div {
    background: red;
    transition-duration: 2s;
    transition-timing-function: ease;
}
div:hover {
    transform: translateX(100px);
    background: blue;
}

transition-delay — время задержки перед запуском плавного перехода

Простое, но мощное свойство transition-delay устанавливает задержку между моментом, когда происходит изменение свойства (например, срабатывает псевдокласс :hover), и моментом, когда переход фактически начинается.

Значение, как и для duration, задается в s или ms. Это может использоваться для создания каскадных, последовательных анимаций, когда несколько элементов приходят в движение не одновременно, а с небольшой задержкой друг за другом, создавая сложный и визуально привлекательный эффект. Отрицательное значение задержки заставит переход начаться сразу, но как бы "с середины", на указанное количество секунд. Пример: transition-delay: 0.1s; (переход начнется через 100 миллисекунд после наведения курсора).

div {
    background: red;
    transition-duration: 2s;
    transition-delay: 0s;
}
div:hover {
    transform: translateX(100px);
    background: blue;
}

transition — универсальное свойство

Это свойство-шорткат, которое позволяет объединить четыре предыдущих свойства в одной декларации. Это значительно сокращает объем кода и повышает его читаемость.

Порядок значений в шорткате по большей части не имеет значения, но есть очень важные замечания. Дело в том, что мы можем указать время плавного перехода и время задержки, поэтому браузер должен четко определить, что есть что. Правило следующее, значение, которое указано первым, определяет время плавного перехода (duration), а значение, которое указано вторым, определяет время задержки (delay). Но указаны они могут быть в любом месте, перед, между или после property и timing-function. Вы можете указать не все значения, но обязательно должно быть указано время плавного перехода (duration). Если какое либо значение не указано, то будет использовано значение по умолчанию.

div {
    transition: all 1s linear 0s;
}

Дополнительные аспекты и лучшие практики

Помимо основных свойств, стоит знать о наследуемых аспектах поведения переходов:

Не всем свойствам можно применить плавный переход. Такие свойства, как display или font-family, не могут быть анимированы. Для скрытия/показа с анимацией используйте связку opacity (для прозрачности) и visibility (для доступности).

Производительность. Для самых плавных анимаций, особенно тех, что затрагивают геометрию элемента (передвижение, масштабирование), используйте свойства transform и opacity. Анимация этих свойств задействует аппаратное ускорение браузера (GPU), что делает ее невероятно быстрой и не блокирует основной поток. Анимация свойств вроде width, height или margin является более затратной для браузера.

Грамотное использование CSS Transition — это признак качественного и продуманного пользовательского интерфейса. Оно направляет внимание пользователя, дает обратную связь на его действия и делает взаимодействие с сайтом по-настоящему приятным. Освоив каждое из рассмотренных свойств, вы получите в свое распоряжение не просто инструмент для "оживления" страницы, а мощное средство для улучшения UX в целом. Комбинируйте длительность, свойства, функции темпа и задержки, чтобы создавать по-настоящему уникальные и запоминающиеся интерфейсы.