- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 7 Apr 2010 18:00:23 -0700
- To: Håkon Wium Lie <howcome@opera.com>
- Cc: Perry Smith <pedzsan@gmail.com>, "www-style@w3.org list" <www-style@w3.org>
On Wed, Apr 7, 2010 at 5:19 PM, Håkon Wium Lie <howcome@opera.com> 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 :) 1a: foo { color: red; transition: color 1s; } foo:hover { color: green; } 1b: foo { color: red; transition: color 1s; } foo:hover { color: green; transition: color .8s; } 2a: foo:hover { play-in: bounce 1s; } 2b: foo:hover { play-in: bounce 1s; play-out: bounce 1s; } 2c: foo:hover { play-in: bounce 1s; play-out: bounce reversed 1s; /* or whatever, I don't care how keyframes are reversed, as long as they *can* be reversed */ } 3a: .one { position: relative; left: 0px; } .two { position: relative; left: 500px; play-in: bounce .2s 5; } 3b: .one { position: relative; left: 0px; transition: left 1s play(bounce .2s 5); } .two { position: relative; left: 500px; } /* I suspect this expresses the notion that you want, where it's supposed to bounce *while* moving. */ /* Also, assuming you mean "the class changes from one to two", rather than "unhovered". */ 3c: .one { position: relative; left: 0px; transition: left 1s play(bounce .2s 5); } .two { position: relative; left: 500px; play-during: sway 1s 1s; } /* Delay added to make it wait until the transition is done. */ ~TJ
Received on Thursday, 8 April 2010 01:01:11 UTC