Transitions are specified using the transition CSS properties. Browsers that do not support transitions simply won’t animate.
Transitions CSS properties
- transition-property – defines CSS property that should animate, e.g., opacity.
- transition-duration – defines how long the transition should last.
- transition-timing-function – the timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
- transition-delay- specifies amount of time to wait for a change is initiated.
- shorthand – a shorthand for all four properties.
Example:
see my code below
.fade {
opacity: 1;
transition-property: opacity;
transition-duration: 2s;
}
.fade:hover {
opacity: 0;
}
transition-property
transition-property accepts one of two keywords, all (the initial value) or none, or a comma-separated list of properties.
Syntax:
- transition-property: none | all | [ <property-name> ] [, <property-name> ]*
Examples:
- transition-property: all;
- transition-property: none;
- transition-property: background-color;
- transition-property: background-color, height, width;
transition-duration
transition-duration property accepts a comma-separated list of times, specified in seconds or milliseconds, which determine how long the corresponding properties (specified using transition-property) take to complete their transition. The transition-duration property’s initial value is 0, meaning that the transition is instantaneous.
Syntax:
- transition-duration: <time> [, <time>]*
Examples:
- transition-duration: 2s;
- transition-duration: 4000ms;
- transition-duration: 4000ms, 8000ms;
transition-timing-function
transition-timing-function property is used to specify how the pace of the transition changes over its duration. This can be done in one of two ways. Either by specifying a number of pre-defined keywords (ease, linear, ease-in, ease-out or ease-in-out), or by defining a custom timing function (by specifying four coordinates to define a cubic bezier curve).
Syntax:
- transition-timing-function: <timing-function> [, <timing-function>]*
- <timing-function> = ease | linear | ease-in | ease-out | ease-in-out | steps()
- <timing-function> = cubic-bezier( <number>, <number>, <number>, <number>)
Examples:
- transition-timing-function: ease;
- transition-timing-function: ease, linear;
- transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);
transition-delay
transition-delay property accepts a comma-separated list of times, specified in seconds or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting. The default value is 0, ie. the transition will commence as soon as triggered.
Negative values are accepted for transition-delay. When supplied the transition will commence as soon as triggered, however it will appear to have begun execution at the specified offset, ie; the transition effect will begin part-way through its cycle.
Syntax:
- transition-delay: <time> [, <time>]*
Examples:
- transition-delay: 5s;
- transition-delay: 4000ms, 8000ms;
- transition-delay: -5s;
Transition Shorthand Syntax
The transition shorthand property can be used in place of the individual transition-* properties described above. The transition shorthand property can be used to define multiple transitions, using a comma separated list.
Syntax:
- transition: <transition> [, <transition>]*
- <transition> = <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
Examples:
- transition: background-color 3s linear 1s;
- transition: 4s ease-in-out;
- transition: 5s;