:changed()

Matches briefly after an observed change of the nearest state, until the animations it started have finished.

Syntax

selector:changed(<custom-property>) { … }

registry syntax: :changed(--state)

Parameters

custom-property<dashed-ident>required

The state to watch.

Return value

A pseudo-class, compiled to [data-rcss-changed-N].

Example

.counter:changed(--count) .num {  animation: flash 300ms;}

Behavior

• From the frame after the change until the animations and transitions it started in the subtree finish, or one frame if none started. It started the animations named, and the transitions of properties set, in its rules; other animations starting in the same frame do not hold it (if its rules set custom properties, every animation that starts counts).
• Never on load or after a no-op. A new change restarts it.

Supported contexts

• Any selector.

Limitations

• An infinite animation keeps it matching until the next change.
• Finding started animations calls document.getAnimations() once per frame with markers; in Chromium this costs roughly running animations × page size.

Examples

• State history · API examples, runs the real runtime

Related