TerraNet.md | Blog

CSS Transitions Module Level 3 by admin

Transitions
Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
For example, suppose that transitions of one second have been defined on the ‘left’ and ‘background-color’ properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.

Figure 1. Transitions of ‘left’ and ‘background-color’
Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
Only animatable CSS properties can be transitioned. See the table at the end of this document for a list of properties that are animatable.
The transition for a property is defined using a number of new properties. For example:
Example 1.
div {
transition-property: opacity;
transition-duration: 2s;
}
The above example defines a transition on the ‘opacity’ property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example:
Example 2.
div {
transition-property: opacity, left;
transition-duration: 2s, 4s;
}
This will cause the ‘opacity’ property to transition over a period of two seconds and the left property to transition over a period of four seconds.
In the case where the list of values in transition properties do not have the same length, the list is repeated as a whole in order to provide necessary values.
Issue: Are the lists repeated to all be the length of the longest list, or are they repeated or truncated to match the length of the ‘transition-property’ list?
Example 3.
div {
transition-property: opacity, left, top, width;
transition-duration: 2s, 1s;
}
The above example defines a transition on the ‘opacity’ property of 2 seconds duration, a transition on the ‘left’ property of 1 second duration, a transition on the ‘top’ property of 2 seconds duration and a transition on the ‘width’ property of 1 second duration.
Animatable properties css3.