Переходы в CSS позволяют анимировать веб-страницы путем замены одного значения свойства другим. Обычно для управления анимацией в CSS используется краткое свойство transition.
Читайте также: Создание анимации с помощью Animate.css
Анимация в CSS создается путем переключения между двумя значениями свойств (стилей). Краткое свойство transition позволяет вам быстро настроить анимацию:
transition: margin-top 1s ease-in-out 0.5s;
Аналогично можно использовать:
transition-property: margin-top; transition-duration: 1s; transition-timing-function: ease-in-out; transition-delay: 0.5s;
Кроме того, у данного свойства есть такие варианты:
- transition-duration – определяет продолжительность перехода
- transition-timing-function – задаёт временную функцию для описания перехода одного объекта к другому
- transition-delay – устанавливает задержку перехода, не наследуется
Используйте следующий код как свойство, если вам нужно воздействовать на все значения одновременно. Чтобы определить несколько переходов одновременно, можно разделить их запятыми:
.box {
transition: margin-top 1s linear,
margin-bottom 0.5s cubic-bezier(0,1.18,.87,.32),
margin-left 2s;
}