DEV Community

Chandra Prakash Pal
Chandra Prakash Pal

Posted on

Differences between CSS transitions, transforms, and animations

Here are some differences between CSS transitions, transforms, and animations:
Transitions
Transitions are state changes that move from one state to another, like a :hover state. They require a trigger to run, and they run forwards when triggered and in reverse when the trigger is removed. Transitions have properties for the name of the property, the duration, any delay, and timing functions.
Transforms
Transforms change the shape and position of content by modifying the coordinate space. They can rotate, move, skew, and scale elements.
Animations
Animations can have multiple stages and are better for more complex movements. They don't require a trigger to run, and they can be played forwards, backwards, or in alternate cycles. Animations have the same properties as transitions, but with the word "animation" instead of "transition".

Top comments (0)