CSS Transformations, Transitions, and Animations
Transformations
Transformations change the shape, size, and position of elements.
Scale
: Enlarges the element.
Rotate
: Rotates the element.
Skew
: Skews the element.
Translate
: Moves the element.
Rotate3D
: Rotates the element in 3D space.
Transitions
Transitions allow you to change property values smoothly (over a given duration).
Basic Transition
: Changes width, height, and background color smoothly.
Ease Transition
: Changes width smoothly using the ease timing function.
Linear Transition
: Changes width smoothly using the linear timing function.
Animations
Animations can change property values over time, defined by keyframes.
Color Animation
: Defines an animation that changes the background color.
Move Animation
: Defines an animation that moves the element horizontally.
Combining Transformations, Transitions, and Animations
Try combining transformations, transitions, and animations for the box below:
: Combines multiple properties including transform, transition, and animation.