[css-selectors] :clicked for animations on click

[Nokel81]

The :clicked would be another selector similar in action to :active with one slight but major change. Both would start at the same time but whereas :active's active duration is only for when the mouse is pressed down :clicked would last for the maximum time of either the duration of mouse pressed or the duration of encompassed tags such as animations.

Example:

* Mouse down
* :active fires
* :clicked fires
* :clicked animation (duration 0.2s) starts
* time delay 50ms
* Mouse Up
* :active encompassment falls out of scope
* time delay 150ms
* :clicked animation ends
* :clicked encompassment falls out of scope

However, if the animation finishes before the mouse up event has happened then it continues to act like :active and waits for mouse up

[Nokel81]

Are there any downsides to having something like this?

[upsuper]

I don't think this fit in the basic model of selectors. Selectors select elements based on their current state, not events fired on them. That said, selectors matching is not supposed to be described as a timeline. It simply applies to each specific moment of the document.

I understand that, event-triggered animation is a long-requested feature for CSS. Currently, the best approach to do is using the Web Animations API. With that, you can do something like:

elem.addEventListener("click", function() {
  elem.animate({ /* ... */ }, 200);
});

In the future, CSS might add some kind of event-triggered animation mechanism, but I don't think selectors spec would be the right place for this to happen in any sense.

[Nokel81]

I disagree that animations could not be considered the state of an element. Instead of introducing new special pseudo-classes that let all animations complete a new syntax could be used.

button:active {
    font-style: bold;

    @last {
        transition: fade-in 1s;
    }
}

[upsuper]

The @last is still not a state.

[Nokel81]

Is there somewhere in the spec where state is defined? I was having here @last to be a modifier to create a new state that is the duration of the max duration of any properties.

[Psychpsyo]

What would :clicked be used for?
If some style is tied to an animation (@keyframes) so much that it needs to last the entire duration of that animation, shouldn't that be included in the animation itself?

And if this is a transition, couldn't you transition out whatever properties you want to apply for a bit longer with a delay?
Like so:

button {
    transition: background-color 0s 1s;
}
button:active {
    transition: background-color 0s 0s;
    background-color: green;
}

This button instantly turns green on press and stays green for 1 second after being released.