Every CSS Animation Property Explained

Common Animation Properties

CSS animations allow developers to create smooth transitions and effects without relying on JavaScript. By understanding the various animation properties available, you can bring web elements to life in a controlled and efficient manner. Let's dive into each CSS animation property and how it works.

1. animation

The animation shorthand property is a concise way to define all animation-related properties in a single declaration. It follows this syntax:

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

Example:

.box {
    animation: slide-in 2s ease-in-out 1s infinite alternate forwards;
}

2. animation-name

Defines the name of the @keyframes rule to be applied.

animation-name: slide-in;

3. animation-duration

Specifies how long the animation takes to complete one cycle.

animation-duration: 2s;

4. animation-timing-function

Determines the speed curve of the animation.

** Common Values:**

  • linear: constant speed
  • ease: slow start, fast middle, slow end (default)
  • ease-in: slow start
  • ease-out: slow end
  • ease-in-out: slow start and end
  • cubic-bezier(x1, y1, x2, y2): custom timing function
animation-timing-function: ease-in-out;

5. animation-delay

Specifies when the animation should start.

animation-delay: 1s;

6. animation-iteration-count

Defines the number of times the animation should repeat.

animation-iteration-count: infinite;

7. animation-direction

Determines whether the animation should play forward, backward, or alternate. ** Values: **

  • normal: default, plays forward
  • reverse: plays backward
  • alternate: plays forward, then backward
  • alternate-reverse: plays backward, then forward
animation-direction: alternate;

8. animation-fill-mode

Specifies how styles are applied before and after the animation. ** Values: **

  • none: default, no styles are applied
  • forwards: retains the styles of the last keyframe (100% or to) after the animation ends
  • backwards: applies the styles of the first keyframe before the animation
  • both: combines forwards and backwards behavior, meaning it retains styles from the first keyframe before starting and keeps the last keyframe's styles after finishing.

forwards vs both

The key difference is:

  • forwards: The element retains the styles of the final keyframe (100% or to) after the animation completes, but before it starts, it follows the element’s default CSS styles.

  • both: The element adopts the styles from the first keyframe (0% or from) before the animation starts and keeps the final keyframe’s styles after the animation ends.

Example:

@keyframes fade-in-out {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.box-forwards {
    animation: fade-in-out 3s ease-in-out;
    animation-fill-mode: forwards;
}
.box-both {
    animation: fade-in-out 3s ease-in-out;
    animation-fill-mode: both;
}

In this example:

  • .box-forwards starts with the default opacity (not necessarily 0) and remains at opacity: 1 after animation ends.

  • .box-both starts at opacity: 0 before the animation begins and retains opacity: 1 after completion.

9. animation-play-state

Controls whether the animation is running or paused. When set to paused, the animation stops at its current frame until resumed. When set to running, the animation continues playing from where it left off. ** Values: **

  • running: default, animation is playing
  • paused: animation is paused
.box {
    animation: fade-in 3s linear infinite;
    animation-play-state: paused;
}
.box:hover {
    animation-play-state: running;
}

Tranform properties

CSS animations often work alongside transform properties to create movement and transformations. These properties allow for translating, scaling, rotating, and skewing elements. ** Common Transform Functions: **

  • translate(x, y): Moves an element along the X and Y axes.

  • scale(x, y): Resizes an element along the X and Y axes.

  • rotate(angle): Rotates an element.

  • skew(x-angle, y-angle): Skews an element along the X and Y axes.

Transition Properties

CSS transitions allow for smooth changes between property values over a specified duration. They are often used in conjunction with hover effects or JavaScript events to create dynamic interactions. Here are the key properties related to CSS transitions:

1. transition

The transition shorthand property is a concise way to define all transition-related properties in a single declaration. It follows this syntax:

transition: property duration timing-function delay;

2. transition-property

Specifies which CSS properties should have transition effects. You can target specific properties or use all for every animatable property.

Values:

  • Specific property names: width, color, transform, etc.
  • all: applies to all animatable properties
  • none: no properties will transition
transition-property: background-color;

3. transition-duration

Specifies how long the transition takes to complete. The value is in seconds (s) or milliseconds (ms).

transition-duration: 0.5s;

4. transition-timing-function

Specifies the speed curve of the transition. It can take the same values as animation-timing-function.

transition-timing-function: ease-in-out;

5. transition-delay

Specifies when the transition should start.

transition-delay: 0.2s;