Animation Shorthand

A single movement of a scarab described with separate properties can take as many as eight lines: name, duration, pace, delay, repetitions, direction, fill and state. With several animations, the stylesheet grows like a pile of scrolls in a scriptorium. In CSS, we can use shorthand to define multiple animation properties at once. The animation shorthand allows you to define different aspects of an animation in a single line, which makes the code more concise and readable.

The animation Property

The animation property is a shorthand that combines the following properties:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Syntax

Below is the syntax of the animation property, with an example that uses all eight parts at once:

1.animation-example {
2  animation: slide 3s ease-in 1s 2 alternate both paused;
3}

This shorthand can be broken down into its corresponding parts:

• slide: animation name (corresponds to animation-name).
• 3s: animation duration (corresponds to animation-duration).
• ease-in: animation timing function (corresponds to animation-timing-function).
• 1s: animation delay (corresponds to animation-delay).
• 2: number of animation repetitions (corresponds to animation-iteration-count).
• alternate: animation direction (corresponds to animation-direction).
• both: animation fill mode (corresponds to animation-fill-mode).
• paused: animation play state (corresponds to animation-play-state).

Order of values

The browser recognizes most values by their type, but two rules are iron-clad. The first time value is always the duration, and the second one is the delay. The animation name should not sound like a keyword, for example infinite, because the browser will treat it as that keyword. Not all properties need to be defined and you can omit some of them, but the omitted ones return to their default values. Hence the classic trap: animation: slide without a duration lasts 0s and shows nothing. My advice: always write the values in the order of the list above, as in the most common form, animation: pulse 2s ease-in-out infinite.

Fill mode

The both part of the example is the fill mode, which says what the element shows before the start and after the end of the animation. The default none keeps the normal styles, forwards holds the element in the last frame, backwards shows the first frame already during the delay, and both combines the two behaviours:

1@keyframes rise {
2  from { opacity: 0; transform: translateY(40px); }
3  to { opacity: 1; transform: translateY(0); }
4}
5
6.scarab {
7  animation: rise 2s ease-out 1s both;
8}

For the first second, the scarab is invisible and lowered, because both acts like backwards. After two seconds of movement it stays in the to frame, because it acts like forwards. With none, it would flash before the start, and after the end it would return to its normal styles.

Pausing without a reset

The paused part belongs to animation-play-state, which lets you pause an animation. In the syntax example the animation starts paused, but more often the pause is switched on when the cursor hovers over the element:

1.scarab:hover {
2  animation-play-state: paused;
3}

The animation freezes in the current frame, and when the cursor leaves, it continues from the same spot instead of starting over.

Example

Here is a more detailed example of the animation shorthand, this time together with the @keyframes rule:

1@keyframes slide {
2  0% { transform: translateX(0); }
3  100% { transform: translateX(100px); }
4}
5
6.slide-element {
7  animation: slide 2s ease-in-out 0s infinite alternate;
8}

The element with the slide-element class will move 100 pixels to the right and back, forever, with an ease-in-out effect. The 0s delay can be omitted, because it is the default value.

Several animations at once

One element can have several animations at the same time. You separate them with commas, and each gets its own set of values:

1.eye-of-horus {
2  animation: fadeIn 2s ease, slide 1s linear;
3}

Both animations start together, each following its own @keyframes and its own timing. When two of them change the same property, for example transform, the one further down the list wins.

When an animation does not start

When nothing happens, check step by step: whether the @keyframes rule exists, whether the name in animation matches it letter for letter, whether the duration is greater than zero, and whether the element is visible, because with display: none the animation does not run at all. Finally, look into the animations panel in the browser's developer tools.

Animation shorthands in CSS let you define many animation properties in a single line, which makes the code easier to manage and read. Using the animation property can significantly speed up the creation of complex animations while keeping the code clear. In the next lessons you will climb higher up the ladder: from simple animations with from and to, through percentage steps and several properties at once, to sequences with delays and 3D scenes with perspective.

In the editor below, a night sky above the pyramids is waiting. Uncomment the animation: twinkle 1.5s ease-in-out infinite shorthand on the stars, define @keyframes twinkle following the hints in the comments, and give each star a different delay.

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #0a0a2e, #1a1a4e, #0d0d3a);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.night-sky {
18  text-align: center;
19  padding: 20px;
20  width: 100%;
21  max-width: 500px;
22}
23
24h2 {
25  margin-bottom: 30px;
26  color: #f0e68c;
27}
28
29.stars-container {
30  position: relative;
31  height: 200px;
32}
33
34.star {
35  position: absolute;
36  font-size: 24px;
37  color: #fffacd;
38  /* Add the twinkle animation to every star */
39  /* animation: twinkle 1.5s ease-in-out infinite; */
40}
41
42.star-1 { top: 20px; left: 10%; }
43.star-2 { top: 50px; left: 60%; }
44.star-3 { top: 10px; left: 40%; }
45.star-4 { top: 80px; left: 80%; }
46.star-5 { top: 60px; left: 25%; }
47
48/* Add a different animation-delay for each star */
49/* .star-1 { animation-delay: 0s; } */
50/* .star-2 { animation-delay: 0.3s; } */
51/* .star-3 { animation-delay: 0.6s; } */
52/* .star-4 { animation-delay: 0.9s; } */
53/* .star-5 { animation-delay: 1.2s; } */
54
55/* Define @keyframes twinkle */
56/* 0%, 100% { opacity: 0.3; transform: scale(0.8); } */
57/* 50% { opacity: 1; transform: scale(1.2); } */
58
59.pyramids-silhouette {
60  font-size: 48px;
61  color: #2d1b4e;
62  letter-spacing: 20px;
63  margin-top: 20px;
64}
65
66.hint {
67  margin-top: 20px;
68  color: #aaa;
69  font-style: italic;
70}

Remember: the animation shorthand is the pharaoh's cartouche, a single frame that holds a whole name, as long as the signs stand in a readable order.