W3C home > Mailing lists > Public > www-style@w3.org > March 2010

Re: transitions vs. animations

From: Brad Kemper <brad.kemper@gmail.com>
Date: Fri, 19 Mar 2010 22:27:54 -0700
Cc: Simon Fraser <smfr@me.com>, Håkon Wium Lie <howcome@opera.com>, www-style list <www-style@w3.org>
Message-Id: <C6441BA3-E8B1-4A16-9CB8-DDB632860B2C@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT