- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Thu, 8 Apr 2010 11:45:52 -0700
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: Håkon Wium Lie <howcome@opera.com>, Perry Smith <pedzsan@gmail.com>, "www-style@w3.org list" <www-style@w3.org>
On Thu, Apr 8, 2010 at 10:47 AM, Brad Kemper <brad.kemper@gmail.com> wrote: > > On Apr 7, 2010, at 5:19 PM, Håkon Wium Lie wrote: > >> Perry Smith wrote: >> >>>> How would you like to fill in the empty boxes?: >>>> >>>> http://people.opera.com/howcome/2010/ta/index.html >>> >>> For case 2b and 2c, I think Tab's ideas now work by adding the >>> animation to what I call the "unadorned" selector (i.e. the foo >>> selector in your example). I believe you would want the "play-in" >>> concept so it plays when it transitions to that state but does not >>> play when the page is first drawn. >> >> I'd love to add a column with Tab's proposals. Anther tab, so to say :) >> > > > Can I have a column too? It would be the same as "Current Drafts", except for the following: > > 2b) > foo { > position:static; > transition: position 1s / bounce 1s; > } > foo:hover { position:relative; } > > 2c) > foo { > position:static; > transition: position 1s / bounce 1s alternate; > } > foo:hover { > position:relative; > transition-animation: bounce 1s; > } > > 3b) [same as Tab's except for changed syntax (see below)] > .one { > position: relative; > left: 0px; > transition: left 1s / bounce .2s 5; > } > .two { > position: relative; > left: 500px; > } > > 3c) > .one { > position: relative; > left: 0px; > transition: left 1s / bounce .2s 5; > } > .two { > position: relative; > left: 500px; > transition: left 1s / bounce .2s 5; > animation: bounce 0.2s 5, sway 1s 1s infinite; > } > > In this e-mail, I've changed all the instances of what I would have previously written as 'play(<animation-shorthand-values>)' (which Tab uses too now) to '/< transition-animation-values>'. This should allow for shorthand or not, and more granular control. See below for details. > > > Transition Shorthand Property: > <transition-shorthand-from-current-draft>[/< transition-animation-values>]? > > Where < transition-animation-values> is: > > [< transition-animation-name> || < transition-animation-duration> || < transition-animation-timing-function> || < transition-animation-delay> || < transition-animation-iteration-count> || < transition-animation-direction>] [, [< transition-animation-name> || < transition-animation-duration> || < transition-animation-timing-function> || < transition-animation-delay> || < transition-animation-iteration-count> || < transition-animation-direction>] ]* > > Where all those values are the same as for their animation value analogs, and there is also a shorthand called 'transition-animation' (I used to call it 'transition-triggered-animation', but that's kind of long). As far as I can tell, this is identical to my proposal, just with a slightly differing syntax, right? You use /s to separate the animations, rather than wrapping them in a function? > The difference is that the "transition-animation" only plays during the time that the transition is playing, and is time-clipped to that duration. Thus, you can have infinite iterations in the transition-animation part, but they would only last while the property was transitioning (would not play during the transition-delay either). I think this is a good idea. > Another difference is that if the keyframes are animating the same property as the transition, then the effect is additive. This way, you can have, e.g., a horizontal move that was not smooth, but staggered, surged, or spurted from left to write, due to the effects of the transition-animation. You haven't specified how this is supposed to work. Does this mean that if I am transitioning 'left' and the animation has a 'left:20px;' rule in one of the keyframe-declarations, that point in time will have left equal to (whatever the transition would set it to) + (20px)? If so, how does a % work? How do colors work? How do keyword properties work? How do I say "ignore the transition, instead use this cool animation function I've defined here" (the "fling and bounce" transition I mentioned earlier). ~TJ
Received on Thursday, 8 April 2010 18:46:45 UTC