CSS преобразует VS-переходы

Каковы основные различия между преобразованиями CSS и переходами?

Оба из них используются для изменения текущей формы/состояния объекта. (вы можете делать симпатичные анимации с помощью JS и т.д.)

Но мне все еще не ясно, какой из них использовать где и для чего.

Ответы

Ответ 1

Это совершенно разные вещи.

Transitions:

Переходы CSS позволяют изменения свойств в значениях CSS выполняться плавно в течение заданной продолжительности.

Transforms:

Преобразования CSS позволяют преобразовывать элементы, созданные с помощью CSS, в двумерном или трехмерном пространстве.

Ответ 2

transition и transform являются отдельными свойствами CSS, но вы можете поставить transform в transition для "анимации" преобразования.

transition

Свойство CSS transition прослушивает изменения указанных свойств (цвет фона, ширина, высота и т.д.) со временем.

transition Синтаксис свойств:

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

Например, следующие стили изменят цвет фона div на апельсин в течение 1 секунды при наведении курсора.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified*/
}
div:hover {
  background-color: orange;
}
<div></div>