- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 7 Apr 2010 09:34:43 -0700
- To: www-style list <www-style@w3.org>
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