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>
Received on Saturday, 20 March 2010 05:28:29 UTC