Guide to CSS Animations – Resources and Tutorials

    written by Nikola Lazarevic

    CSS animations are becoming quite popular and I decided to compile a list of useful resources and tutorials for those that haven’t spent that much time with them. Here you’ll find the main guidelines and tips on how to take the first steps with it.
    Get ready to step in the world of CSS animations and learn how to apply them to your own sites.

    Using CSS3 Transitions, Transforms and Animation

    Using CSS3 Transitions, Transforms and Animation
    These demos are showing of CSS transitions, transforms (2D and 3D) and animations. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them.

    Enhance Your Sites with CSS3 Animations

    Enhance Your Sites with CSS3 Animations
    This article provides an introduction to CSS3 animations and an explanation of the syntax involved. We will then take a look at a more advanced use of CSS animations before finishing with some “real world” animation ideas and how you can apply these to your sites today.

    The Guide To CSS Animation: Principles and Examples

    The Guide To CSS Animation: Principles and Examples
    In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages.

    A Masterclass in CSS Animations

    A Masterclass in CSS Animations
    From the basics of animation keyframes to expert animation tips that will save you many a headache, Estelle Weyl, web developer and author of HTML5 and CSS3 For the Real World, takes you on a tour of all you need to know to get up and running with CSS3 animations.

    CSS Fundamentals: CSS 3 Transitions

    CSS Fundamentals: CSS 3 Transitions
    This article review the basics of using CSS3 transitions and animations to add an extra layer of polish.

    Case Study: Getting Hardboiled with CSS3 2D Transforms

    Case Study: Getting Hardboiled with CSS3 2D Transforms
    In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.

    Keyframe Animation Syntax

    Keyframe Animation Syntax

    CSS animations

    CSS animations
    But you can do a lot more with CSS animations than just create pretty spinners. Since I was fooling around with it anyway, I decided to test how far you can push this, space is the final limit, right?

    CSS3 Transition Animations With jQuery Fallbacks

    CSS3 Transition Animations With jQuery Fallbacks
    In today’s post, we’ll be taking a look at how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported. The benefit of transitions is that unlike JavaScript based animations, they’re hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you would normally experience.

    Create a 404 page with CSS3 animations

    Create a 404 page with CSS3 animations
    WebKit-wizard Trent Walton, founder of Paravel, explains how he built .net’s latest 404 page using CSS3 animations

    Ring a Bell with CSS Keyframe Animations

    Ring a Bell with CSS Keyframe Animations
    Time to have some more fun with a CSS animation as Tom Kenny going to show us how to realistically animate a ringing bell.

    How To Create Customizable Mac Dock With CSS3 Only

    How To Create Customizable Mac Dock With CSS3 Only
    In this post Simone D’Amico will show us how to create a customizable Mac like dockbar using only CSS3.

    Add cutting-edge visual effects

    Add cutting-edge visual effects
    The list of cutting-edge CSS3 techniques is ever-expanding. Trent Walton and Dave Rupert from Paravel explore how these new properties can be implemented right now

    Fight the Flicker! Making Your CSS3 Animation Bomb-Proof

    Fight the Flicker! Making Your CSS3 Animation Bomb-Proof
    CSS3 Animations have a tendency to ‘flicker’ on Mobile Safari. Luckily, there is an easy solution for it. Thomas Fuchs sums it up best!

    How to Control Your CSS3 Animations

    How to Control Your CSS3 Animations
    Here’s a css3 animation property that you might not know about. The -webkit-animation-fill-mode property. It provides fine-tuned control over your CSS3 keyframe animations.

    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

6 Comments
ADD COMMENT
  • Marco Berrocal says:

    November 2, 2011

    One thing that kills me on animations over the use of Canvas. Do both achieve the same? I recon you might have greater control with canvas, but is it easier to achieve the desired effects with animations or not? Or am I completely wrong about this?

  • sidra says:

    November 2, 2011

    Good Tutorials it will help

  • Beben Koben says:

    November 4, 2011

    awesome resource….thank you

  • Paul says:

    November 8, 2011

    Nice list of resources. thanks

  • PeHaa says:

    November 9, 2011

    Thanks for this list! I would love to add my tutorial to this list : http://pehaa.com/2011/08/postcard-from-paris-css3-keyframes-animations-in-use/

  • Tenman says:

    November 19, 2011

    wow..great list.
    no compromise. :)