Animation – A simulation of movement created by displaying a series of pictures, or frames. Cartoons on television is one example of animation. Animation on computers is one of the chief ingredients of multimedia presentations. There are many software applications that enable you to create animations that you can display on a computer monitor. In this article we provide you references for CSS3 Animation without using jQuery or JavaScript. We hope you find these resources and overview useful.

What is CSS Animation?

CSS animations make it possible to animate transitions from one CSS style configuration to another.

CSS animations are made up of two basic building blocks.

1. Keyframes – define the stages and styles of the animation.
2. Animation Properties – assign the @keyframes to a specific CSS element and define how it is animated.

The Article CSS Animation for Beginners covers following important elements in creating CSS Animation with code.

• Animation Property Shorthand
• Note About Prefixes
• Additional Animation Properties
• Animation-timing-function
• Animation-Delay
• Animation-iteration-count
• Animation-direction
• Animation-fill-mode
• Animation-play-state
• Multiple Animations
• Go Forth and Animate

Advantages to CSS animations over traditional script-driven animation techniques

There are three key advantages :

1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.

The MDN web docs article, Using CSS animations, has very good examples and provides CSS code for animation. For those just getting started, we encourage you to read that article in depth.

Other Resources

1. Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
2. A cross-browser library of CSS animations. As easy to use as an easy thing.
3. Creative blog’s 18 top CSS animation examples.
4. The Top 9 Animation Libraries for UI Designers

Just for fun, we also recently encountered this CSS pun site. Very creative approach (and yes, CSS animations are employed in some of the examples). We thought those teaching aspiring web professionals might be able to use many of these examples.

We always look forward to your comments and feedback (whether you are a member or not).

If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. We even offer a specific class on CSS animation. As a member, your first class is free.