Re: transitions vs. animations

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 UTC