Line25

Useful Links for Learning CSS @Keyframes Animation

Read the full post

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.

CSS3 Animations

Read the CSS3 animation article

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

Read the CSS3 animation artice

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.

CSS3 Animations

Read the CSS3 animation article

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

Read the CSS3 animation article

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

Read the CSS3 animation article

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

Read the CSS3 animation article

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

Read the CSS3 animation artice

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

Read the CSS3 animation article

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

Read the CSS3 animation article

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

Read the CSS3 animation article

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

22 Comments

  1. css menu says:

    Great css tutorials listed

  2. Great stuff! You'd expect more buzz, for something so cool! Thanks Chris!

  3. Vin Gaeta says:

    Great list to help people get started. I love that it has from beginner all the way to advanced. Awesome!

  4. Sergiu says:

    Thanks Chris! I actually wanted to get a look over css keyframes animation.

  5. Saya says:

    I can see how Flash will leave its space to CSS3 animation very soon. Although still flash in some part is smoother but I future web animation will be in CSS3. Thanks for this list.

  6. Sam says:

    once again really helpful, thank you!

  7. cashcommon says:

    Very good resource for css on keyframes animation. Great thanks for your hard work.

  8. Prathap says:

    I shared the article on facebook, why i am not appearing in the timeline.

  9. Thank you for sharing, always good idea to keep updated.

  10. Great stuff. CSS3 keyframes are great for more complex animations, but it takes a few hours of practice to really understand the syntax.

  11. Romina says:

    This is awesome! As someone with an animation background and getting into web development, it's great to see crossovers that don't involve Flash. The potential is pretty exciting!

  12. Oliver twist says:

    Hi, I Read your sudation but a question is here so please make me adjusted and view my question please do it fast I am waiting for your backanswer <a href="http://www.cybermount.com/">click it</a>
    ………..thanks;

  13. Oliver twist says:

    hi,this is only for first who men only who saw this first go ahed and accept your gift <a href="http://www.cybermount.com/">click it</a>

  14. Adeptpros says:

    Wonderful resources !
    Specially for a tougher concept like CSS Animations. These resources are quite handy to learn the tips and tricks

    Thankyou

Comments are now closed