Re: [css3-transitions] Adding keyframes to transitions

On Mon, Apr 5, 2010 at 4:34 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> @keyframes bounce {
>  from { top: 0; }
>  25% { top: -20px; }
>  50% { top: 0; }
>  75% { top: 20px; }
>  to { top: 0; }
> }
>
> .slider > .box {
>  left: 0;
>  transition: left 1s, play(left, bounce) 1s;
> }
>
> .slider:hover > .box {
>  left: 400px;
> }

Based on feedback from Brad, I'm amending the syntax of this proposal.
 Linking a keyframe to a transition is now done through a new
property, and can be specified in the shorthand directly.  As well,
you can specify the full set of animation rules from the Animations
draft.  The new syntax looks like this:

.slider > .box {
  left: 0;
  transition: left 1s play(bounce 1s);
}

This indicates that, whenever the value of 'left' changes, in addition
to transitioning the 'left' value for 1s, you should additionally run
the bounce keyframe with a duration of 1s.

The new property (temporarily named transition-animations, until a
better name comes along) accepts a space-separated list of play()
functions, which must contain a value that would be valid for the
"animation" shorthand property.  (Or the "play-during" property, in my
idea for splitting up animations.)

If an animation specified in transition-animations manipulates the
property that it is attached to the transition of (for example, if the
bounce animation above manipulated the 'left' property), the animation
wins in terms of controlling the value of the property.  If multiple
animations would manipulate the same property, it is resolved in the
same way as specified in the current Animations draft (last animation
to manipulate a given property wins).

~TJ

Received on Wednesday, 7 April 2010 16:35:30 UTC