Reversing a keyframe

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