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

Re: transitions vs. animations

From: Simon Fraser <smfr@me.com>
Date: Mon, 22 Mar 2010 16:44:16 -0700
Cc: Dean Jackson <dino@apple.com>, "www-style@w3.org list" <www-style@w3.org>
Message-id: <5EBD0432-320C-496D-BB97-1196E1EF31CA@me.com>
To: Håkon Wium Lie <howcome@opera.com>
On Mar 22, 2010, at 3:31 PM, Håkon Wium Lie wrote:

> Dean Jackson wrote:
> 
>> I often add transitions to existing content at a high level (eg.
>> .bubble { transition: opacity 1s; } ) and then animations on
>> specific elements ( #bouncingbubble { animation: bounce 2s infinite
>> alternate; }).
> 
> Would it be possible for the authors of the spec to point to some
> pages that exhibit common use cases?

Many iTunes LPs and movie extras use lots of transitions and animations.

Here are some general transition and animation examples (many of these use 3d transforms, for which you'll want a recent Safari or WebKit build on SnowLeopard):

<http://webkit.org/blog-files/3d-transforms/poster-circle.html>
<http://webkit.org/blog-files/3d-transforms/morphing-cubes.html>
<http://webkit.org/blog-files/leaves/>
<http://www.the-art-of-web.com/css/css-animation/>
<http://www.ferretarmy.com/css-animation-examples/>
<http://www.satine.org/research/webkit/snowleopard/snowstack.html>
<http://scripty2.com/demos/touch/photofun/>
<http://anthonycalzadilla.com/css3-ATAT/index.html>
<http://www.gesteves.com/experiments/starwars.html>
<http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/>

Simon
Received on Monday, 22 March 2010 23:45:16 GMT

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