cycle()

Moves a state to the next value in a list, wrapping around. In an :on() rule it is the mutation --mode: cycle(light, dark).

Syntax

--<state>: cycle(<value>#);

registry syntax: cycle(--state, value, value, ... [, closest(selector)])

Parameters

valuestwo or more literalsrequired

The list. If the current value isn’t listed, the state moves to the first.

Effect

No value.

Example

/* <button class="speed">Speed <span class="value">1</span>×</button> */.player { --speed: state(1); }.player .speed:on(click) { --speed: cycle(1, 1.5, 2); }.player .speed .value { content: var(--speed); }

Behavior

• A mutation of the state on the left. In an :on() rule, --x: cycle(a, b, …) changes the nearest --x owner of the element the rule matched. set(), toggle(), increment(), decrement() and cycle() share one model: one winner per state through the cascade, and one transaction per event, read against the values from before it.
• The values are literals, not expressions. Keywords compare case-insensitively and strings exactly.

Supported contexts

• As a mutation in an :on() rule.

Limitations

• A value-function cycle() was rejected: use @keyframes with steps().

Examples

• Conditional state · API examples, runs the real runtime

Related