Transitions
Learn how to define transitions between states of an element to improve user experience by providing visual feedback to user interaction.
Many elements on websites have states, which you user notices when interacting with them. Dropdowns, for instance, can be open or closed; buttons can be hovered over or focused; modals appear and then disappear.
By default, all states’ transitions are immediate. Though CSS provides tools to interpolate between the element’s starting state and its final state by using CSS transitions.
Introduction
CSS transition property can be used through 4 separate declaration — transition-property, transition-duration, transition-timing-function and transition-delay — or through transition shorthand property used to represent up all above transition-related longhand properties.
Let’s see the syntax:
/* longhand */
.transitioned {
transition-property: background-color;
transition-property: 500ms; /* you can also use seconds - 0.5s */
transition-timing-function: linear;
transition-delay: 250ms; /* you can also use seconds - 0.25s */
}
/* shorthand */
.transitioned {
transition: background-color 500ms linear 250ms;
}
Remember you can mix and match properties as you wish both in shorthand and longhand.
Transition property
The transition-property property indicates which style/s will be transition between two states.
Please note that you can specify more than one style, by listing CSS property names separated by commas or set it for all styles.
Let’s see the syntax:
.transitioned{
transition-property: background-color;
transition-property: color;
transition-property: width;
transition-property: border;
...
}
Transition duration
The transition-duration property describes how long it takes a transition to complete. Transition-duration is by default 0s. Property accepts both seconds (s) and milliseconds (ms).
Let’s see the syntax:
.transitioned {
transition-duration: 1500ms;
transition-duration: 0.5s;
}
Transition timing function
To alter the speed of a CSS transition over the course of the transition-duration, use the transition-timing-function property.
CSS’s default transition-timing-function is linear, causes elements to move between states at a constant speed. Though there are more option to make your transitions more lively and natural by easing into or out of them.
See the syntax:
.transitioned {
/* 1 */ transition-timing-function: linear;
/* 2 */ transition-timing-function: ease;
/* 3 */ transition-timing-function: ease-in;
/* 4 */ transition-timing-function: ease-out;
/* 5 */ transition-timing-function: ease-in-out;
/* 6 */ transition-timing-function: cubic-bezier(0, 0.4, 0.6, 1); /* (x1,y1,x2,y2) where x1 and x2 must be a number from 0 to 1 */
/* 7 */ transition-timing-function: steps(24); /* (n) where n must be a natural number larger or equal to 1 */
}
1
2
3
4
5
6
7
Transition delay
To determine when a transition will begin, you can use the transition-delay property. By default transitions begin immediately (0s) if not specified otherwise. The time unit accepted by this property is both seconds (s) and milliseconds (ms).
See the syntax:
.transitioned {
transition-delay: 250ms;
transition-delay: 0.25ms;
}
If you you’d like learn more about animations, go here
No one is always right
I use feedback to improve UI Crux Platform. If you noticed a mistake, please report it.
