[csswg-drafts] [css3-animations] [css-transitions] animation-delay animatable?

nyarly has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css3-animations] [css-transitions] animation-delay animatable? ==
As a web developer or designer, I'd like to be able to "scrub" 
animations using transitions. However

1. None of the animation properties are themselves animatable and
1. This is sensible because either 
    1. that would admit to animating an animation property, which 
makes my head swim, or     
    1. 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.

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/683 using your GitHub 
account

Received on Friday, 4 November 2016 21:05:14 UTC