[css3-animations] [css-transitions] animation-delay animatable? #683
Description
As a web developer or designer, I'd like to be able to "scrub" animations using transitions. However
- None of the animation properties are themselves animatable and
- This is sensible because either
- that would admit to animating an animation property, which makes my head swim, or
- admitting the unique case of a property which is transitionable without being animatable.
But:
The motivating instance is like this:
Suppose you have an animation that discloses an element - scales it vertically, as well as changing it's opacity and color.
You'd like for there to be a style selected with :hover on a parent to start that animation.
When the style no longer applies, the animation should reverse in order to hide the element again.
My understanding an experimentation with the current spec is that I could:
- apply the animation in the :hover style. I get the disclosure animation, but the element simply vanishes when :hover is removed.
- apply in the :hover, and also apply the animation in reverse to a style without :hover. This does what I want, but when the page loads, the element initially is visible and then disappears.
Proposal
The very generic solution that occurs to me would be: apply the animation to the element, paused. Add transition-property: animation-delay and have the :hover class apply animation-delay: -1 second with the intention that, when :hover is added to the container element, the animation delay would transition, and so the animation would "scrub" forward 1 second. When :hover is removed, the reverse transition would apply, and the "scrub" would rewind the animation back to the hidden state.
Alternatives
It would also suit my purposes if there were a psuedo-selector for :lost-hover or :hovered. Then, that selector could be used to apply the reverse animation, and so avoid the page-load vanish behavior.
In some ways, that would be better, since a separate animation might be applied to reverse the action - however, note the complication of needing to share a timeline, as well as somehow tweening between the two animations if :hover is removed before the first animation completes. (There's a notion of an algorithm there, but it's still an added complication.) Furthermore, for generality, the implication is for a lost() modifier, which I think complicates the whole thing.
In fact, the "shared timeline" concept was one of the initial drivers for wanting to be able to use transitions to scrub animations, and therefore making animation-delay animatable.