Comments on: CSS Animations in WebKit Nightly and iPhone

By: bighill

bighill — Tue, 10 Feb 2009 00:59:48 +0000

If you dig through the apple docs there is a video where they show how this page was created and also show it side by side with a page that uses javascript for the same animation. The css animation is much much smoother.
For me though the big appeal of css animations (on the iphone at least) is the 3D capabilities. Not massively useful but pretty fun to play around with.

By: sroussey

sroussey — Fri, 06 Feb 2009 19:55:53 +0000

Having animation directly in the browser will always be faster than using JS for every frame. With CSS animation, JS could just handle keyframes.

By: trixta

trixta — Fri, 06 Feb 2009 18:50:33 +0000

You guys seem to misunderstood my point.
CSS animations are fully exposed to javascript. Javascript still can handle, when a css-animation starts, what to do after this (chaining), how fast the animation will be etc.

but the animation is morphing to a style property and this style property should be defined in a stylesheet.

By: iliad

iliad — Fri, 06 Feb 2009 17:14:38 +0000

I also don’t think CSS should be used for animations. For one it over-complicates it, plus people are still going to end up using JS for animations because unless you make css into an actual programming language it will have limitations – so then you’ll start running into issues of JS animations interfering with CSS animations and vice versa.

Just leave CSS doing what it does best – layout, colors, images, etc. Leave the dynamic stuff to javascript.

By: Nosredna

Nosredna — Fri, 06 Feb 2009 16:29:18 +0000

Nice to have stuff that works with javascript off.

By: karnius

karnius — Fri, 06 Feb 2009 14:09:27 +0000

I agree with daneastwell, I sometimes want to chain animation, do something after the animation, or while the animation.. This should stay in JS

By: daneastwell

daneastwell — Fri, 06 Feb 2009 12:37:08 +0000

I think you’ve just answered your own question there, trixta – use CSS to handle presentation (layout, positioning and image, colours) and javascript to handle the transition and effects (in this example via jQuery).

By: trixta

trixta — Fri, 06 Feb 2009 07:31:43 +0000

@ariehg, wich language should be used for this? javascript is a really bad place, to define dynamic style changes. if you define the end-styles of your animation in your javascript, you don´t seperate the presentational layer from your the behaviour layer and this can make it really hard to "skin" your components. this is why i´m a big fan of ClassTransitions

By: ariehg

ariehg — Fri, 06 Feb 2009 07:03:58 +0000

i think effects like this should stay out of css. these kind of stuff will make css an effect language instead of being a design language