An Introduction To CSS3 Keyframe Animations

#1

Post by EricssonLabs » Fri, May 20, 2011, 8:08 PM UTC

An Introduction To CSS3 Keyframe Animations
smashingmagazine.com

Re: An Introduction To CSS3 Keyframe Animations

#2

Post by username3 » Fri, May 20, 2011, 9:11 PM UTC

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

Re: An Introduction To CSS3 Keyframe Animations

#3

Post by heyimfromreddit » Fri, May 20, 2011, 9:39 PM UTC

username3 wrote: post #2

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

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

Re: An Introduction To CSS3 Keyframe Animations

#4

Post by atacrawl » Fri, May 20, 2011, 9:54 PM UTC

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.

Re: An Introduction To CSS3 Keyframe Animations

#5

Post by jlind » Fri, May 20, 2011, 10:05 PM UTC

atacrawl wrote: post #4

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.

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

Re: An Introduction To CSS3 Keyframe Animations

#6

Post by duopixel » Fri, May 20, 2011, 10:26 PM UTC

atacrawl wrote: post #4

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.

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).

Re: An Introduction To CSS3 Keyframe Animations

#7

Post by duopixel » Fri, May 20, 2011, 10:34 PM UTC

heyimfromreddit wrote: post #3

username3 wrote: post #2

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

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

Nice! Here's a version with CSS transitions

http://jsfiddle.net/KJAh2/

Re: An Introduction To CSS3 Keyframe Animations

#8

Post by lukifer » Fri, May 20, 2011, 10:50 PM UTC

atacrawl wrote: post #4

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.

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.