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

Re: transitions vs. animations

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 19 Mar 2010 22:02:35 -0700
Message-ID: <dd0fbad1003192202r29520b44ke7bbe67bdc1349c8@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Simon Fraser <smfr@me.com>, HÃ¥kon Wium Lie <howcome@opera.com>, www-style list <www-style@w3.org>
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 GMT

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