W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Reversing a keyframe

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 5 Apr 2010 16:44:59 -0700
Message-ID: <x2pdd0fbad1004051644ub3b781eem24379868c8586c5@mail.gmail.com>
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

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; }

Received on Monday, 5 April 2010 23:45:52 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:33 UTC