I’ve been learning about CSS3 animations and decided to try animating a train:

This animation is entirely created by CSS which has some really awesome implications. First off, it is automatically optimized by the browser giving it smoother transitions and making it less likely to get choppy on a slower machine. It is also really light weight. If it wasn't for the vendor prefixes currently required for it to run in most browsers this whole animation would take 6 lines of HTML and less than 20 lines of CSS. This particular animation isn't interactive, but they can easily be added to :hover and :focus states for great interactive flourishes. At the moment I don't know of a good way to essentially play and pause an animation like this without JavaScript, but it is still incredibly useful for adding small visual responses to viewer actions on a site.

At the moment I don't know of any good way to implement this in IE versions older than IE 10, though it is supported in 10, so that is exciting.

Basic code for CSS Animations

Before you get to animating your images, you need to style them in with CSS so that they stack on top of each other. In this case I set `position:relative;` on the containing div and `position:absolute;` on all the other images I stacked on top of it. Once you have your images styled the way you want the code structure for a css animation looks like this:


#smoke {
    z-index: 10;
    opacity: 0;
}
#smoke {
    animation:puff 4s infinite ease-in-out;
}
@keyframes puff {
    0% {opacity:0;}
    60% {opacity:.5;}
    100% {opacity:0; transform: translate(-40%, -15%) rotate(-15deg);}
}

The first rule shows the original state for the smoke image. The second rule activates the animation defined in the third rule, giving it length, iteration, and timing-function. The third rule defines the changes that take place during the animation at different points. You can define the different stages from 0% to 100%. I left out the vendor prefixes to save space here, but adding them in isn't too tough once you have it set up correctly.