8000 [css-animations-2] Add 'auto' as initial value of 'animation-duration… · w3c/csswg-drafts@2a7cc4b · GitHub
[go: up one dir, main page]

Skip to content

Commit 2a7cc4b

Browse files
committed
[css-animations-2] Add 'auto' as initial value of 'animation-duration'. #6530
1 parent 26a6269 commit 2a7cc4b

File tree

1 file changed

+52
-4
lines changed

1 file changed

+52
-4
lines changed

css-animations-2/Overview.bs

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -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
581629
Issue: 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

Comments
 (0)
0