An Introduction To CSS3 Keyframe Animations(smashingmagazine.com)
smashingmagazine.com
An Introduction To CSS3 Keyframe Animations
http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
2 comments
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).
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).
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.
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.
Agreed. I noticed that the sidebar with css was animated with jQuery anyways. I still thought it was an interesting proof of concept though.
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/
http://jsfiddle.net/KJAh2/