Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

4. Keyframe Animations

This chapter outlines the basics of keyframe animations, which give you more fine-grained control over the various stages of an animation than do transitions. You will learn about the many properties you can use with keyframe animations by applying them to a simple animation: an element cycling through various shades of gray. You will also create a bouncing spring and a floating balloon in order to demonstrate the effects that can be achieved through the use of keyframe animations.

Introduction to Keyframe Animations

Keyframe animations enable you to outline multiple key points, or “keyframes,” within an animation. You can use them in the same way you used transitions in Chapter 3, “Animating Elements with Transitions