Плавные переходы transitions позволяют изменять значения свойств постепенно. С помощью transitions можно управлять только переходом между двумя состояниями: начальным и конечным, в оличие от анимаций. Задаются обычно у базового класса (например .btn), а не у изменяющего состояние (например .btn-active), чтобы переходы происходили плавно в обе стороны.
Свойство transition позволяет изменять состояния объекта плавно (с использованием анимации).
transition: transform 0.5s ease; /* сокращенная форма записи */
Свойство transition-duration указывает длительность перехода, задается в s (секундах) или ms (милисекундах).
transition-duration: 10s;
transition-duration: 0.1s;
transition-duration: 100ms;
По умолчанию плавный переход действует на все анимируемые свойства элемента.
Свойство transition-property указывает какие свойстваизменять плавно. Значения:
all — все свойства (по умолчанию);
width — плавно меняется только ширина;
width, height — плавно меняется ширина и высота;
transform — плавно происходит трасформация.
и т.д.
transition-property: width, height, transform;
transition-duration: 1s, 0.5s, 100ms;
Свойство transition-delay определяет задержку перед началом перехода и задается в секундах или миллисекундах.
transition-delay: 200ms;
Свойство transition-timing-function определяет с какой скоростью и ускорением будут меняться свойства во время перехода (“функция” или “форма”). Значения:
ease — переход начинается медленно, затем ускоряется и к концу движения опять замедляется (по умолчанию);
linear — переход равномерным, без ускорений и замедлений;
ease-in— переход медленно начинается, а к концу ускоряется;
ease-out — переход начинается быстро, а к концу замедляется;
ease-in-out — переход начинается и заканчивается медленно, но происходит это интенсивнее (похоже на ease).
Значение также можно задать с помощью функции cubic-bezier(кубических кривых Безье). А также с помощью steps — «ступенек», по которым будет идти переход. steps принимает в аргументах число_шагов и направление. При заданном направлеии start — первый шаг выполняется одновременно с началом перехода, а в случае c end — последний шаг будет выполнен вместе с завершением перехода.
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1); // аналог ease
transition-timing-function: steps(5, start);
Переход можно записать в сокращенном виде свойством transition. Параметры перехода просто перечисляются через пробел: свойство, длительность, форма и задержка.
transition: transform 1s ease 100ms;