What is the difference between transform and transition in CSS?

What is the difference between transform and transition in CSS?

• A. Transform applies a transformation; transition animates changes of properties over time.
• B. Transform animates changes of properties over time; transition applies a transformation.
• C. Transform changes font size; transition changes color.
• D. Transform resets styles; transition duplicates the element.

Answer: (A)

Transform moves or reshapes an element by applying geometric operations such as translating, rotating, scaling, or skewing. It changes how the element is drawn without changing the document flow. Transition, meanwhile, is about animation over time: it defines how changes to CSS properties should interpolate from their old values to new ones, using a duration and timing function. When you pair them, you typically apply a transform and set a transition on that property so that, when the property changes (for example on hover), the transformation is animated smoothly over the specified time. For instance, you can make an element scale up on hover with a transition on the transform property, which demonstrates that the transform is the action applied, while the transition is the mechanism that animates that change. The other statements mix up the roles: transform isn’t an animation by itself, and transition isn’t a transformation; they don’t specifically imply font size or color changes, resets, or duplication of elements.

Transform moves or reshapes an element by applying geometric operations such as translating, rotating, scaling, or skewing. It changes how the element is drawn without changing the document flow. Transition, meanwhile, is about animation over time: it defines how changes to CSS properties should interpolate from their old values to new ones, using a duration and timing function. When you pair them, you typically apply a transform and set a transition on that property so that, when the property changes (for example on hover), the transformation is animated smoothly over the specified time. For instance, you can make an element scale up on hover with a transition on the transform property, which demonstrates that the transform is the action applied, while the transition is the mechanism that animates that change. The other statements mix up the roles: transform isn’t an animation by itself, and transition isn’t a transformation; they don’t specifically imply font size or color changes, resets, or duplication of elements.