Re: transitions vs. animations

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>

Received on Saturday, 20 March 2010 05:03:27 UTC