CSS transitions are a way to express an element moving or changing from one visual state to another. They allow the values of CSS properties to change over time. Essentially, a CSS transition is an animation that moves a property between two states. They provide simple animations. Thinking of a Transformer robot changing shape over time can be a simple way to remember that transformations define what an element becomes, and transitions smooth the change over time.
CSS transitions are an implicit animation, meaning they are triggered only when a new value is set for a CSS property.
How do they create smooth changes?
Traditionally, changing a CSS property value on a state change like a hover (:hover) was an immediate “on/off affair”. The element would instantly switch from its default properties and values to the new ones.
CSS transitions, as the name suggests, allow you to transition between one or more properties and values to others, making the change happen over time instead of instantly. Instead of jumping between states, the element smoothly transitions, blending from one value to another. When a property value is changed (e.g., by a hover state or JavaScript), you can rely on the browser to perform the “heavy lifting” to make the change gradual.
How Transitions are Declared and Triggered
To create a transition, you need four conditions: an initial value, an end value, the transition definition itself, and a trigger. A common example is applying a transition when an element is hovered over.
The transition properties are typically declared on the element’s default or originating state, not just in the state that triggers the change (like the :hover ruleset). This ensures the transition works in reverse when the trigger is no longer active.
Transitions can be triggered by state changes like :hover or :active, or when JavaScript changes a property value, such as by adding or removing a class that affects styles.
Limitations
A key limitation is that you cannot transition from display: none; because an element with this property isn’t “painted” on the screen and has no state to transition from. Transitions are also limited to defining changes between two states; for more complex animations with multiple key points over time, CSS animations are used. Another limitation mentioned is that you cannot transition between a number and a default or automatic value, such as an element’s height from 100px to auto.
Performance
Both CSS transitions and animations utilize GPU acceleration, which can improve performance by offloading calculations to the device’s graphics processing unit. Transitioning properties like transform and opacity is often performant. You can use the will-change attribute to instruct the browser on which properties to animate, potentially leading to improved optimization.
Browser Support
- Vendor prefixes like -webkit- (for WebKit browsers like Chrome and Safari), -moz- (for Firefox), and -o- (for Opera) were required.
- Transitions were implemented in WebKit browsers, Opera (from version 10.6), and were expected in pre-release test builds of Firefox (planned for version 4) at one point.
- Support is available in Chrome 2+, Firefox 3.7+, and Safari 3.1+; please note that Firefox support is based on a pre-release version.
- The transition property is generally well-supported across all major browsers, excepting IE 9. IE10 and all other modern browsers support the unprefixed syntax. However, vendor prefixes were still needed for older mobile devices at one point.
- When browsers lack support for transitions, the property changes will still occur, but they will happen instantly rather than gradually. This allows for graceful degradation.
In summary, CSS transitions provide a straightforward way to add smooth changes to property values, improving user experience by making visual updates more fluid and less jarring.
CSS3 Topics