Re: [css3-animations] Splitting up concepts of "animations"

On Mon, Apr 5, 2010 at 5:12 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> An animation specified in a play-in property runs whenever an element
> first gains the specified animation (this is identical to the current
> rules for when to run an animation).
>
> An animation specified in a play-out property runs when an element
> *loses* the specified animation.  (This is an inverse of the current
> rules for when to run an animation, and should work similarly if you
> stop matching a selector that gives an animation but still match some
> other selector that gives the same animation.  That is, it shouldn't
> run.)
>
> "play-in-play-count" and "play-out-play-count" don't allow the
> 'infinite' token.  They only accept numerical values, or the other
> allowed keywords.
>
> An animation specified in a play-during property runs as long as the
> element has the specified animation (same as the current rules for
> when to run an animation).  play-during animations have an infinite
> play-count by default; the play-during shorthand does *not* accept a
> play-count value, and there is no play-during-play-count property.

Based on feedback from Brad, I'm amending this section of the proposal.

play-in animations now happen *only* when an element that previously
lacked a given animation in its play-in property gains it.
Specifically, play-in animations do *not* happen on page load, since
elements don't 'gain' their initial values; they're assumed to have
them from their creation.  This is a minor change from the way
animations are defined to run in the current Animations draft.

play-during animations now accept a play-count value, just like the
other types of animations.  This defaults to 'infinite'.  (play-in and
play-out animations still accept only numbers for their play-count,
not the 'infinite' token.)

These changes allow two use-cases to be distinguished that I think are
important:

1. Having an element play an animation when it gains some class (or
otherwise matches a selector dynamically that grants a play-in
animation), without having the animation run if the element matches
that selector on page load.  Specifically, I may want to have a
tooltip spiral into view when I add the .visible class to it, but I
want it to simply be on the page, without spiraling, if I've set
.visible on it in the actual page code (to make it visible
immediately, for some reason).

2. The opposite of the previous use-case - having an element play some
finite animation on page load.  Specifically, I may have a
.immediate-attention class that adds a throbbing animation to the
elements its applied to.  I'd like for any element with
.immediate-attention to throb, even if it has it on page load, but I
only want it to throb a few times, so as to not be too annoying.  I
can now set this as, for example, "play-during: throb 2s 3;" to have
any element with .immediate-attention throb three times and then stop.



To summarize the changes that these now represent from the current
Animations draft:

1. The play-during property is *exactly* the same as the current
'animation' property in the Animations draft.

2. The play-in property is *almost* exactly the same as the current
'animation' property.  The only difference is that play-in animations
do not play on page load, and they do not accept 'infinite' as a valid
play-count value.

3. The play-end property is the same as play-in, except the rules for
when to run a play-end animation are inverted - an element runs a
play-end animation when it *loses* a play-end animation that it
previously had.  Regaining the animation will make the current
play-end animation stop.  That is, given the following code:

.tooltip {
  //code for styling a tooltip
}

.tooltip.visible {
  play-end: spiral-out 1s;
}

... the spiral-out animation will play when you *remove* the .visible
class, as long as the element is not still receiving the spiral-out
animation from some other rule in the cascade.  If the animation is in
the middle of running and .visible is reapplied (or the element gains
the spiral-out animation from some other means), the animation will
immediately stop and will not run again until it is again lost by the
element.

~TJ

Received on Wednesday, 7 April 2010 16:27:07 UTC