You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-animations/Overview.bs
+20-2Lines changed: 20 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -363,6 +363,24 @@ Timing functions for keyframes</h3>
363
363
<h3 id="animation-name">
364
364
The 'animation-name' property</h3>
365
365
366
+
The 'animation-name' property defines a list of animations that apply. Each name is used to select
367
+
the keyframe at-rule that provides the property values for the animation. If the name does not match
368
+
any keyframe at-rule, there are no properties to be animated and the animation will not execute.
369
+
Furthermore, if the animation name is <code>none</code> then there will be no animation. This can be
370
+
used to override any animations coming from the cascade. If multiple animations are attempting to
371
+
modify the same property, then the animation closest to the end of the list of names wins.
372
+
373
+
Each animation listed by name should have a corresponding value for the other animation properties
374
+
listed below. If the lists of values for the other animation properties do not have the same length,
375
+
the length of the 'animation-name' list determines the number of items in each list examined when
376
+
starting animations. The lists are matched up from the first value: excess values at the end are not
377
+
used. If one of the other properties doesn't have enough comma-separated values to match the number of
378
+
values of 'animation-name', the UA must calculate its used value by repeating the list of values until
379
+
there are enough. This truncation or repetition does not affect the computed value.
380
+
381
+
Note: This is analogous to the behavior of the ‘background-*’properties, with ‘background-image’ analogous
382
+
to 'animation-name'.
383
+
366
384
<pre class='propdef'>
367
385
Name: animation-name
368
386
Value: <<single-animation-name>>#
@@ -1026,7 +1044,7 @@ Working Group Resolutions that are pending editing</h2>
1026
1044
<ul>
1027
1045
<li>Change the animation properties to be dynamically changeable
1028
1046
<li>@keyframes can be dynamically changed
1029
-
<li>When you encounter duplicate animations names, last one wins.
1047
+
<li><del>When you encounter duplicate animations names, last one wins.</del>
1030
1048
<li>Make *animations* transition *all* properties. Unless otherwise specified, discrete properties take their starting values below 50% timing function progress, and end values above 50% timing function progress.
1031
1049
</ul>
1032
1050
<li>2012-12-12 minutes and intermediate comments <del>and 2012-12-19 minutes</del>
@@ -1035,7 +1053,7 @@ Working Group Resolutions that are pending editing</h2>
1035
1053
<li><del>When an element changes from display:none to display: non-none, animations start immediately (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14785">Bug</a>)</del>
1036
1054
<li>An initially-paused animation is still started (fires start events etc.) (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14774">Bug</a>)
1037
1055
<li>Animations can be paused during their delay phase, which freezes the remaining delay to be applied after it unpauses (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14774">Bug</a>)
1038
-
<li>animation-play-state has the same list behavior as the other animaton properties, matching the length of animation-name (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14786">Bug</a>)
1056
+
<li><del>animation-play-state has the same list behavior as the other animaton properties, matching the length of animation-name (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14786">Bug</a>)</del>
The <aclass=propertydata-link-type=propdeschref=#propdef-animation-nametitle=animation-name>animation-name</a> property</span><aclass=self-linkhref=#animation-name></a></h3>
496
496
497
+
<p> The <aclass=propertydata-link-type=propdeschref=#propdef-animation-nametitle=animation-name>animation-name</a> property defines a list of animations that apply. Each name is used to select
498
+
the keyframe at-rule that provides the property values for the animation. If the name does not match
499
+
any keyframe at-rule, there are no properties to be animated and the animation will not execute.
500
+
Furthermore, if the animation name is <code>none</code> then there will be no animation. This can be
501
+
used to override any animations coming from the cascade. If multiple animations are attempting to
502
+
modify the same property, then the animation closest to the end of the list of names wins.
503
+
504
+
<p> Each animation listed by name should have a corresponding value for the other animation properties
505
+
listed below. If the lists of values for the other animation properties do not have the same length,
506
+
the length of the <aclass=propertydata-link-type=propdeschref=#propdef-animation-nametitle=animation-name>animation-name</a> list determines the number of items in each list examined when
507
+
starting animations. The lists are matched up from the first value: excess values at the end are not
508
+
used. If one of the other properties doesn’t have enough comma-separated values to match the number of
509
+
values of <aclass=propertydata-link-type=propdeschref=#propdef-animation-nametitle=animation-name>animation-name</a>, the UA must calculate its used value by repeating the list of values until
510
+
there are enough. This truncation or repetition does not affect the computed value.
511
+
512
+
<pclass=note> Note: This is analogous to the behavior of the ‘background-*’properties, with ‘background-image’ analogous
513
+
to <aclass=propertydata-link-type=propdeschref=#propdef-animation-nametitle=animation-name>animation-name</a>.
<li>Change the animation properties to be dynamically changeable
1043
1061
<li>@keyframes can be dynamically changed
1044
-
<li>When you encounter duplicate animations names, last one wins.
1062
+
<li><del>When you encounter duplicate animations names, last one wins.</del>
1045
1063
<li>Make *animations* transition *all* properties. Unless otherwise specified, discrete properties take their starting values below 50% timing function progress, and end values above 50% timing function progress.
1046
1064
</ul>
1047
1065
<li>2012-12-12 minutes and intermediate comments <del>and 2012-12-19 minutes</del>
<li><del>When an element changes from display:none to display: non-none, animations start immediately (<ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14785">Bug</a>)</del>
1051
1069
<li>An initially-paused animation is still started (fires start events etc.) (<ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14774">Bug</a>)
1052
1070
<li>Animations can be paused during their delay phase, which freezes the remaining delay to be applied after it unpauses (<ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14774">Bug</a>)
1053
-
<li>animation-play-state has the same list behavior as the other animaton properties, matching the length of animation-name (<ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14786">Bug</a>)
1071
+
<li><del>animation-play-state has the same list behavior as the other animaton properties, matching the length of animation-name (<ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14786">Bug</a>)</del>
0 commit comments