Animation name

Identifies the keyframe animation that should be applied to the element by name.

Let’s see the syntax:

@keyframes zoom {
  /* declare animation actions here */
}

.animated {
  animation-name: zoom;
}

Animation duration

The animation-duration property defines the time frame in which the animation should take place. Both seconds (s) and milliseconds (ms) can be used to specify the time.

Let’s see the syntax:

.animated {
  animation-duration: 2s;
}

Animation timing function

Defines the timing mechanism that governs the acceleration and deceleration of the animation. Ease, linear, ease-in, ease-out, and ease-in-out are most commonly used values out there.

See the syntax:

.animated {
  /* 1 */ animation-timing-function: linear;
  /* 2 */ animation-timing-function: ease;
  /* 3 */ animation-timing-function: ease-in;
  /* 4 */ animation-timing-function: ease-out;
  /* 5 */ animation-timing-function: ease-in-out;
  /* 6 */ animation-timing-function: cubic-bezier(0, 0.4, 0.6, 1); /* (x1,y1,x2,y2) where x1 and x2 must be a number from 0 to 1 */
  /* 7 */ animation-timing-function: steps(24); /* (n) where n must be a natural number larger or equal to 1 */
}

Animation delay

To determine when an animation will begin, you can use the animation-delay property. By default transitions begin immediately (0s) if not specified otherwise. The time unit accepted by this property is both seconds (s) and milliseconds (ms).

See the syntax:

.animated {
  animation-delay: 250ms;
  animation-delay: 0.25ms;
}

Please note, that in contrast to the animation-duration property, you can specify a negative value for this. The timeline in your @keyframes will begin there if you specify a negative value. For instance, if you set animation-delay to -1s and your animation lasts for 2 seconds, it will begin at the halfway point of your timeline.

Animation play state

The animation-play-state property simply indicates whether or not the animation is in progress. Running and paused are the alternate values.

See the syntax:

.animated {
  animation-play-state: running;
  animation-play-state: paused;
}

Animation iteration count

The animation-iteration-count property specifies how many times the animation should loop. You can repeat something an infinite number of times or a specific number of times.

By default, this is 1, meaning that when the animation goes the end of your timeline, it will stop at the end. The set value cannot be a negative number.

See the syntax:

.animated {
  /* 1 */ animation-iteration-count: 7; /* will go 7 times */
  /* 2 */ animation-iteration-count: 6; /* will go 6 times */
  /* 3 */ animation-iteration-count: 5; /* will go 5 times */
  /* 4 */ animation-iteration-count: 4; /* will go 4 times */
  /* 5 */ animation-iteration-count: 3; /* will go 3 times */
  /* 6 */ animation-iteration-count: 2; /* will go 2 times */
  /* 7 */ animation-iteration-count: 1; /* will go 1 time */
}

Animation timing function

Defines the timing mechanism that governs the acceleration and deceleration of the animation. Ease, linear, ease-in, ease-out, and ease-in-out are most commonly used values out there.

See the syntax:

.animated {
  /* 1 */ animation-direction: normal;
  /* 2 */ animation-direction: reverse;
  /* 3 */ animation-direction: alternate;
  /* 4 */ animation-direction: alternate-reverse;
}

Animation fill mode

The animation-fill-mode property specifies the styling of the element both before and after the animation. None, forwards, backwards, and both are the possible values.

See the syntax:

.animated {
  /* 1 */ animation-fill-mode: none;
  /* 2 */ animation-fill-mode: forwards;
  /* 3 */ animation-fill-mode: backwords;
  /* 4 */ animation-fill-mode: both;
}

Ok let’s unpack what actually happened in above example. Animation comprises of 4 elements with different classes representing the different animation-fill-mode values. The animation we define is a simple sliding animation that moves the element from left to right.

• .none: The animation plays once and does not affect the styling of the element before or after the animation. It jumps back to its original state after the animation finishes.
• .forwards: The animation plays once, and after it finishes, the element retains the styles of the last keyframe. It stays at the final position defined in the animation.
• .backwards: The animation does not play initially and waits for the animation to start. Once the animation begins, it applies the styles from the first keyframe to the element.
• .both: The animation plays once and retains the styles of the first keyframe before the animation starts and the styles of the last keyframe after the animation finishes.

If needed refresh the page to see all animation effects.

Animation shorthand property

An animation shorthand property allows you to define the animation properties all at once, rather than having to define each one separately in following order:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

See the syntax and order of values in an example:

.animated {
  animation: rotate 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 2s infinite normal none running;
}

Performance issues

Before animating any property, you should be aware of possible performance issue on user’s end, especially when he/seh is using an old device.

However, there are safe combinations can be animated without such risk:

• transform: translate()
• transform: scale()
• transform: rotate()
• opacity

MDN Web Docs has a full list of CSS properties which can be animated.

Animatable properties tend to colors and numbers. An example a non-animatable property is background-image.