Каковы основные различия между преобразованиями CSS и переходами?
Оба из них используются для изменения текущей формы/состояния объекта. (вы можете делать симпатичные анимации с помощью JS и т.д.)
Но мне все еще не ясно, какой из них использовать где и для чего.
Это совершенно разные вещи.
Переходы CSS позволяют изменения свойств в значениях CSS выполняться плавно в течение заданной продолжительности.
Преобразования CSS позволяют преобразовывать элементы, созданные с помощью CSS, в двумерном или трехмерном пространстве.
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>