Re: transitions vs. animations

On Apr 5, 2010, at 3:32 PM, Tab Atkins Jr. wrote:

> I want to make a button pulse every time a user clicks on it.  In this
> particular case, I can start the animation by hooking it to the
> :active pseudoclass.  However, as soon as the user stops clicking,
> :active stops applying.  I *think* that this makes the animation stop.
> Is this correct?

I know you weren't asking me, and I probably know less about it than you, but my understanding is that should be exactly what happens (assuming the by "stops clicking" you mean the mouse button is no longer down). I tried the following in Webkit (with proper '-webkit-' prefixes where appropriate), and it seemed to do what you want:

@keyframes 'pulse' {
	0% { color:black;  background:yellow;  }
	50%  { color:#999; background:white;  }
	100% { color:black; background:yellow;  }
}

button:active { animation: pulse 1s ease infinite; }

> If the user clicks on the button multiple times in quick succession,
> I'd like to stop the pulse and restart it from the beginning.

Yep, seems to work like that. I changed the duration to 10s, and no matter when I clicked down, it started from the beginning.

> In the more general case, I'd like to run an animation on some element
> when some event happens.  This may be user interaction with the
> element, it may be user interaction with some other element, it may be
> caused by something other than the user (perhaps an XHR request
> finishing).

If the event isn't a state change and can't be represented by a pseudo-class, then it seems like you would need a class-change via JavaScript. Wouldn't you?