- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 5 Apr 2010 16:44:59 -0700
- To: www-style list <www-style@w3.org>
When you run a Transition, you can make it animate in either direction easily - every transition-timing-function value has a defined opposite, which is identical but time-reversed. There is no easy way to do the same thing for an Animation, though - keyframes define how to manipulate some properties in only one direction. I think that running animations in the reverse direction will be relatively common, though, and so there should be a simple way to reverse a keyframe. I suggest that any place that accept a keyframe name, should also accept a keyframe name followed by the token 'reverse' (or 'reversed', whatever seems better). The presence of 'reverse' would specify that the animation should be run "in reverse" - all keyframe selectors should be flipped around 0%-100% (so that a selector for 25% now runs at 75%, etc), and any animation-timing-functions specifying how to animate between keyframe blocks should use the opposite timing function. (This is not the same thing as just swapping each timing-function for its reverse - you also have to change where the timing-function is specified, so as to specify the timing of the same *interval*.) That is, if you had a keyframe defined thusly: @keyframe bounce { from { top: 0; animation-timing-function: ease-in; } 25% { top: -20px; animation-timing-function: ease-out; } 50% { top: 0; animation-timing-function: linear; } 75% { top: 20px; animation-timing-function: ease-in; } to { top: 0; } } Then specifying "bounce reverse" in some animation rule would be equivalent to instead running the following: @keyframe bounce-reverse { from { top: 0; animation-timing-function: ease-out; } 25% { top: 20px; animation-timing-function: linear; } 50% { top: 0; animation-timing-function: ease-out; } 75% { top: -20px; animating-timing-function: ease-in; } to { top: 0; } } ~TJ
Received on Monday, 5 April 2010 23:45:52 UTC