Jaime Quiroz

Front End Developer

Using CSS Animations On Your Project Today

Powered by CSS keyframes, animation is the relatively new and super awesome CSS property that allows us web designers to create cool jquery-like effects using only a couple of lines of CSS.

We have seen many people do awesome things with CSS animations in recent times but, for the most part, those have only been on an experimental basis.

Perhaps it has been the lack of widespread support for this new CSS feature that it has yet to catch on in “real world” web projects. However, there are safe areas in which we can implement CSS animation without compromising site functionality.

As Dan Cederholm pointed out in his excellent book CSS3 for Web Designers, we can definitely make use of new CSS awesomeness on the presentational layer in the user experience.

Visitors using an older browser won’t get to experience the animation but at the same time they won’t report a broken site.

One place you could use animations is on large content containers. With a combination of CSS transforms and opacity we can create a neat illusion of the page’s content falling into place on page load.

@-webkit-keyframes fadein {
   from {
      opacity: 0;
      -webkit-transform: scale(2);
   }
   to { opacity: 1;}
}
#wrap {
   -webkit-animation: fadein 0.5s;
}

View the demo (in a CSS3-ready browser, such as Safari or Chrome) »

This is a very simple and harmless implementation of a CSS animation. Any number of CSS combinations used within keyframes can yield all sorts of slick results. It can be easy to over-do the effects, but with some moderation we can start giving these everyday sites a bit more pop. Give it a try!

I strongly encourage all web designers to start making more use of unobtrusive CSS animations in your projects.

Tell us about your animation projects, challenges, and discoveries in comments!