Анимирует изменения CSS свойств элемента
div {
transition:
transition-property
transition-duration
transition-timing-function
transition-delay;
}
div {
transition: background-color 1.5s ease-in-out 500ms;
transition: all 1.5s ease-in-out 500ms;
}
Время задержки перед началом анимации перехода
div {
transition-delay: 2s;
transition-delay: 1000ms;
}
Продолжительность анимации перехода
div {
transition-duration: 2s;
transition-duration: 2000ms;
}
Определяет конкретные css-свойства
div {
transition-property: width, left;
transition-property: all;
transition-property: transform;
}
Скорость анимации перехода
ease
easi-in
easi-out
easi-in-out
linear
steps
div {
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(.20, .96, .74, .07);
transition-timing-function: steps(6, end);
}