[Proposal] CSS rule for state changes over time

This rule could simplify dealing with CSS animations. It would enable new possibilities with conditional animations.

Currently an animation is triggered when a DOM element receives a new class (or whatever selector triggers the animation). Sometimes this behavior leads to animations that don’t make sense.

Let’s say an element can have a state a, b or c. An animation is set to trigger when the element enters state b. With the new rule it would be possible to distinguish the state transition that happened. This would mean that an animation could be triggered when the state change was a->b but not when the state change was c->b.

A possible CSS syntax could be an arrow:

.scroll-up |> .scroll-top

This would mean that the rule only applies for elements that have the class ‘scroll-top’ and had the class ‘scroll-up’ before.

The leftwards arrow would be allowed as well to support nesting:

.scroll-top <| .scroll-up

Yeah, something like this is desperately needed.

CSS ended up being saddled with two different, incomplete animation systems. CSS Transitions are a state-based animation system (where the states being tracked are distinct computed values of individual properties), but they are only allowed to define trivial animations between the start/end values of the state change. CSS Animations can create complex animations involving multiple properties and arbitrary values, but they’re limited to running “continuously” while an element is in a given state, and have no ability to respond to state changes. Authors hack Animations into being kinda state-change driven via Selectors, but as you’ve found, it’s a hack and very very imperfect.

We really need a way to attach full animations to actual state changes, combining the best of the two. Unfortunately, there are some significant issues with doing this declaratively; in particular, dealing with interruptions when the state is changed to a third value while it was transitioning between the first two is difficult.

A few years back I wrote up an early draft of what this might look like: http://www.xanthir.com/b4LH0