I don't know what's wrong with that, but it didn't work in my WebKit nightly. Looked pretty much the same. On Mar 19, 2010, at 10:02 PM, Tab Atkins Jr. wrote: > On Fri, Mar 19, 2010 at 9:57 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote: >> On Fri, Mar 19, 2010 at 9:32 PM, Brad Kemper <brad.kemper@gmail.com> wrote: >>> Is there no way to make it bounce on the unhover too? >> >> Yes, though with some annoyance and unwanted effects. > > Code to back it up, based on Simon's example: > > <!DOCTYPE html> > <title>Animations and Transitions</title> > <style type="text/css" media="screen"> > .container { > position: relative; > width: 800px; > height: 100px; > margin: 30px; > border: 1px solid black; > } > .box { > position: absolute; > left: 0; > height: 100px; > width: 100px; > background-color: blue; > -webkit-transition: left 1s ease-in-out; > } > > .container:hover .box { > left: 700px; > -webkit-animation: bounce 0.2s 5; > } > > .container:not(:hover).hovered .box { > -webkit-animation: bounce2 0.2s 5; > } > > @-webkit-keyframes bounce { > from { top: 0; } > 33% { top: -20px; } > 66% { top: 20px; } > to { top: 0; } > } > > @-webkit-keyframes bounce2 { > from { top: 0; } > 33% { top: -20px; } > 66% { top: 20px; } > to { top: 0; } > } > > </style> > <div class="container" > onmouseover="this.setAttribute('class','container hovered')"> > <div class="box"></div> > </div>
This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT