Emphasized decelerate
Arrives fast and lands softly. Excellent for entering elements.
How to read it
Top row: where the element sits on each frame, so bunched ticks mean slow motion. Bottom row: the same frames in time order, each bar the distance travelled, so the settle is easy to read. Keys are circled.
Invoice sent
to studio@northwind.co
400 ms
When to use it
Most of the movement happens in the first third, then the element glides to rest. Entering elements benefit because the user sees them almost immediately, while the long tail keeps the landing soft.
- Elements entering the screen
- Toasts and snackbars
- Expanding cards
- type
- cubic-bezier
- points
- 0.05, 0.7, 0.1, 1
- duration
- 400 ms
- support
- all browsers
:root {
--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-emphasized-decelerate-duration: 400ms;
}
.element {
transition: transform var(--ease-emphasized-decelerate-duration) var(--ease-emphasized-decelerate);
}