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