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

transition-duration

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения

0s Значение по умолчанию 0s, это означает, что никакой анимации нет, переход происходит мгновенно 500ms Переход будет осуществлен в течении 0.5 секунды 2s Переход будет осуществлен в течении 2 секунд 3s Переход будет осуществлен в течении 5 секунд

Значение по умолчанию 0s, это означает, что никакой анимации нет, переход происходит мгновенно

div {
transform: translateX(0);
background: #3c8cf8;
transition-duration: 0s;
}
div:hover {
transform: translateX(100px);
background: #f35928;
}

transition-property

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода

all Значение по умолчанию. Отслеживает значения всех свойств transform Будет отслеживать значение только свойства transform для эффекта перехода background Будет отслеживать значение только свойства background для эффекта перехода

Значение по умолчанию. Отслеживает значения всех свойств

div {
transform: translateX(0);
background: #3c8cf8;
transition-duration: 2s;
transition-property: all;
}
div:hover {
transform: translateX(100px);
background: #f35928;
}

transition-timing-function

Устанавливает скорость изменения (ускорение) плавного перехода transition. Например, сначала медленно, потом быстро, потом медленно и т.д.

ease Переход начинается медленно, разгоняется быстро и замедляется в конце ease-in Переход начинается медленно, а затем плавно ускоряется в конце ease-out Переход начинается быстро и плавно замедляется в конце ease-in-out Переход медленно начинается и медленно заканчивается linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости steps(3) Позволяет разбить анимацию на чёткое количество шагов cubic-bezier (0.1, 0.4, 0.8, 0.1) Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию

Значение по умолчанию. Переход начинается медленно, разгоняется быстро и замедляется в конце

div {
transform: translateX(0);
background: #3c8cf8;
transition-duration: 2s;
transition-timing-function: ease;
}
div:hover {
transform: translateX(100px);
background: #f35928;
}

transition-delay

Устанавливает время задержки перед запуском эффекта перехода. Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

0s Значение по умолчанию 0s запускает анимацию без задержки 500ms Анмация запустится через 0.5 секунды 2s Анмация запустится через 2 секунды

Значение по умолчанию 0s запускает анимацию без задержки

div {
transform: translateX(0);
background: #3c8cf8;
transition-duration: 2s;
transition-delay: 0s;
}
div:hover {
transform: translateX(100px);
background: #f35928;
}