In a nutshell, transitions provide a way to control animation speed when changing CSS properties. You may have noticed that some elements seem to almost have a mind of their own! By using transitions we can choose between initial and target states.
But most of all, transitions all properties to change values SMOOTHLY over time.
Type of CSS Transitions
There are four transition related properties in total:
- transition-property
The transition property determines what properties will be altered. By default, all of the properties within an element’s different states will be altered upon change.
Not all properties can be transition. No need to memorize any list because you can intuitively tell which properties. Things like background-color are obvious non-transition able properties.
- transition-duration
The duration of a transition takes place is set using this property and timing values include seconds and milliseconds. These values can also contain fractions.
- transition-timing-function
This simply sets the speed in which transition move.
Timing functions for transitions are calculated based on a “cubic-bezier curve” defined by four numbers and control easing.
/* cubic-bezier function and keywords */
/* cubic-bezier(<x1>, <y1>, <x2>, <y2>) */
cubic-bezier(0.42, 0.0, 1.0, 1.0);
ease;
ease-in;
ease-out;
ease-in-out;
- transition-delay
This simply controls the delay or how long a transition should be stalled before executing. These are calculated in seconds and milliseconds.
CSS Transition Shorthand
As you could imagine, setting each transition property by hand could become quite time-intensive. This is where regular transition shorthand property comes in.
Transition shorthand property is specified as one or more properties separated by commas.
/* Apply to 1 property that is margin-right */
transition: margin-right 4s;
/* Apply to 1 property with four second duration and one second delay delay */
transition: margin-right 4s 1s;
/* Apply to 1 property with four second duration and ease-in-out timing function */
transition: margin-right 4s ease-in-out;
/* Apply to 2 properties. 4 second duration for margin-right. 1 second for color */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties with half second duration and ease-out timing function */
transition: all 0.5s ease-out;