@@ -375,8 +375,56 @@ requirement to iterate in reverse.
375
375
376
376
## The 'animation-duration' property ## {#animation-duration}
377
377
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
+
380
428
381
429
## The 'animation-timing-function' property ## {#animation-timing-function}
382
430
@@ -575,7 +623,7 @@ the following effects:
575
623
: <dfn><<view()>></dfn>
576
624
:: Use the [=view progress timeline=] indicated by the given '' view()'' function.
577
625
See [[scroll-animations-1#view-notation]].
578
- </dl>
626
+ </dl>
579
627
580
628
581
629
Issue: Make it easier to use 'animation-name' to select the timeline when
@@ -851,4 +899,4 @@ console.log(anim.playState); // Should be 'running'.
851
899
<li>
852
900
Requirements on pending style changes are described.
853
901
</li>
854
- </ul>
902
+ </ul>
0 commit comments