An Introduction To CSS3 Keyframe Animations

http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

by EricssonLabs • 15 years ago

27 7 15 years ago

smashingmagazine.com

username3• 15 years ago

Is it possible to animate the sun on an arcing path using keyframes?

heyimfromreddit• 15 years ago

This is the first time I've tried using CSS3 animations and I managed to do it: http://jsfiddle.net/cmCfP/

duopixel2• 15 years ago

Nice! Here's a version with CSS transitions

http://jsfiddle.net/KJAh2/

atacrawl• 15 years ago

As much as I love CSS, I could never see myself using any of this technology because jQuery (and many other JS frameworks) can do this with less code, simpler syntax and more browser coverage.

jlind• 15 years ago

Agreed. I noticed that the sidebar with css was animated with jQuery anyways. I still thought it was an interesting proof of concept though.

duopixel2• 15 years ago

You'd need a bunch of callbacks to chain the animations in jQuery, plus the cost of including the library.

The Smashing Magazine article is not using the shorthand declarations for -webkit-animation, which would compact it much more.

Give it a spin, you will be pleasantly surprised, especially when it comes to tiggering the animation (with :hover).

You are right that browser coverage is a joke, but support is there in FF Aurora (who knows about IE10).

lukifer• 15 years ago

See also: the Firmin plugin, which abstracts away CSS transitions with clean Javascript APIs: http://extralogical.net/projects/firmin/ (Alas, it does not yet do automatic jQuery fallback.)

Though I love jQuery.animate(), it just can't match the GPU-rendering speed on CSS3 transitions and animations. If you can afford the development time, it's absolutely worth it.

An Introduction To CSS3 Keyframe Animations

Related Stories