First Code

Курсы программирования

Свойство CSS Transition

transition-duration

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

Значение по умолчанию 0s, это означает, что никакой анимации нет, переход происходит мгновенно
div {
 transform: translateX(0);
 background: #3c8cf8;
transition-duration: 0s;
}
div:hover {
 transform: translateX(100px);
 background: #f35928;
}

transition-property

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

Значение по умолчанию. Отслеживает значения всех свойств
div {
 transform: translateX(0);
 background: #3c8cf8;
 transition-duration: 2s;
transition-property: all;
}
div:hover {
 transform: translateX(100px);
 background: #f35928;
}

transition-timing-function

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

Значение по умолчанию. Переход начинается медленно, разгоняется быстро и замедляется в конце
div {
 transform: translateX(0);
 background: #3c8cf8;
 transition-duration: 2s;
transition-timing-function: ease;
}
div:hover {
 transform: translateX(100px);
 background: #f35928;
}

transition-delay

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

Значение по умолчанию 0s запускает анимацию без задержки
div {
 transform: translateX(0);
 background: #3c8cf8;
 transition-duration: 2s;
transition-delay: 0s;
}
div:hover {
 transform: translateX(100px);
 background: #f35928;
}