4 min read
•Question 14 of 49easyHow Do CSS Transitions Work?
Understanding smooth property transitions.
What You'll Learn
- Transition properties
- Timing functions
- Multiple transitions
Transition Properties
styles.cssCSS
.element {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
/* Shorthand */
transition: background-color 0.3s ease;
}
.element:hover {
background-color: blue;
}Timing Functions
| Function | Behavior |
|---|---|
| ease | Slow start and end |
| linear | Constant speed |
| ease-in | Slow start |
| ease-out | Slow end |
| ease-in-out | Slow start and end |
| cubic-bezier() | Custom curve |
Multiple Transitions
styles.cssCSS
.element {
transition:
background-color 0.3s ease,
transform 0.5s ease-out,
opacity 0.2s linear;
}
/* Or transition all */
.element {
transition: all 0.3s ease;
}