Linear
Constant speed. Mechanical by design.
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
Linear motion looks robotic for objects, but it is correct for things that represent time or continuous processes: progress bars, spinners, marquees, and colour or opacity crossfades.
- Progress indicators
- Spinners and loops
- Opacity crossfades
- type
- cubic-bezier
- points
- 0, 0, 1, 1
- duration
- 300 ms
- support
- all browsers
:root {
--ease-linear: cubic-bezier(0, 0, 1, 1);
--ease-linear-duration: 300ms;
}
.element {
transition: transform var(--ease-linear-duration) var(--ease-linear);
}