Сокращенные свойства CSS: transition

Development | Amber | Комментировать запись

Переходы в 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;
}