Add to Flipboard Magazine.
We started seeing experimentation and articles about CSS3 @keyframes animation in 2011, but back then support was limited to webkit browsers. As of mid 2011 Firefox 5 gained support, and we can expect the next incarnation of Internet Explorer (10) to also show support, so now is the perfect time to get to grips with the
@keyframes syntax. This post rounds up 10 articles that explain how to use this cool CSS3 feature, each with examples and demos.
Looking for the skinny on CSS3 animation? The W3 Schools website provides a basic overview of the @keyframes rule and the various properties available, complete with working examples.
Keyframe Animation Syntax
If you’re already familiar with the workings of CSS3 animation and just need a quick ‘cheat sheet’ or reminder definitely check out Chris Coyier’s overview page on CSS-Tricks. It provides lots of code samples that can be easily copied and pasted into your own stylesheets.
Richard Bradshaw has compiled an extremely useful collection of information about the various aspects of CSS3 animation. The linked page focuses on @keyframes animation, but also check out his content on transitions and transforms.
CSS Animation: Principles and Examples
This in-depth article on Smashing Magazine takes a look at CSS3 animations using the traditional principles of animation such as ‘squash and stretch’ to help you create more believable illusions.
A Masterclass in CSS Animation
Net magazine provides a tour of the CSS3 animation rules and properties with some basic examples that you could further develop into interesting and exciting effects.
Start Experimenting with CSS3 Animations
Lee Munroe was on the ball way back in 2010 when he posted his blog article about CSS3 animation. His example focuses on the webkit vendor prefix, but the basic syntax remains the same. He rounds off a great explanation with some awesome examples from around the web.
Ring a Bell with CSS Keyframe Animations
It might sound like a basic example, but this CSS keyframe animation demo from Inspect Element makes use of various properties to create a realistic animation.
Having Fun with CSS Animations
Samuli Hakoniemi creates a subtle but effective character animation using the @keyframes rule. While moving rectangles and bouncing balls are great for learning, demos like this help you develop great ideas for putting these animations into practice in your own web design projects.
The Five-Minute Guide to CSS Animations
The latest article in this collection is from UBelly, which introduces Internet Explorer 10’s support for CSS animation and provides a quick five-minute overview of the basic terminology.
Animation with CSS: It’s Easier Than You Think
Finally this well formatted article from Van SEO Design provides an overview of the various properties and rules you will want to make use of in your CSS animations and includes a description & code examples for each.