Adding an Animation

In this lesson you'll learn the basics of CSS animation so you can add motion without using JavaScript. This is for people searching "CSS how to make an animation" or "@keyframes usage."

Specifying "the states along the way" with @keyframes and applying it to an element with the animation property lets you add motion. This can give a page a lighter, livelier impression, and it's often used for loading indicators or effects that draw attention to a button.

The sample code specifies positions at three points — 0%, 50%, and 100% — inside @keyframes bounce, and applies animation: bounce 1s infinite; to .ball to create a bouncing motion. infinite means "repeat forever."

A common beginner stumbling block is that if the name defined in @keyframes doesn't match the name specified in the animation property, the animation won't run. First, check for a typo in the spelling of the name. You can specify as many change points as you like between 0% and 100%.

You can animate almost any property — color, size, position, and more — and it's a big advantage that you can build motion entirely with CSS, without JavaScript. Even on real websites, this is often used for subtle effects, like a gentle fade-in when a page loads.