wave()

Smooth periodic motion between two values, run by the browser as a native animation with no JavaScript per frame.

Syntax

wave(<min>, <max>, <duration>)

registry syntax: wave(min, max, duration)

Parameters

min, maxnumbers, lengths, percentages, angles or times of one typerequired

A unitless 0 adopts the other type; percentages mix with lengths.

duration<time>required

One full cycle: min → max → min.

Return value

A value of the same type as min and max, sine-shaped over time.

Example

/* wave() is removed. The native replacement: */@property --y { syntax: "<length>"; inherits: false; initial-value: 0px; }@keyframes y { from { --y: -8px; } to { --y: 8px; } }.floating {  translate: 0 var(--y);  animation: y 1.5s ease-in-out infinite alternate;}

Behavior

• Each call site registers one typed property and one shared keyframe list; each element gets a Web Animations animation.
• Does not use the animation property, so your own animation, transition, transform and translate keep working.
• Elements bound together share the phase.
• prefers-reduced-motion: reduce gives the midpoint and no animation, and preference changes apply live.

Supported contexts

• Any animatable value, including inside calc().

Limitations

• Experimental.
• Arguments must be plain values: no nested reactive functions, and it can’t be nested inside live().
• About 2× the style cost of a plain @keyframes animation of translate.
• Several matching rules using wave() for the same property each run an animation, although only the winning one is visible.
• Without CSS.registerProperty, shows the midpoint with one warning.

native equivalent · @property --y { syntax: "<length>"; inherits: false; initial-value: 0px } @keyframes y { from { --y: -8px } to { --y: 8px } } .floating { translate: 0 var(--y); animation: y 1.5s ease-in-out infinite alternate }

Related