Anticipate
Pulls back before moving forward.
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
500 ms
When to use it
A control point below 0 makes the element wind up in the opposite direction first. This is classic animation anticipation. Use it sparingly, because it delays the real motion.
- Launch and send actions
- Character-like motion
- Drawing attention
- type
- cubic-bezier
- points
- 0.36, -0.4, 0.6, 1
- duration
- 500 ms
- support
- all browsers
:root {
--ease-anticipate: cubic-bezier(0.36, -0.4, 0.6, 1);
--ease-anticipate-duration: 500ms;
}
.element {
transition: transform var(--ease-anticipate-duration) var(--ease-anticipate);
}