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

Re: transitions vs. animations

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 19 Mar 2010 21:57:02 -0700
Message-ID: <dd0fbad1003192157y46296aceg3c61a55599e88af9@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Simon Fraser <smfr@me.com>, HÃ¥kon Wium Lie <howcome@opera.com>, www-style list <www-style@w3.org>
On Fri, Mar 19, 2010 at 9:32 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> Is there no way to make it bounce on the unhover too?

Yes, though with some annoyance and unwanted effects.

If you create a second, identical set of keyframes with a different
name, and then assign that as an animation under a
".container:not(:hover) .box" selector, it will work.  However, it
will also trigger the bounce animation on pageload.

You could avoid this with js that sets a class on the element after
the very first hover event, and specialize the :not(:hover) rule on
that class, so that it will only begin the non-hover bouncing after
you've hovered it once.  But you'll still need to define the animation
twice, in two separate sets of keyframes.

This appears to be a consequence of the tradeoffs that had to be made
to have animations make sense when assigned to a single selector, when
in reality they only make sense in terms of selector pairs (that is,
state pairs).

A better solution might be to be able to tie an animation *to* a
transition, so that it can work on the somewhat easier model that
transitions use.  I'm not sure what a sensical syntax would be for
this, though.

~TJ
Received on Saturday, 20 March 2010 04:57:50 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT