Re: transitions vs. animations

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 UTC