Expo out
A dramatic, exponential deceleration.
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
700 ms
When to use it
Expo-out moves extremely fast at the start and spends most of its time on the last few pixels. It feels premium and cinematic on large movements and hero reveals, but can feel sluggish to finish on small ones.
- Hero reveals
- Large page transitions
- Scroll-triggered entrances
- type
- cubic-bezier
- points
- 0.16, 1, 0.3, 1
- duration
- 700 ms
- support
- all browsers
:root {
--ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-expo-out-duration: 700ms;
}
.element {
transition: transform var(--ease-expo-out-duration) var(--ease-expo-out);
}