transition

Анимирует изменения 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;
}

transition-delay

Время задержки перед началом анимации перехода

div {
    transition-delay: 2s;
    transition-delay: 1000ms;
}

transition-duration

Продолжительность анимации перехода

div {
    transition-duration: 2s;
    transition-duration: 2000ms;
}

transition-property

Определяет конкретные css-свойства

div {
    transition-property: width, left;
    transition-property: all;
    transition-property: transform;
}

transition-timing-function

Скорость анимации перехода

• 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);
}