For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/api/css/properties/animation-duration.md.
Lynx
  • English

      • animation-duration

      Introduction

      animation-duration property specifies the length of time that an animation should take to complete one cycle.

      Examples

      css-apisrc/animation-duration/App.tsx
      Code
      Preview

      Syntax

      /* Single animation */
animation-duration: 6s
animation-duration: 120ms

/* Multiple animations */
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

      Caution

      Caution
      • Lynx defaults to requiring units for duration and delay. Writing without units may result in undefined behavior.

      Formal definition

      Initial value0s
      Applies toall elements
      Inheritedno
      Animatableno

      Formal syntax

      /* default value: 0s */
animation-duration: <time>;

      See also

      Compatibility

      LCD tables only load in the browser

      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.