Standard
A balanced ease-in-out for elements moving on screen.
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
When an element moves from one on-screen position to another, it should accelerate and decelerate symmetrically-ish. This curve is a little sharper than the CSS keyword `ease-in-out`.
- Reordering and repositioning
- Resizing
- Shared element transitions
- type
- cubic-bezier
- points
- 0.2, 0, 0, 1
- duration
- 300 ms
- support
- all browsers
:root {
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-standard-duration: 300ms;
}
.element {
transition: transform var(--ease-standard-duration) var(--ease-standard);
}