Плавное изменение свойств в CSS - transition
Свойство transition позволяет задать плавный переход элементам от одного состояния к другому при смене CSS свойств. Для задания параметров перехода можно использовать отдельные свойства transition для каждого значения или краткую запись transition. Пример двух вариантов с аналогичными значениями: https://codepen.io/Yury_P/pen/jOMLrxN
Свойства transition:
transition-property - название свойства. Для выбора всех свойств нужно указать ключевое слово all.
transition-duration - длительность перехода. Указывается в секундах (s) или милисекундах (ms).
transition-timing-function - функция перехода. Указывает как будет происходить переход. По умолчанию переход имеет значение ease, то есть переход стартует медленно в середине ускоряется и в конце замедляется. Значение указывается ключевым словом:
linear - равномерно
ease - медленно - быстро - медленно
ease-in - медленно - быстро
ease-out - быстро - медленно
ease-in-out - аналогично ease, но более равномерно
https://codepen.io/Yury_P/pen/abmyZLp
Если нужна более тонкая настройка функции перехода, можно указать функцию cubic-bezier:
cubic-bezier(x1, y1, x2, y2) - данная функция позволяет задавать свои значения для функции перехода. В функции нужно задать значение x и y для двух промежуточных точек. Точки (x0, y0) и (x3, y3) определены заранее, изменить их нельзя, их значение равны: x0, y0 = 0;0, x3, y3 = 1;1. Настроить свою функцию cubic-bezier и визуально посмотреть как она работает можно по ссылке: https://cubic-bezier.com/
https://codepen.io/Yury_P/pen/OJRjXOa
Также переход можно разбить на шаги используя функцию steps:
steps(n) - разбивает переход на количество шагов n (n - целое положительное число). Опционально вторым аргументом можно указать ключевое слово, однако не все браузеры имеют хорошую поддержку ключевых слов функции steps:
start - анимация в начале каждого шага
end - анимация в конце каждого шага (значение по умолчанию)
jump-start - аналогично start
jump-end - аналогично end
jump-both - включает паузу в начале (0%) и в конце (100%) перехода (добавляет один шаг)
jump-none - включает паузу в начале (0%) и в конце (100%) перехода на время 1 / n (удаляет один шаг)
Для некоторых значений функции steps есть отдельные ключевые слова:
step-start - аналогично steps(1, jump-start)
step-end - аналогично steps(1, jump-end)
https://codepen.io/Yury_P/pen/dypzXdJ
transition-delay - задержка перед началом перехода. Указывается в секундах (s) или милисекундах (ms)
Сокращенная запись transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Для перехода обязательно нужно указать transition-duration, остальные значения можно не указывать.
Чтобы применить разные переходы для разных свойств, значения для каждого перехода нужно указывать через запятую.
https://codepen.io/Yury_P/pen/jOMLrQE
Следует помнить, что только к части свойств можно применить свойство transition. Полный список таких свойств можно посмотреть на сайте: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Также transition не работает если изменять значение свойства на ключевое слово auto или если у свойства уже указано значение auto.