CSS transformations allow you to change the appearance of a rendered element. These changes have no effect on the rest of the page.
Transformations effectively treat the element as a flat image, and perform transformations on that. This means for example scaling will scale up text and may warp it with inconsistent ratios. This is why it can be so useful for animations, the browser doesn't need to do any of the normal layout related calculations for transforms.
| Property | Default | Description |
|---|---|---|
transform: translate(30px, 20px) rotate(20deg) |
none |
List of transforms to apply to the element, in order. Percentages refer to the size of the bounding box. This is the tightest fitting box that can enclose an element and its descendants, not including the margins. Having percentage refer to a portion of the element's own size is something unique to transform, and can be a powerful feature.
|
transform-origin: <x-offset> <y-offset> <z-offset> |
center |
The origin point for transforms such as rotate and skew. |
CSS transitions allow you to have the change to a property value animate over time instead of apply immediately, e.g. animating the change of width of an element. Relevant properties:
| Property | Default | Description |
|---|---|---|
transition-property: width |
all |
The property that wil be transitioned. |
transition-duration: 1s |
0 (nothing happens) |
The time of the transition. |
transition-timing-function: linear |
ease |
The function used to transition. This can be a curve or steps. See here for more details including useful examples of the different cubic and step functions. |
transition-delay: 0.5s |
0 |
The delay before the transition starts. A negative value will treat the transition as already have run for the given amount of time. |
transition: <transition-property> <transition-duration>
|
As above | Shorthand property. Values can be left out. |
Note when the target state for a transition changes, animation will begin again with the current state as the start state and the new target as the end state. This means if something is halfway through animating for example and its state is set back to the original state, it will animate back half as quickly as it only has to cover half the distance but will use the full transition duration.
Keyframes are another way to define animations. They are more powerful using plain CSS than transitions.
Keyframes can do the following things that transition cannot do:
Users can specify if they prefer reduced motion in their operating system. We can detect this with a media query and enable animations only if the user has not opted out.
It is arguably better to have animations disabled by default, and only enable them if we detect the user hasn't
opted out. This ensures we err on the side of caution and have animations disabled if the browser/OS doesn't support
the prefers-reduced-motion media query.
Some examples for how to animate height.
Note that you must set max-height to a value greater than the content size for this to work.