animation-duration

Definition

In CSS, the animation-duration property specifies the length of time that an animation should take to complete one cycle. It is used in conjunction with the animation-name property, which specifies the name of the @keyframes at-rule that defines the animation's keyframes, and the animation property, which is a shorthand property for setting all the animation properties in one declaration.

Examples

.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

In this example, the animation-name property is set to "bounce", which refers to the @keyframes rule defined at the bottom of the CSS. The animation-duration property is set to 1 second, which means that it will take 1 second for the animation to complete one cycle. The animation-iteration-count property is set to infinite, which means that the animation will repeat indefinitely. The @keyframes rule defines the three keyframes of the animation. At the beginning of the animation (0%), the ball is at the bottom of the screen (translateY(0)). At the halfway point (50%), the ball is at the top of the screen (translateY(-100px)). At the end of the animation (100%), the ball returns to the bottom of the screen (translateY(0)). This creates the illusion of the ball bouncing up and down.

Values

The value of the animation-duration property can be a time value in seconds (s) or milliseconds (ms). For example, the following code defines an animation that takes 2 seconds to complete one cycle:

.example {
  animation-duration: 2s;
}

Best Practices

• Make sure the duration of the animation is appropriate for the context in which it is used. An animation that takes too long may be frustrating for users, while an animation that is too short may not be noticed.
• Avoid using excessively long or short animation durations. Extremely long durations can make the animation feel sluggish, while extremely short durations can make the animation feel jarring.
• Consider the performance implications of using long animation durations. Animations can be resource-intensive, and using too many long-duration animations on a single page may negatively impact the performance of the page.
• Use the animation-timing-function property to fine-tune the timing of the animation. This property allows you to specify the rate of change of the animation over time, which can help make the animation feel more natural.
• Test the animation on a variety of devices and browsers to ensure that it works as intended. Different devices and browsers may have different performance characteristics, so it's important to test the animation to ensure that it looks and feels smooth on all platforms.

Browser Compatibility