Proposal for animation-pause property

Hello,

I have a proposal for a new property for css animations. I was discussing this briefly (almost a year ago though) with Lea Verou via twitter and she told me that I should post to this mailing list and make my case. So I hope that's ok and the usual way to go. :)

So, I quite often have the case that I'm implementing an animation where the animation itself e.g. takes two seconds, but I want a break of, let's say, 8 seconds before the animation starts again.

At the moment I have to implement it like this:

@keyframes animationName {
    0% { animationStart }
  20% { animationEnd }
  21% { animationStart }
}

element {
  animation: animationName 10s;
}

This has multiple disadvantages:
- I have to animate back to the initial state (see keyframe 21%) what causes code duplication (I'm not 100% sure about this point - correct me if I'm wrong!)
- If I want to change either the duration or the break, but keep everything else as it is (in absolute numbers), I have to adjust the keyframes since they're relative to the duration value

If there would be something like an animation-pause, I could do the following:

@keyframes animationName {
      0% { animationStart }
  100% { animationEnd }
}

element {
  animation: animationName 2s;
  animation-pause: 8s;
}

This would solve the above mentioned disadvantages in my opinion.

I hope I was able to make my point. Thank you in advance!


Best regards,
Michael Großklaus


—

Freiberuflicher Web-Entwickler

Scheideweg 6
20253 Hamburg

mail@mgrossklaus.de
www.mgrossklaus.de

USt-Id.: DE279812974
Finanzamt Hamburg-Hansa