@@ -375,8 +375,56 @@ requirement to iterate in reverse.
375375
376376## The 'animation-duration' property ## {#animation-duration}
377377
378- The 'animation-duration' property specifies the [=iteration duration=]
379- of the animation's associated [=animation effect=].
378+ <pre class='propdef'>
379+ Name: animation-duration
380+ Value: [ auto | <<time [0s,∞]>> ]#
381+ Initial: auto
382+ Applies to: all elements
383+ Inherited: no
384+ Percentages: N/A
385+ Computed value: list, each item either a time or the keyword '' animation-duration/auto''
386+ Animation type: not animatable
387+ Canonical order: per grammar
388+ </pre>
389+
390+ The 'animation-duration' property specifies the [=iteration duration=]
391+ of the animation's associated [=animation effect=].
392+
393+ <dl dfn-for=animation-duration dfn-type=value>
394+ <dt><dfn>auto</dfn>
395+ <dd>
396+ For time-driven animations,
397+ equivalent to '' 0s''.
398+
399+ For [=scroll-driven animations=],
400+ equivalent to the duration necessary to fill the timeline
401+ in consideration of 'animation-range', 'animation-delay', and 'animation-iteration-count'.
402+ See [[scroll-animations-1#finite-attachment]].
403+
404+ <dt><dfn><<time [0s,∞]>></dfn>
405+ <dd>
406+ For time-driven animations,
407+ specifies the length of time that an animation takes to complete one cycle.
408+ A negative <<time>> is invalid.
409+
410+ If the <<time>> is '' 0s'', like the initial value,
411+ the keyframes of the animation have no effect,
412+ but the animation itself still occurs instantaneously.
413+ Specifically, start and end events are fired;
414+ if 'animation-fill-mode' is set to '' backwards'' or '' both'',
415+ the first frame of the animation,
416+ as defined by 'animation-direction',
417+ will be displayed during the 'animation-delay'.
418+ After the 'animation-delay' the last frame of the animation,
419+ as defined by 'animation-direction',
420+ will be displayed if 'animation-fill-mode' is set to '' forwards'' or '' both''.
421+ If 'animation-fill-mode' is set to '' animation-fill-mode/none''
422+ the animation will have no visible effect.
423+
424+ For [=scroll-driven animations=],
425+ treated as '' animation-duration/auto''.
426+ </dl>
427+
380428
381429## The 'animation-timing-function' property ## {#animation-timing-function}
382430
@@ -575,7 +623,7 @@ the following effects:
575623: <dfn><<view()>></dfn>
576624:: Use the [=view progress timeline=] indicated by the given '' view()'' function.
577625 See [[scroll-animations-1#view-notation]].
578- </dl>
626+ </dl>
579627
580628
581629Issue: Make it easier to use 'animation-name' to select the timeline when
@@ -851,4 +899,4 @@ console.log(anim.playState); // Should be 'running'.
851899 <li>
852900 Requirements on pending style changes are described.
853901 </li>
854- </ul>
902+ </ul>
0 commit comments