What Are CSS Animation Longhand Properties?

CSS animation longhand properties are individual properties used to control specific aspects of a CSS animation, offering granular control over its behavior, duration, timing, and more. Unlike the animation shorthand property, which combines multiple values, longhand properties allow you to set each animation characteristic separately.

These properties are fundamental building blocks for defining how HTML elements transition between different states over time. By manipulating these properties, developers can create complex and dynamic visual effects on web pages.

Key CSS Animation Longhand Properties

Here's a breakdown of the core longhand properties used in CSS animations:

• animation-name: Specifies the name of the @keyframes rule that defines the animation's sequence of styles.
• animation-duration: Sets the length of time an animation takes to complete one cycle (e.g., 2s, 500ms).
• animation-timing-function: Defines how the animation progresses over time, controlling its speed curve (e.g., ease, linear, cubic-bezier).
• animation-delay: Specifies a delay before the animation starts playing (e.g., 1s, -0.5s).
• animation-iteration-count: Determines how many times an animation should repeat. It can be a number (2, 5) or infinite.
• animation-direction: Configures whether the animation plays forwards (normal), backwards (reverse), or alternates between forwards and backwards cycles (alternate, alternate-reverse).
• animation-fill-mode: Specifies what styles an element should retain before and after the animation plays (e.g., none, forwards, backwards, both).
• animation-play-state: Allows you to pause or resume an animation (running, paused).

These properties are typically used in conjunction with the @keyframes rule, which defines the steps or stages of the animation.

Using Multiple Values with Longhand Properties

A powerful feature highlighted by the reference is that the CSS animation longhand properties can accept multiple values, separated by commas. This is incredibly useful when you want to apply multiple animations to a single element simultaneously using the animation-name property.

When you list multiple animation-name values, you can provide a corresponding value for each of the other longhand properties, also separated by commas. The values for each longhand property will then be applied in order to the respective animation names listed.

Example:

.my-element {
  animation-name: slide-in, fade-out;
  animation-duration: 1s, 2s;
  animation-timing-function: ease-out, linear;
  animation-delay: 0s, 1s;
  animation-iteration-count: 1, infinite;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fade-out {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

In this example:

• The slide-in animation has a duration of 1s, a timing-function of ease-out, no delay (0s), and runs 1 time.
• The fade-out animation, listed second, has a duration of 2s, a timing-function of linear, a delay of 1s, and runs infinite times.

This feature provides fine-grained control when layering effects.

Summary Table

Using longhand properties provides clarity and control, especially when managing multiple animations or debugging complex sequences.