|
21 | 21 | "rationale": "set", |
22 | 22 | "steps": [ |
23 | 23 | { |
24 | | - "html": "<p><strong>Set Defaults:</strong></p>\n <ul>\n <li data-md=\"\">\n <p>Let <var>default timing function</var> be the corresponding <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#computed-value\" id=\"ref-for-computed-value\">computed value</a> of <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function\" id=\"ref-for-propdef-animation-timing-function①\">animation-timing-function</a> on <var>element</var>.</p>\n </li><li data-md=\"\">\n <p>Let <var>default composite</var> be the corresponding <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#computed-value\" id=\"ref-for-computed-value①\">computed value</a> of <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-2/#propdef-animation-composition\" id=\"ref-for-propdef-animation-composition\">animation-composition</a> on <var>element</var>.</p>\n </li><li data-md=\"\">\n <p>Let <var>keyframes</var> be an empty sequence of <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/web-animations-1/#keyframe\" id=\"ref-for-keyframe①\">keyframe</a> objects,\neach possessing a <var>keyframe offset</var>, <var>keyframe timing function</var>, <var>keyframe composite</var>,\nand <var>keyframe values</var>.</p>\n </li><li data-md=\"\">\n <p>Let <var>animated properties</var> be an empty set of CSS property names.</p>\n </li></ul>" |
| 24 | + "html": "<p><strong>Set Defaults:</strong></p>\n <ul>\n <li data-md=\"\">\n <p>Let <var>default timing function</var> be the corresponding <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#computed-value\" id=\"ref-for-computed-value\">computed value</a> of <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function\" id=\"ref-for-propdef-animation-timing-function①\">animation-timing-function</a> on <var>element</var>.</p>\n </li><li data-md=\"\">\n <p>Let <var>default composite</var> be the corresponding <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#computed-value\" id=\"ref-for-computed-value①\">computed value</a> of <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-2/#propdef-animation-composition\" id=\"ref-for-propdef-animation-composition\">animation-composition</a> on <var>element</var>.</p>\n </li><li data-md=\"\">\n <p>Let <var>keyframes</var> be an empty sequence of <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/web-animations-1/#keyframe\" id=\"ref-for-keyframe①\">keyframe</a> objects,\neach possessing a <var>keyframe offset</var>, <var>keyframe timing function</var>, <var>keyframe composite</var>,\nand <var>keyframe values</var>.</p>\n </li><li data-md=\"\">\n <p>Let <var>animated properties</var> be an empty set of CSS <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/cssom-1/#css-declaration-property-name\" id=\"ref-for-css-declaration-property-name\">property names</a>.</p>\n </li></ul>" |
25 | 25 | }, |
26 | 26 | { |
27 | 27 | "html": "<strong>Collect Declared Keyframes:</strong>", |
|
31 | 31 | "html": "<p>Find the last <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes\" id=\"ref-for-at-ruledef-keyframes⑤\">@keyframes</a> at-rule in document order\nwith <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframes-name\" id=\"ref-for-typedef-keyframes-name\"><keyframes-name></a> matching\nthe corresponding <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-1/#propdef-animation-name\" id=\"ref-for-propdef-animation-name⑦\">animation-name</a> value <var>name</var>.</p>\n <p>If there is no <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes\" id=\"ref-for-at-ruledef-keyframes⑥\">@keyframes</a> at-rule\nwith <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframes-name\" id=\"ref-for-typedef-keyframes-name①\"><keyframes-name></a> matching <var>name</var> (or if <var>name</var> is <a class=\"css\" data-link-type=\"maybe\" href=\"https://drafts.csswg.org/css-animations-1/#valdef-animation-name-none\" id=\"ref-for-valdef-animation-name-none\">none</a>),\nabort this procedure.\nIn this case no animation is generated,\nand any existing animation matching <var>name</var> is canceled.</p>" |
32 | 32 | }, |
33 | 33 | { |
34 | | - "html": "<p>Group together all <a data-link-type=\"dfn\">keyframe blocks</a> that share the same <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#specified-value\" id=\"ref-for-specified-value\">specified</a> <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-selector\" id=\"ref-for-typedef-keyframe-selector\"><keyframe-selector></a> (treating <span class=\"css\">from</span> as <span class=\"css\">0%</span> and <span class=\"css\">to</span> as <span class=\"css\">100%</span>),\nlast declared <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function\" id=\"ref-for-propdef-animation-timing-function②\">animation-timing-function</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#computed-value\" id=\"ref-for-computed-value②\">computed value</a> (defaulting to <var>default timing function</var> if there is no such declaration),\nand last declared <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-2/#propdef-animation-composition\" id=\"ref-for-propdef-animation-composition①\">animation-composition</a> <span id=\"ref-for-computed-value③\">computed value</span> (defaulting to <var>default composite</var> if there is no such declaration).</p>" |
| 34 | + "html": "<p>Group together all <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-block\" id=\"ref-for-typedef-keyframe-block\"><keyframe-block></a> declarations\nthat share the same <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#specified-value\" id=\"ref-for-specified-value\">specified</a> <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-selector\" id=\"ref-for-typedef-keyframe-selector\"><keyframe-selector></a> (treating <span class=\"css\">from</span> as <span class=\"css\">0%</span> and <span class=\"css\">to</span> as <span class=\"css\">100%</span>),\nlast declared <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function\" id=\"ref-for-propdef-animation-timing-function②\">animation-timing-function</a> <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#computed-value\" id=\"ref-for-computed-value②\">computed value</a> (defaulting to <var>default timing function</var> if there is no such declaration),\nand last declared <a class=\"property css\" data-link-type=\"property\" href=\"https://drafts.csswg.org/css-animations-2/#propdef-animation-composition\" id=\"ref-for-propdef-animation-composition①\">animation-composition</a> <span id=\"ref-for-computed-value③\">computed value</span> (defaulting to <var>default composite</var> if there is no such declaration).</p>" |
35 | 35 | }, |
36 | 36 | { |
37 | | - "html": "For each such group of matching <a data-link-type=\"dfn\">keyframe blocks</a>,\nordered by their earliest <span>keyframe block</span> in the sorted order:", |
| 37 | + "html": "For each such group of matching <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-block\" id=\"ref-for-typedef-keyframe-block①\"><keyframe-block></a> declarations,\nordered by their earliest <span class=\"production\" id=\"ref-for-typedef-keyframe-block②\"><keyframe-block></span> in the sorted order:", |
38 | 38 | "rationale": "append", |
39 | 39 | "steps": [ |
40 | 40 | { |
41 | | - "html": "<p><a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-6/#cascade\" id=\"ref-for-cascade\">Cascade</a> together all of its <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/CSS2/syndata.html#x14\" id=\"ref-for-x14\">declaration blocks</a> such that for each CSS property\n(except those that are “not animatable”, which must be ignored)\nthe last declaration among all its <a data-link-type=\"dfn\">keyframe blocks</a> takes precedence. <a data-link-type=\"biblio\" href=\"https://drafts.csswg.org/css-animations-2/#biblio-css-cascade-4\" title=\"CSS Cascading and Inheritance Level 4\">[CSS-CASCADE-4]</a></p>" |
| 41 | + "html": "<p><a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-6/#cascade\" id=\"ref-for-cascade\">Cascade</a> together all of its <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/CSS2/syndata.html#x14\" id=\"ref-for-x14\">declaration blocks</a> such that for each CSS property\n(except those that are “not animatable”, which must be ignored)\nthe last declaration among all its <a class=\"production css\" data-link-type=\"type\" href=\"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-block\" id=\"ref-for-typedef-keyframe-block③\"><keyframe-block></a> declarations\ntakes precedence. <a data-link-type=\"biblio\" href=\"https://drafts.csswg.org/css-animations-2/#biblio-css-cascade-4\" title=\"CSS Cascading and Inheritance Level 4\">[CSS-CASCADE-4]</a></p>" |
42 | 42 | }, |
43 | 43 | { |
44 | | - "html": "<p>Append to <var>keyframes</var> a new empty <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/web-animations-1/#keyframe\" id=\"ref-for-keyframe②\">keyframe</a> <var>keyframe</var> with the group’s <var>keyframe offset</var>, <var>keyframe timing function</var>,\nand <var>keyframe composite</var>.\nGive its <var>keyframe values</var> the set of <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#declared-value\" id=\"ref-for-declared-value\">declared values</a> resulting from this cascade.</p>" |
| 44 | + "html": "<p>Append to <var>keyframes</var> a new empty <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/web-animations-1/#keyframe\" id=\"ref-for-keyframe②\">keyframe</a> with the group’s <var>keyframe offset</var>, <var>keyframe timing function</var>,\nand <var>keyframe composite</var>.\nGive its <var>keyframe values</var> the set of <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-cascade-5/#declared-value\" id=\"ref-for-declared-value\">declared values</a> resulting from this cascade.</p>" |
45 | 45 | }, |
46 | 46 | { |
47 | | - "html": "<p>Add each property name that was added to its <var>keyframe properties</var> to <var>animated properties</var>.</p>" |
| 47 | + "html": "<p>Add each <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/cssom-1/#css-declaration-property-name\" id=\"ref-for-css-declaration-property-name①\">property name</a> that was added to its <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://drafts.csswg.org/css-animations-1/#dom-csskeyframesrule-cssrules\" id=\"ref-for-dom-csskeyframesrule-cssrules\">cssRules</a></code> to <var>animated properties</var>.</p>" |
48 | 48 | } |
49 | 49 | ] |
50 | 50 | } |
|
0 commit comments