animation-timeline

Definition

The animation-timeline property in CSS is used to specify the timeline on which an animation should run.

Examples

.element1 {
  animation-name: myAnimation1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timeline: myTimeline;
}

.element2 {
  animation-name: myAnimation2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timeline: myTimeline;
}

@keyframes myAnimation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes myAnimation2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

@timeline myTimeline {
  /* Define the timeline here */
  animation-duration: 2s;
}

In this example, the myAnimation1 and myAnimation2 animations are both set to run on the myTimeline timeline, which has a duration of 2 seconds. This means that both animations will start and end at the same time, and will be synchronized with each other.

Keep in mind that the animation-timeline property is an experimental feature and may not work as intended in all browsers. It is not recommended for use in production environments.

Values

Best Practices

• Use the animation-timeline property in conjunction with the animation property to specify the duration and timing of an animation.
• Use the animation-timeline property to specify the duration of the animation in seconds or milliseconds.
• Use the infinite value to indicate that the animation should repeat indefinitely.
• Use the alternate value to indicate that the animation should alternate between playing forwards and backwards.
• Use the normal, reverse, or a numeric value to specify the number of times the animation should repeat.
• Use the initial value to set the property to its default value, and the inherit value to inherit the property value from the parent element.
• Use the animation-timeline property in combination with other animation properties, such as animation-delay and animation-timing-function, to fine-tune the timing and behavior of the animation.

Browser Compatibility

The animation-timeline property is widely supported by modern web browsers. It is supported in all current versions of major browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, and Opera.

However, it is worth noting that older versions of Internet Explorer do not support the animation-timeline property. If you need to support older browsers, you may need to use other techniques, such as JavaScript or a polyfill, to achieve similar effects.