Animations are practically everywhere on the internet now. From scrolling animations on pragraphs and images, to smooth transitions between pages, they make users' experience on the website more interesting, smooth, and appealing. Today, we'll learn about the powerful CSS animation and how to use it.

@keyframes myAnimation {
  0% {background-color: red;}
  50% {background-color: green;}
  100% {background-color: blue;}
}

To have a CSS animation, we have to "define" the animation first: its name, how it's done, what styles should be applied, and the timing. That's what the @keyframes rule is for. Its syntax is similar to a selector, except the selector is @keyframes followed by the animation name. In this case, it's called "myAnimation". We have a couple of sub-sections with different percentages within the keyframes. These define the actual process of the animation. Every style rule in the 0% section applies to the element at the start of the animation. The styles in the 50% section apply to the element at the middle of the animation. The styles defined in 100% apply to the element at the end of the animation. You can use any percentage for any percent of the progress of the animation. When the animation is run, the browser calculates the percentages and apply a smooth transition from one percentage section to another, creating an animation with more details and timing than what a normal "transition" could do.

.element {animation: myAnimation 2s ease 1s infinite alternate;}

After defining the animation, we have to call it to actually apply it to an element and run it. To do this, add the "animation" property to the element you want to animate. There are a couple of values above. The first value, myAnimation, is the name of the animation so the browser knows which animation you want to apply. The second value, 2s, defines the duration of the animation from start to finish. The third value, ease, is similar to CSS transition, sets the timing of the animation to smooth out. The fourth value, 1s, tells the animation to delay for 1 second before starting. The fifth value, inifinite, tells the browser to repeat the animation indefinitely. The last value, alternate, tells the browser to alternate the order of the animation when repeating. Meaning that the original end of the animation becomes the start, and vice versa. With these values defined, you can create an animation like the example below:

[LAB]

As you can see from the example above, the element starts at red, then turns green through the middle of the animation, then turns blue. This whole sequence alternates in order inifinitely with a one second pause in between because of the animation delay, infinite and alternate values. CSS transition and animation may seem similar, but transition only transitions between two different sets of styles, while animation is a bit more complicated but it can transition from one set of rules to another, to another, and so on. For example, you can animate an element to turn from red, green, to blue, but you can only transition the element from red to blue. It's a lot more customizable and powerful. You can also add as many sub-sections within the keyframes as you like to make the animation as precise and detailed as possible. Use transitions for simple effects, and use animations for complex results and styles. Note that you can apply almost any properties to animations, not only background colors. Have fun exploring and creating animations!

Learn CSS

Meeting CSS

Colors & Borders

Adding Space

Text & Content

Laying Out Stuff

Useful CSS Tips

Creating Animations

Responsive Design