CSS ease
The browser default, for reference.
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
300 ms
When to use it
This is what you get when you write `transition: all 0.3s`. It is a reasonable general curve, but it starts slightly slow, so entering elements feel a beat late. Compare it against Emphasized decelerate.
- Baseline comparison
- Legacy defaults
- type
- cubic-bezier
- points
- 0.25, 0.1, 0.25, 1
- duration
- 300 ms
- support
- all browsers
:root {
--ease-css-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-css-ease-duration: 300ms;
}
.element {
transition: transform var(--ease-css-ease-duration) var(--ease-css-ease);
}