Emphasized accelerate
Leaves slowly then speeds away. For exiting 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
200 ms
When to use it
Exits should get out of the way. Starting slow gives the eye a moment to register the departure, then the element accelerates off screen. Keep exits shorter than entrances.
- Elements leaving the screen
- Dismissed toasts
- Closing panels
- type
- cubic-bezier
- points
- 0.3, 0, 0.8, 0.15
- duration
- 200 ms
- support
- all browsers
:root {
--ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--ease-emphasized-accelerate-duration: 200ms;
}
.element {
transition: transform var(--ease-emphasized-accelerate-duration) var(--ease-emphasized-accelerate);
}