/

A Tutorial on CSS Animations

A Tutorial on CSS Animations

CSS Animations are a powerful tool for creating visually appealing animations with more complexity than CSS Transitions. By using the animation property, you can apply animations to elements on your web page.

Introduction

To apply an animation to an element, use the animation property. For example:

1
2
3
.container {
 animation: spin 10s linear infinite;
}

In this example, the animation is named “spin” and is defined separately using keyframes. The animation is set to last for 10 seconds, have a linear timing function (no acceleration or speed changes), and repeat infinitely.

To define how the animation works, you need to use keyframes. Here’s an example of an animation that rotates an item:

1
2
3
4
5
6
7
8
@keyframes spin {
 0% {
 transform: rotateZ(0);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

Inside the @keyframes definition, you can add as many intermediate waypoints as you want. In this case, we instruct CSS to rotate the Z axis of the element from 0 to 360 degrees, completing a full rotation.

You can use any CSS transform property within the keyframes.

A CSS Animations Example

Let’s say we want to create four circles with a common starting point, each 90 degrees apart from each other.

1
2
3
4
5
6
<div class="container">
 <div class="circle one"></div>
 <div class="circle two"></div>
 <div class="circle three"></div>
 <div class="circle four"></div>
</div>

To make the circles rotate together, we apply an animation to the container:

1
2
3
4
5
6
7
8
9
10
11
12
@keyframes spin {
 0% {
 transform: rotateZ(0);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

.container {
 animation: spin 10s linear infinite;
}

You can see the example on Glitch.

You can also add more keyframes to create more complex animations:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes spin {
 0% {
 transform: rotateZ(0);
 }
 25% {
 transform: rotateZ(30deg);
 }
 50% {
 transform: rotateZ(270deg);
 }
 75% {
 transform: rotateZ(180deg);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

Check out the example on Glitch.

The CSS Animation Properties

CSS animations offer a variety of properties that you can tweak:

Property Description
animation-name Specifies the name of the animation, referencing an animation created using @keyframes
animation-duration Sets the duration of the animation, in seconds
animation-timing-function Defines the timing function used by the animation (common values: linear, ease)
animation-delay Optional delay before starting the animation, in seconds
animation-iteration-count Determines how many times the animation should be performed. Can be a number or infinite
animation-direction Specifies the direction of the animation. Can be normal, reverse, alternate, or alternate-reverse
animation-fill-mode Defines how the element should be styled after the animation ends. Options are none, backwards, forwards, both
animation-play-state Sets whether the animation is running or paused. Values can be running or paused

The animation property is a shorthand for all these properties. The order should be: name duration timing-function delay iteration-count direction fill-mode play-state.

For example:

1
2
3
.container {
 animation: spin 10s linear infinite;
}

JavaScript Events for CSS Animations

Using JavaScript, you can listen for the following events related to CSS animations:

  • animationstart
  • animationend
  • animationiteration

Keep in mind that if the animation starts on page load, your JavaScript code will only execute after the CSS has been processed, meaning that the animation has already started and you cannot intercept the animationstart event.

Here’s how you can listen for these events:

1
2
3
4
5
6
7
8
9
10
11
12
13
const container = document.querySelector('.container');

container.addEventListener('animationstart', (e) => {
 // do something
}, false);

container.addEventListener('animationend', (e) => {
 // do something
}, false);

container.addEventListener('animationiteration', (e) => {
 // do something
}, false);

Properties You Can Animate with CSS Animations

You can animate a wide range of properties using CSS animations. The list includes:

(background, background-color, background-position, background-size, border, border-color, border-width, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-left, border-left-color, border-left-width, border-radius, border-right, border-right-color, border-right-width, border-spacing, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-width, bottom, box-shadow, caret-color, clip, color, column-count, column-gap, column-rule, column-rule-color, column-rule-width, column-width, columns, content, filter, flex, flex-basis, flex-grow, flex-shrink, font, font-size, font-size-adjust, font-stretch, font-weight, grid-area, grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-column-end, grid-column-gap, grid-column-start, grid-column, grid-gap, grid-row-end, grid-row-gap, grid-row-start, grid-row, grid-template-areas, grid-template-columns, grid-template-rows, grid-template, grid, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, order, outline, outline-color, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, quotes, right, tab-size, text-decoration, text-decoration-color, text-indent, text-shadow, top, transform, vertical-align, visibility, width, word-spacing, z-index).

Feel free to explore and experiment with different animations!

Tags: CSS, Animations, Keyframes, Transforms, Events