CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>Web Animations Level 2</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 742f3d674, updated Mon Nov 4 14:56:54 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/web-animations-2/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="dbde8fabad3b9e7fb3b25413cb4293c8e9d527d8" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> .informative-bg { margin: 1.5em 0 1em; padding: 1em; margin-top: 1em; background: #efe; border: green 1px dotted; } @media (prefers-color-scheme: dark) { .informative-bg { background: rgba(255, 255, 255, .05); } } div.informative-bg *:last-child { margin-bottom: 0; } div.informative-bg p:first-child { margin-top: 0; } div.informative-bg h2, div.informative-bg h3, div.informative-bg h4 { background: none; } /* crbug.com/1471465 */ dl.switch > dt { counter-increment: list-item 0; } .attributes::before, .methods::before, .parameters::before, .exceptions::before, .constructors::before, .members::before { font: bold 100% sans-serif; text-align: left; margin: 1.33em 0px; color: var(--heading-text, #005A9C); } .attributes::before { content: 'Attributes' } .methods::before { content: 'Methods' } .parameters::before { content: 'Parameters' } .exceptions::before { content: 'Exceptions' } .constructors::before { content: 'Constructors' } .members::before { content: 'Dictionary members' } dl.switch > [data-md] > p { display: inline; } dl.switch > dt > ul > li { text-indent: 0; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-idl-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">Web Animations Level 2</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-11-18">18 November 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/web-animations-2/">https://drafts.csswg.org/web-animations-2/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/web-animations-2/">https://www.w3.org/TR/web-animations-2/</a> <dt>Version History: <dd><a href="https://github.com/w3c/csswg-drafts/commits/main/web-animations-2">https://github.com/w3c/csswg-drafts/commits/main/web-animations-2</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations-2">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="43194"><a class="p-name fn u-email email" href="mailto:brian@birchill.co.jp">Brian Birtles</a> (Invited Expert) <dd class="editor p-author h-card vcard" data-editor-id="98451"><a class="p-name fn u-email email" href="mailto:flackr@google.com">Robert Flack</a> (Google) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shans@google.com">Shane Stephens</a> (Google) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:dstockwell@google.com">Douglas Stockwell</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/web-animations-2/Overview.bs">GitHub Editor</a> <dt>Participate: <dd><a href="https://github.com/w3c/csswg-drafts/tree/main/web-animations-2">Fix the text through GitHub</a> <dd>Join the ‘waapi’ channel on the <a href="https://damp-lake-50659.herokuapp.com/">Animation at Work</a> slack <dd>IRC: <a href="ircs://irc.w3.org:6667/webanimations">#webanimations</a> on W3C’s IRC <dt>Issue Tracking: <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations-2">GitHub</a> </dl> </div> </details> <div data-fill-with="warning"> <details class="annoying-warning" open> <summary>Not Ready For Implementation</summary> This spec is not yet ready for implementation. It exists in this repository to record the ideas and promote discussion. Before attempting to implement this spec, please contact the CSSWG at www-style@w3.org. </details> </div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This specification defines a model for synchronization and timing of changes to the presentation of a Web page. This specification also defines an application programming interface for interacting with this model and it is expected that further specifications will define declarative means for exposing these features. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “web-animations” in the title, like this: “[web-animations] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bweb-animations%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li><a href="#delta">1 Delta specification</a> <li><a href="#changes-since-level-1">2 Changes since level 1</a> <li> <a href="#timing-model">3 Timing model</a> <ol class="toc"> <li> <a href="#timing-model-overview">3.1 Timing model overview</a> <ol class="toc"> <li><a href="#hierarchical">3.1.1 Hierarchical</a> </ol> <li><a href="#timelines">3.2 Timelines</a> <li> <a href="#animations">3.3 Animations</a> <ol class="toc"> <li><a href="#setting-the-timeline">3.3.1 Setting the timeline of an animation</a> <li><a href="#setting-the-target-effect">3.3.2 Setting the target effect of an animation</a> <li><a href="#waiting-for-the-associated-effect">3.3.3 Waiting for the associated effect</a> <li><a href="#validating-a-css-numberish-time">3.3.4 Validating a CSSNumberish time</a> <li><a href="#setting-the-current-time-of-an-animation">3.3.5 Setting the current time of an Animation</a> <li><a href="#setting-the-start-time-of-an-animation">3.3.6 Setting the start time of an Animation</a> <li> <a href="#playing-an-animation-section">3.3.7 Playing an animation</a> <ol class="toc"> <li><a href="#auto-aligning-start-time">3.3.7.1 Auto-aligning the start time</a> </ol> <li><a href="#pausing-an-animation-section">3.3.8 Pausing an animation</a> <li><a href="#canceling-an-animation-section">3.3.9 Canceling an animation</a> <li><a href="#speed-control">3.3.10 Speed control</a> <li><a href="#the-overall-progress-of-an-animation">3.3.11 Calculating the overall progress of an animation</a> </ol> <li> <a href="#animation-effects">3.4 Animation effects</a> <ol class="toc"> <li><a href="#types-of-animation-effects">3.4.1 Types of animation effects</a> <li><a href="#the-active-interval">3.4.2 The active interval</a> <li><a href="#local-time-and-inherited-time">3.4.3 Local time and inherited time</a> <li><a href="#animation-effect-phases-and-states">3.4.4 Animation effect phases and states</a> <li><a href="#fill-modes">3.4.5 Fill modes</a> </ol> <li> <a href="#repeating">3.5 Repeating</a> <ol class="toc"> <li><a href="#iteration-intervals">3.5.1 Iteration intervals</a> <li><a href="#iteration-time-space">3.5.2 Iteration time space</a> <li><a href="#interval-timing">3.5.3 Interval timing</a> </ol> <li><a href="#animation-effect-speed-control">3.6 Animation effect speed control</a> <li> <a href="#core-animation-effect-calculations">3.7 Core animation effect calculations</a> <ol class="toc"> <li><a href="#animation-effect-calculations-overview">3.7.1 Overview</a> <li><a href="#calculating-the-active-duration">3.7.2 Calculating the active duration</a> <li> <a href="#transforming-the-local-time">3.7.3 Transforming the local time</a> <ol class="toc"> <li><a href="#calculating-the-active-time">3.7.3.1 Calculating the active time</a> <li><a href="#calculating-the-overall-progress">3.7.3.2 Calculating the overall progress</a> </ol> </ol> <li> <a href="#time-transformations">3.8 Time transformations</a> <ol class="toc"> <li><a href="#calculating-the-transformed-progress">3.8.1 Calculating the transformed progress</a> <li><a href="#calculating-the-transformed-time">3.8.2 Calculating the transformed time</a> </ol> <li> <a href="#grouping-and-synchronization">3.9 Grouping and synchronization</a> <ol class="toc"> <li><a href="#relationship-of-group-time-to-child-time">3.9.1 Relationship of group time to child time</a> <li><a href="#the-start-time-of-children-of-a-group-effect">3.9.2 The start time of children of a group effect</a> <li><a href="#the-intrinsic-iteration-duration-of-a-group-effect">3.9.3 The intrinsic iteration duration of a group effect</a> <li> <a href="#sequence-effects">3.9.4 Sequence effects</a> <ol class="toc"> <li><a href="#the-start-time-of-children-of-a-sequence-effect">3.9.4.1 The start time of children of a sequence effect</a> <li><a href="#the-intrinsic-iteration-duration-of-a-sequence-effect">3.9.4.2 The intrinsic iteration duration of a sequence effect</a> </ol> </ol> </ol> <li> <a href="#animation-model">4 Animation model</a> <ol class="toc"> <li> <a href="#animation-types">4.1 Animation types</a> <ol class="toc"> <li><a href="#not-animatable-section">4.1.1 Not animatable</a> </ol> <li> <a href="#keyframe-effects">4.2 Keyframe Effects</a> <ol class="toc"> <li><a href="#the-effect-value-of-a-keyframe-animation-effect">4.2.1 The effect value of a keyframe effect</a> </ol> <li> <a href="#combining-effects">4.3 Combining effects</a> <ol class="toc"> <li><a href="#the-effect-stack">4.3.1 The effect stack</a> </ol> <li><a href="#effect-accumulation-section">4.4 Effect accumulation</a> <li> <a href="#custom-effects">4.5 Custom effects</a> <ol class="toc"> <li><a href="#updating-custom-effects">4.5.1 Sampling custom effects</a> <li><a href="#execution-order-of-custom-effects">4.5.2 Execution order of custom effects</a> </ol> </ol> <li> <a href="#programming-interface">5 Programming interface</a> <ol class="toc"> <li><a href="#the-animationtimeline-interface">5.1 The <code>AnimationTimeline</code> interface</a> <li><a href="#the-animation-interface">5.2 The <code>Animation</code> interface</a> <li><a href="#the-animationeffect-interface">5.3 The <code>AnimationEffect</code> interface</a> <li><a href="#the-effecttiming-dictionaries">5.4 The <code>EffectTiming</code> and <code>OptionalEffectTiming</code> dictionaries</a> <li><a href="#updating-animationeffect-timing">5.5 Updating the timing of an AnimationEffect</a> <li> <a href="#the-computedeffecttiming-dictionary">5.6 The <code>ComputedEffectTiming</code> dictionary</a> <ol class="toc"> <li><a href="#the-fillmode-enumeration">5.6.1 The <code>FillMode</code> enumeration</a> </ol> <li> <a href="#the-groupeffect-interface">5.7 The <code>GroupEffect</code> interface</a> <ol class="toc"> <li><a href="#processing-a-timing-argument">5.7.1 Processing a <code>timing</code> argument</a> <li><a href="#definitions-for-manipulating-hierarchies">5.7.2 Definitions for manipulating hierarchies</a> </ol> <li><a href="#the-animationnodelist-interface">5.8 The <code>AnimationNodeList</code> interface</a> <li><a href="#the-sequenceeffect-interface">5.9 The <code>SequenceEffect</code> interfaces</a> <li> <a href="#the-keyframeeffect-interface">5.10 The <code>KeyframeEffect</code> interfaces</a> <ol class="toc"> <li><a href="#creating-a-new-keyframeeffect-object">5.10.1 Creating a new <code>KeyframeEffect</code> object</a> <li><a href="#keyframe-offset-type">5.10.2 Modification to the <code>*Keyframe</code> dictionaries</a> <li><a href="#the-keyframeeffectoptions-dictionary">5.10.3 The KeyframeEffectOptions dictionary</a> </ol> <li><a href="#the-iterationcompositeoperation-enumeration">5.11 The IterationCompositeOperation enumeration</a> <li><a href="#the-effectcallback-callback-function">5.12 The <code>EffectCallback</code> callback function</a> <li><a href="#the-animatable-interface">5.13 The <code>Animatable</code> interface</a> <li><a href="#the-animatable-interface-mixin">5.14 The <code>Animatable</code> interface mixin</a> <li><a href="#the-animationplaybackevent-interface">5.15 The <code>AnimationPlaybackEvent</code> interface </a> <li><a href="#model-liveness">5.16 Model liveness</a> </ol> <li><a href="#priv">6 Privacy Considerations</a> <li><a href="#sec">7 Security Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> </ol> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="delta">1. Delta specification<a class="self-link" href="#delta"></a></h2> This is a delta specification, meaning that it currently contains only the differences from Web Animations Level 1 <a data-link-type="biblio" href="#biblio-web-animations-1" title="Web Animations">[WEB-ANIMATIONS-1]</a>. Once the Level 1 specification is closer to complete, it will be merged with the additions here into a complete level 2 specification. <h2 class="heading settled" data-level="2" id="changes-since-level-1">2. Changes since level 1<a class="self-link" href="#changes-since-level-1"></a></h2> This specification introduces the following changes compared to the previous level of this specification: <ul> <li data-md> <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect">group effects</a> and <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect">sequence effects</a>, <li data-md> an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect">animation effect</a>-specific <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate">playback rate</a>, <li data-md> Support for non-monotonic (scroll) timelines. </ul> <div class="amendment" id="amend-CE"> This module also includes some exploratory proposals for <a href="#custom-effects">§ 4.5 Custom effects</a>, however there are some concerns about the design of this feature and it may be replaced in a future revision. See <a href="https://github.com/w3c/csswg-drafts/issues/6861">discussion</a>. </div> <h2 class="heading settled" data-level="3" id="timing-model">3. Timing model<a class="self-link" href="#timing-model"></a></h2> This section describes and defines the behavior of the Web Animations timing model. <h3 class="heading settled" data-level="3.1" id="timing-model-overview">3.1. Timing model overview<a class="self-link" href="#timing-model-overview"></a></h3> <div class="informative-bg"> This section is non-normative <h4 class="heading settled" data-level="3.1.1" id="hierarchical">3.1.1. Hierarchical<a class="self-link" href="#hierarchical"></a></h4> This level of the specification includes an updated timing hierarchy diagram. <figure> <img alt="A hierarchy of timing nodes" src="images/time-hierarchy.svg" width="600"> <figcaption> A hierarchy of timing nodes. Each node in the tree derives its time from its parent node. </figcaption> </figure> Along with the following updated description: <blockquote> A consequence of this hierarchical arrangement is that complex animation arrangements can be reversed, scheduled, accelerated and so on as a whole unit since the manipulations applied to the parent, cascade down to its <a data-link-type="dfn" href="#descendant" id="ref-for-descendant">descendants</a>. Furthermore, since time has a common source, it is easy to synchronize animations. </blockquote> </div> <h3 class="heading settled" data-level="3.2" id="timelines">3.2. Timelines<a class="self-link" href="#timelines"></a></h3> Add: <blockquote> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="timeline duration" data-noexport id="timeline-duration">duration</dfn> of a timeline gives the maximum value a timeline may generate for its current time. This value is used to calculate the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration">intrinsic iteration duration</a> for the target effect of an animation that is associated with the timeline when the effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration">iteration duration</a> is "auto". The value is computed such that the effect fills the available time. For a monotonic timeline, there is no upper bound on current time, and <a data-link-type="dfn" href="#timeline-duration" id="ref-for-timeline-duration">timeline duration</a> is unresolved. For a non-monotonic (e.g. scroll) timeline, the duration has a fixed upper bound. In this case, the timeline is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="progress-based timeline" data-noexport id="progress-based-timeline">progress-based timeline</dfn>, and its timeline duration is 100%. </blockquote> <h3 class="heading settled" data-level="3.3" id="animations">3.3. Animations<a class="self-link" href="#animations"></a></h3> Append: <blockquote> Animation effects associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline">progress-based timeline</a> require their timing properties to be converted to proportions. The procedure for converting a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="time-based animation to a proportional animation" data-noexport id="time-based-animation-to-a-proportional-animation"></dfn> is as follows: <ol> <li data-md> If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①">iteration duration</a> is auto, then perform the following steps. <ul> <li data-md> Set <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay">start delay</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay">end delay</a> to 0, as it is not possible to mix time and proportions. Note: Future versions may allow these properties to be assigned percentages, at which point the delays are only to be ignored if their values are expressed as times and not as percentages. </ul> Otherwise: <ol> <li data-md> Let <var>total time</var> be equal to <a data-link-type="dfn" href="#end-time" id="ref-for-end-time">end time</a> <li data-md> Set <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①">start delay</a> to be the result of evaluating <code><var>specified start delay</var> / <var>total time</var> * <var>timeline duration</var></code>. <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration②">iteration duration</a> to be the result of evaluating <code><var>specified iteration duration</var> / <var>total time</var> * <var>timeline duration</var></code>. <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay①">end delay</a> to be the result of evaluating <code><var>specified end delay</var> / <var>total time</var> * <var>timeline duration</var></code>. </ol> </ol> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="normalize-specified-timing">normalize specified timing</dfn> is as follows: If <a data-link-type="dfn" href="#timeline-duration" id="ref-for-timeline-duration②">timeline duration</a> is resolved: <ul> <li data-md> Follow the procedure to convert a <a data-link-type="dfn" href="#time-based-animation-to-a-proportional-animation" id="ref-for-time-based-animation-to-a-proportional-animation">time-based animation to a proportional animation</a> </ul> Otherwise: <ol> <li data-md> Set <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②">start delay</a> = <var>specified start delay</var> <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay②">end delay</a> = <var>specified end delay</var> <li data-md> If <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration③">iteration duration</a> is auto: <ul> <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration④">iteration duration</a> = <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①">intrinsic iteration duration</a> </ul> Otherwise: <ul> <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑤">iteration duration</a> = <var>specified iteration duration</var> </ul> </ol> </blockquote> <h4 class="heading settled" data-level="3.3.1" id="setting-the-timeline">3.3.1. Setting the timeline of an animation<a class="self-link" href="#setting-the-timeline"></a></h4> The procedure to <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-set-the-timeline-of-an-animation">set the timeline of an animation</dfn>, <var>animation</var>, to <var>new timeline</var> which may be null, is as follows: <ol> <li data-md> Let <var>old timeline</var> be the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline">timeline</a> of <var>animation</var>, if any. <li data-md> If <var>new timeline</var> is the same object as <var>old timeline</var>, abort this procedure. <li data-md> Let <var>previous play state</var> be <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-play-state" id="ref-for-animation-play-state">play state</a>. <li data-md> Let <var>previous current time</var> be the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time">current time</a>. <li data-md> Set <var>previous progress</var> based in the first condition that applies: <dl class="switch"> <dt data-md>If <var>previous current time</var> is unresolved: <dd data-md> Set <var>previous progress</var> to unresolved. <dt data-md>If <a data-link-type="dfn" href="#end-time" id="ref-for-end-time①">end time</a> is zero: <dd data-md> Set <var>previous progress</var> to zero. <dt data-md>Otherwise <dd data-md> Set <var>previous progress</var> = <code><var>previous current time</var> / <a data-link-type="dfn" href="#end-time" id="ref-for-end-time②">end time</a></code> </dl> <li data-md> Let <var>from finite timeline</var> be true if <var>old timeline</var> is not null and not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline">monotonically increasing</a>. <li data-md> Let <var>to finite timeline</var> be true if <var>timeline</var> is not null and not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline①">monotonically increasing</a>. <li data-md> Let the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①">timeline</a> of <var>animation</var> be <var>new timeline</var>. <li data-md> Perform the steps corresponding to the first matching condition from the following, if any: <dl class="switch"> <dt data-md>If <var>to finite timeline</var>, <dd data-md> <ol> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate">Apply any pending playback rate</a> on <var>animation</var> <li data-md> set <var>auto align start time</var> to true. <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time">start time</a> to unresolved. <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time">hold time</a> to unresolved. <li data-md> If <var>previous play state</var> is "finished" or "running" <ol> <li data-md> Schedule a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task">pending play task</a> </ol> <li data-md> If <var>previous play state</var> is "paused" and <var>previous progress</var> is resolved: <ol> <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①">hold time</a> to <var>previous progress</var> * <a data-link-type="dfn" href="#end-time" id="ref-for-end-time③">end time</a>. </ol> </ol> This step ensures that <var>previous progress</var> is preserved even in the case of a pause-pending animation with a resolved <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①">start time</a>. <dt data-md>If <var>from finite timeline</var> and <var>previous progress</var> is resolved, <dd data-md> Run the procedure to <a data-link-type="dfn" href="#set-the-current-time" id="ref-for-set-the-current-time">set the current time</a> to <var>previous progress</var> * <a data-link-type="dfn" href="#end-time" id="ref-for-end-time④">end time</a>. </dl> <li data-md> If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved">resolved</a>, make <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②">hold time</a> unresolved. This step ensures that the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-state-finished" id="ref-for-play-state-finished">finished play state</a> of <var>animation</var> is not “sticky” but is re-evaluated based on its updated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①">current time</a>. <li data-md> Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false, and the <var>synchronously notify</var> flag set to false. </ol> <ins cite="#amend-CE"> Issue: If <var>new timeline</var> is null, we should ensure that <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect">custom effects</a> get called with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress">iteration progress</a> (unless a subsequent change in the same script execution context makes this redundant). </ins> <h4 class="heading settled" data-level="3.3.2" id="setting-the-target-effect">3.3.2. Setting the target effect of an animation<a class="self-link" href="#setting-the-target-effect"></a></h4> After the step to reschedule a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①">pending play task</a> add the following step: <blockquote> <ol> <li data-md> If <var>new effect</var> is not <code>null</code> and if <var>new effect</var> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group">parent group</a>, <a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect">remove</a> <var>new effect</var> from its parent group. </ol> </blockquote> <ins cite="#amend-CE"> After the step to assign <var>new effect</var> as <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect">associated effect</a> include the following step: <blockquote> <ol> <li data-md> If <var>old effect</var> is not <code>null</code>, queue a task to call any <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①">custom effects</a> associated with <a data-link-type="dfn" href="#inclusive-descendant" id="ref-for-inclusive-descendant">inclusive descendants</a> of <var>old effect</var> with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress①">iteration progress</a>. <div class="issue" id="issue-ddad0532"> <a class="self-link" href="#issue-ddad0532"></a> This is not quite right. If <var>old effect</var> is attached to another animation in the same task then we should probably not do an extra callback with <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④">unresolved</a>. The definition of when <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect②">custom effects</a> gets called needs to be audited and probably rewritten. </div> </ol> </blockquote> </ins> <h4 class="heading settled" data-level="3.3.3" id="waiting-for-the-associated-effect">3.3.3. Waiting for the associated effect<a class="self-link" href="#waiting-for-the-associated-effect"></a></h4> Replace: <blockquote> An animation is ready at the first moment where both of the following conditions are true: <ul> <li data-md> the user agent has completed any setup required to begin the playback of the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect①">associated effect</a>, including rendering the first frame of any <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect">keyframe effect</a>. <li data-md> the animation is associated with a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline②">timeline</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline">inactive</a>. </ul> </blockquote> With: <blockquote> An animation is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="ready">ready</dfn> at the first moment where all of the following conditions are true: <ul> <li data-md> the user agent has completed any setup required to begin the playback of each <a data-link-type="dfn" href="#inclusive-descendant" id="ref-for-inclusive-descendant①">inclusive descendant</a> of the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect②">associated effect</a> including rendering the first frame of any <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect①">keyframe effect</a> <ins cite="#amend-CE"> or executing any <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect③">custom effects</a> associated with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①">animation effect</a></ins> . <li data-md> the animation is associated with a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline③">timeline</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline①">inactive</a>. <li data-md> the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time③">hold time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time③">start time</a> is resolved. </ul> </blockquote> Note: an animation is not <a data-link-type="dfn" href="#ready" id="ref-for-ready">ready</a> while it has no <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time④">start time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time④">hold time</a>. For a <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations" id="ref-for-scroll-driven-animations">scroll-driven animation</a>, the start-time is determined when <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#html-processing-model-event-loops" id="ref-for-html-processing-model-event-loops">updating the timeline</a> if <var>auto align start time</var> is true. <h4 class="heading settled" data-level="3.3.4" id="validating-a-css-numberish-time">3.3.4. Validating a CSSNumberish time<a class="self-link" href="#validating-a-css-numberish-time"></a></h4> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="validate-a-cssnumberish-time">validate a CSSNumberish time</dfn> for an input value of <var>time</var> is based on the first condition that matches: <dl class="switch"> <dt data-md> If all of the following conditions are true: <ul> <li data-md> The animation is associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline①">progress-based timeline</a>, and <li data-md> <var>time</var> is not a CSSNumeric value with percent units: </ul> <dd data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw">throw</a> a TypeError. <dd data-md> return false; <dt data-md> If all of the following conditions are true: <ul> <li data-md> The animation is not associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline②">progress-based timeline</a>, and <li data-md> <var>time</var> is a CSSNumericValue, and <li data-md> the units of time are not <a class="css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value">duration units</a>: </ul> <dd data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a TypeError. <dd data-md> return false. <dt data-md>Otherwise <dd data-md> return true. </dl> <h4 class="heading settled" data-level="3.3.5" id="setting-the-current-time-of-an-animation">3.3.5. Setting the current time of an Animation<a class="self-link" href="#setting-the-current-time-of-an-animation"></a></h4> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time②">current time</a> of an animation can be set to a new value to seek the animation. The procedure for setting the current time is defined in two parts. The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="silently-set-the-current-time">silently set the current time</dfn> of an animation, <var>animation</var>, to <var>seek time</var> is as follows: <ol> <li data-md> If <var>seek time</var> is an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑤">unresolved</a> time value, then perform the following steps. <ol> <li data-md> If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time③">current time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑥">resolved</a>, then <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw②">throw</a> a TypeError. <li data-md> Abort these steps. </ol> <li data-md> Let <var>valid seek time</var> be the result of running the <a data-link-type="dfn" href="#validate-a-cssnumberish-time" id="ref-for-validate-a-cssnumberish-time">validate a CSSNumberish time</a> procedure with <var>seek time</var> as the input. <li data-md> If <var>valid seek time</var> is false, abort this procedure. <li data-md> Set <var>auto align start time</var> to false. <li data-md> Update either <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time⑤">hold time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time⑤">start time</a> as follows: <dl class="switch"> <dt data-md> If any of the following conditions are true: <ul> <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time⑥">hold time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑦">resolved</a>, or <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time⑥">start time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑧">unresolved</a>, or <li data-md> <var>animation</var> has no associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline④">timeline</a> or the associated timeline is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline②">inactive</a>, or <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①">playback rate</a> is 0, </ul> <dd data-md> <ol> <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time⑦">hold time</a> to <var>seek time</var>. </ol> <dt data-md>Otherwise, <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time⑦">start time</a> to the result of evaluating <code><var>timeline time</var> - (<var>seek time</var> / <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value①">time value</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline⑥">timeline</a> associated with <var>animation</var>. </dl> <li data-md> If <var>animation</var> has no associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline⑦">timeline</a> or the associated timeline is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline③">inactive</a>, make <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time⑧">start time</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑨">unresolved</a>. This preserves the invariant that when we don’t have an active timeline it is only possible to set either the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time⑨">start time</a> or the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time④">current time</a>. <li data-md> Make <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation">animation</a>’s <var>previous current time</var> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⓪">unresolved</a>. </ol> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-current-time">set the current time</dfn> of an animation, <var>animation</var>, to <var>seek time</var> is as follows: <ol> <li data-md> Run the steps to <a data-link-type="dfn" href="#silently-set-the-current-time" id="ref-for-silently-set-the-current-time">silently set the current time</a> of <var>animation</var> to <var>seek time</var>. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-pause-task" id="ref-for-pending-pause-task">pending pause task</a>, synchronously complete the pause operation by performing the following steps: <ol> <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time⑧">hold time</a> to <var>seek time</var>. <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate①">Apply any pending playback rate</a> to <var>animation</var>. <li data-md> Make <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①⓪">start time</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①①">unresolved</a>. <li data-md> Cancel the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-pause-task" id="ref-for-pending-pause-task①">pending pause task</a>. <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve">Resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-ready-promise" id="ref-for-current-ready-promise">current ready promise</a> with <var>animation</var>. </ol> <li data-md> Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state①">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to true, and the <var>synchronously notify</var> flag set to false. </ol> <h4 class="heading settled" data-level="3.3.6" id="setting-the-start-time-of-an-animation">3.3.6. Setting the start time of an Animation<a class="self-link" href="#setting-the-start-time-of-an-animation"></a></h4> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-start-time">set the start time</dfn> of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①">animation</a>, <var>animation</var>, to <var>new start time</var>, is as follows: <ol> <li data-md> Let <var>valid start time</var> be the result of running the <a data-link-type="dfn" href="#validate-a-cssnumberish-time" id="ref-for-validate-a-cssnumberish-time①">validate a CSSNumberish time</a> procedure with <var>new start time</var> as the input. <li data-md> If <var>valid start time</var> is false, abort this procedure. <li data-md> Set <var>auto align start time</var> to false. <li data-md> Let <var>timeline time</var> be the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value②">time value</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline⑨">timeline</a> that <var>animation</var> is associated with. If there is no timeline associated with <var>animation</var> or the associated timeline is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline④">inactive</a>, let the <var>timeline time</var> be <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①②">unresolved</a>. <li data-md> If <var>timeline time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①③">unresolved</a> and <var>new start time</var> is resolved, make <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time⑨">hold time</a> unresolved. This preserves the invariant that when we don’t have an active timeline it is only possible to set either the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①①">start time</a> or the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time⑤">current time</a>. <li data-md> Let <var>previous current time</var> be <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time⑥">current time</a>. Note: This is the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time⑦">current time</a> after applying the changes from the previous step which may cause the current time to become <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⑥">unresolved</a>. <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate②">Apply any pending playback rate</a> on <var>animation</var>. <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①②">start time</a> to <var>new start time</var>. <li data-md> Update <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①⓪">hold time</a> based on the first matching condition from the following, <dl class="switch"> <dt data-md>If <var>new start time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⑦">resolved</a>, <dd data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③">playback rate</a> is not zero, make <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①①">hold time</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⑧">unresolved</a>. <dt data-md>Otherwise (<var>new start time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⑨">unresolved</a>), <dd data-md> <ol> <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①②">hold time</a> to <var>previous current time</var> even if <var>previous current time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②⓪">unresolved</a>. </ol> </dl> <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task②">pending play task</a> or a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-pause-task" id="ref-for-pending-pause-task②">pending pause task</a>, cancel that task and <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve①">resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-ready-promise" id="ref-for-current-ready-promise①">current ready promise</a> with <var>animation</var>. <li data-md> Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state②">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to true, and the <var>synchronously notify</var> flag set to false. </ol> <h4 class="heading settled" data-level="3.3.7" id="playing-an-animation-section">3.3.7. Playing an animation<a class="self-link" href="#playing-an-animation-section"></a></h4> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="play-an-animation">play an animation</dfn>, <var>animation</var>, given a flag <var>auto-rewind</var>, is as follows: Note: The <var>auto-rewind</var> flag is provided for other specifications that build on this model but do not require the rewinding behavior, such as CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a>. <ol> <li data-md> Let <var>aborted pause</var> be a boolean flag that is true if <var>animation</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-pause-task" id="ref-for-pending-pause-task③">pending pause task</a>, and false otherwise. <li data-md> Let <var>has pending ready promise</var> be a boolean flag that is initially false. <li data-md> Let <var>has finite timeline</var> be true if <var>animation</var> has an associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①①">timeline</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline②">monotonically increasing</a>. <li data-md> Let <var>previous current time</var> be the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time⑨">current time</a> <li data-md> Let <var>enable seek</var> be true if the <var>auto-rewind</var> flag is true and <var>has finite timeline</var> is false. Otherwise, initialize to false. <li data-md> Perform the steps corresponding to the first matching condition from the following, if any: <dl class="switch"> <dt data-md> If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effective-playback-rate" id="ref-for-effective-playback-rate">effective playback rate</a> > 0, <var>enable seek</var> is true and either <var>animation</var>’s: <ul> <li data-md> <var>previous current time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②①">unresolved</a>, or <li data-md> <var>previous current time</var> < zero, or <li data-md> <var>previous current time</var> ≥ <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end">associated effect end</a>, </ul> <dd data-md> Set the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①③">hold time</a> to zero. <dt data-md> If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effective-playback-rate" id="ref-for-effective-playback-rate①">effective playback rate</a> < 0, <var>enable seek</var> is true and either <var>animation</var>’s: <ul> <li data-md> <var>previous current time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②②">unresolved</a>, or <li data-md> <var>previous current time</var> ≤ zero, or <li data-md> <var>previous current time</var> > <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end①">associated effect end</a>, </ul> <dd data-md> <dl class="switch"> <dt data-md>If <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end②">associated effect end</a> is positive infinity, <dd data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw③">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and abort these steps. <dt data-md>Otherwise, <dd data-md> Set the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①④">hold time</a> to the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end③">associated effect end</a>. </dl> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effective-playback-rate" id="ref-for-effective-playback-rate②">effective playback rate</a> = 0 and <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①⓪">current time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②③">unresolved</a>, <dd data-md> Set the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①⑤">hold time</a> to zero. </dl> <li data-md> If <var>has finite timeline</var> and <var>previous current time</var> is unresolved: <ul> <li data-md> Set the flag <var>auto align start time</var> to true. </ul> Note: If play is called for a CSS animation during style update, the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①③">start time</a> cannot be reliably calculated until post layout since the start time is to align with the start or end of the animation range (depending on the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate④">playback rate</a>). In this case, the animation is said to have an <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export data-lt="auto-aligned start time" id="animation-auto-aligned-start-time">auto-aligned start time</dfn>, whereby the start time is automatically adjusted as needed to align the animation’s progress to the animation range. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①⑥">hold time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②④">resolved</a>, let its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①④">start time</a> be unresolved. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task③">pending play task</a> or a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-pause-task" id="ref-for-pending-pause-task④">pending pause task</a>, <ol> <li data-md> Cancel that task. <li data-md> Set <var>has pending ready promise</var> to true. </ol> <li data-md> If the following three conditions are all satisfied: <ul> <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①⑦">hold time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②⑥">unresolved</a>, and <li data-md> <var>aborted pause</var> is false, and <li data-md> <var>animation</var> does not have a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-playback-rate" id="ref-for-pending-playback-rate">pending playback rate</a>, </ul> abort this procedure. <li data-md> If <var>has pending ready promise</var> is false, let <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-ready-promise" id="ref-for-current-ready-promise②">current ready promise</a> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-new-promise" id="ref-for-a-new-promise">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm">relevant Realm</a> of <var>animation</var>. <li data-md> Schedule a task to run as soon as <var>animation</var> is <a data-link-type="dfn" href="#ready" id="ref-for-ready①">ready</a>. The task shall perform the following steps: <ol> <li data-md> Assert that at least one of <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①⑤">start time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①⑧">hold time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②⑦">resolved</a>. <li data-md> Let <var>ready time</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value③">time value</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①②">timeline</a> associated with <var>animation</var> at the moment when <var>animation</var> became <a data-link-type="dfn" href="#ready" id="ref-for-ready②">ready</a>. <li data-md> Perform the steps corresponding to the first matching condition below, if any: <dl class="switch"> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time①⑨">hold time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②⑧">resolved</a>, <dd data-md> <ol> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate③">Apply any pending playback rate</a> on <var>animation</var>. <li data-md> Let <var>new start time</var> be the result of evaluating <code><var>ready time</var> - <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②⓪">hold time</a> / <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑤">playback rate</a></code> for <var>animation</var>. If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑥">playback rate</a> is zero, let <var>new start time</var> be simply <var>ready time</var>. <li data-md> Set the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①⑥">start time</a> of <var>animation</var> to <var>new start time</var>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑦">playback rate</a> is not 0, make <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②①">hold time</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②⑨">unresolved</a>. </ol> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①⑦">start time</a> is resolved and <var>animation</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-playback-rate" id="ref-for-pending-playback-rate①">pending playback rate</a>, <dd data-md> <ol> <li data-md> Let <var>current time to match</var> be the result of evaluating <code>(<var>ready time</var> - <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①⑧">start time</a>) × <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑧">playback rate</a></code> for <var>animation</var>. <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate④">Apply any pending playback rate</a> on <var>animation</var>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑨">playback rate</a> is zero, let <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②②">hold time</a> be <var>current time to match</var>. <li data-md> Let <var>new start time</var> be the result of evaluating <code><var>ready time</var> - <var>current time to match</var> / <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⓪">playback rate</a></code> for <var>animation</var>. If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①①">playback rate</a> is zero, let <var>new start time</var> be simply <var>ready time</var>. <li data-md> Set the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time①⑨">start time</a> of <var>animation</var> to <var>new start time</var>. </ol> </dl> <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve②">Resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-ready-promise" id="ref-for-current-ready-promise③">current ready promise</a> with <var>animation</var>. <li data-md> Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state③">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false, and the <var>synchronously notify</var> flag set to false. <div class="note" role="note"> Note that the order of the above two steps is important since it means that an animation with zero-length <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect③">associated effect</a> will resolve its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-ready-promise" id="ref-for-current-ready-promise④">current ready promise</a> before its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-finished-promise" id="ref-for-current-finished-promise">current finished promise</a>. </div> </ol> So long as the above task is scheduled but has yet to run, <var>animation</var> is described as having a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-play-task">pending play task</dfn>. While the task is running, however, <var>animation</var> does not have a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task④">pending play task</a>. If a user agent determines that <var>animation</var> is immediately <a data-link-type="dfn" href="#ready" id="ref-for-ready③">ready</a>, it may schedule the above task as a microtask such that it runs at the next <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint" id="ref-for-perform-a-microtask-checkpoint">microtask checkpoint</a>, but it must not perform the task synchronously. <div class="note" role="note"> The above requirement to run the <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑤">pending play task</a> asynchronously ensures that code such as the following behaves consistently between implementations: <div class="example" id="example-b6f05729"> <a class="self-link" href="#example-b6f05729"></a> <pre class="lang-javascript highlight">animation<c- p>.</c->play<c- p>();</c-> animation<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c-><c- t>'Playback commenced'</c-><c- p>);</c-> <c- p>},</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c-><c- t>'Playback was canceled'</c-><c- p>);</c-> <c- p>}</c-> <c- p>);</c-> <c- c1>// Suppose some condition requires playback to be canceled...</c-> animation<c- p>.</c->cancel<c- p>();</c-> <c- c1>// "Playback was canceled" will be printed to the console.</c-> </pre> </div> In the above code, were the <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑥">pending play task</a> run synchronously, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-ready-promise" id="ref-for-current-ready-promise⑤">current ready promise</a> would not be rejected. </div> <li data-md> Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state④">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false, and the <var>synchronously notify</var> flag set to false. </ol> <a class="self-link" href="#issue-fab0faba"></a> The procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation">play an animation</a> needs to include scheduling a task for updating <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect④">custom effects</a>. <h5 class="heading settled" data-level="3.3.7.1" id="auto-aligning-start-time">3.3.7.1. Auto-aligning the start time<a class="self-link" href="#auto-aligning-start-time"></a></h5> When attached to a non-monotonic timeline, the start time of the animation may be layout dependent. In this case, we defer calculation of the start time until the timeline has been updated post layout. When updating timeline current time, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②⓪">start time</a> of any attached animation is conditionally updated. The procedure for <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-calculating-an-auto-aligned-start-time">calculating an auto-aligned start time</dfn> is as follows: <ol> <li data-md> If the <var>auto-align start time</var> flag is false, abort this procedure. <li data-md> If the timeline is inactive, abort this procedure. <li data-md> If <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-play-state" id="ref-for-animation-play-state①">play state</a> is idle, abort this procedure. <li data-md> If <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-play-state" id="ref-for-animation-play-state②">play state</a> is paused, and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②③">hold time</a> is resolved, abort this procedure. <li data-md> Let <var>start offset</var> be the resolved timeline time corresponding to the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range" id="ref-for-animation-attachment-range">animation attachment range</a>. In the case of view timelines, it requires a calculation based on the proportion of the cover range. <li data-md> Let <var>end offset</var> be the resolved timeline time corresponding to the end of the <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range" id="ref-for-animation-attachment-range①">animation attachment range</a>. In the case of view timelines, it requires a calculation based on the proportion of the cover range. <li data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②①">start time</a> to <var>start offset</var> if <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effective-playback-rate" id="ref-for-effective-playback-rate③">effective playback rate</a> ≥ 0, and <var>end offset</var> otherwise. <li data-md> Clear <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②④">hold time</a>. </ol> <h4 class="heading settled" data-level="3.3.8" id="pausing-an-animation-section">3.3.8. Pausing an animation<a class="self-link" href="#pausing-an-animation-section"></a></h4> The procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pause-an-animation" id="ref-for-pause-an-animation">pause an animation</a> needs to refer not only to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect④">associated effect</a> but also any descendants of the associated effect. <ins cite="#amend-CE">Likewise, the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pause-an-animation" id="ref-for-pause-an-animation①">pause an animation</a> needs to include scheduling a task for updating <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑤">custom effects</a>.</ins> Update the constraints for setting the seek time to only apply when using a monotonic timeline. A <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations" id="ref-for-scroll-driven-animations①">scroll-driven animation</a> needs to defer setting the hold time until the animation range has been computed. Replace: <blockquote> <ol> <li data-md> Let <var>seek time</var> be a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value④">time value</a> that is initially <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③⓪">unresolved</a>. <li data-md> Let <var>has finite timeline</var> be true if <var>animation</var> has an associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①③">timeline</a> that is not <a data-link-type="dfn">monotonically increasing</a>. <li data-md> If the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①①">current time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③①">unresolved</a>, perform the steps according to the first matching condition below: <dl class="switch"> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①②">playback rate</a> is ≥ 0, <dd data-md> Set <var>seek time</var> to zero. <dt data-md>Otherwise, <dd data-md> <dl class="switch"> <dt data-md>If <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end④">associated effect end</a> for <var>animation</var> is positive infinity, <dd data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw④">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> and abort these steps. <dt data-md>Otherwise, <dd data-md> Set <var>seek time</var> to <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end⑤">associated effect end</a>. </dl> </dl> <li data-md> If <var>seek time</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③②">resolved</a>, <div class="switch"> <dl> <dt data-md>If <var>has finite timeline</var> is true, <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#transition-start-time" id="ref-for-transition-start-time">start time</a> to <var>seek time</var>. <dt data-md>Otherwise, <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②⑤">hold time</a> to <var>seek time</var>. </dl> </div> </ol> </blockquote> with: <blockquote> <ol> <li data-md> Let <var>has finite timeline</var> be true if <var>animation</var> has an associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①④">timeline</a> that is not <a data-link-type="dfn">monotonically increasing</a>. <li data-md> If the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①②">current time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③③">unresolved</a> and <var>has finite timeline</var> is false, perform the steps according to the first matching condition below: <dl class="switch"> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①③">playback rate</a> is ≥ 0, <dd data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②⑥">hold time</a> to zero. <dt data-md>Otherwise, <dd data-md> <dl class="switch"> <dt data-md>If <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end⑥">associated effect end</a> for <var>animation</var> is positive infinity, <dd data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code> and abort these steps. <dt data-md>Otherwise, <dd data-md> Set <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②⑦">hold time</a> to <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end⑦">associated effect end</a>. </dl> </dl> <li data-md> If <var>has finite timeline</var> is true, and the <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①③">current time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③④">unresolved</a> <ul> <li data-md> Set the <var>auto align start time</var> flag to true. </ul> </ol> </blockquote> Replace: <blockquote> Schedule a task to be executed at the first possible moment where both of the following conditions are true: <ul> <li data-md> the user agent has performed any processing necessary to suspend the playback of animation’s associated effect, if any. <li data-md> the animation is associated with a timeline that is not inactive. </ul> </blockquote> With: <blockquote> Schedule a task to be executed at the first possible moment where all of the following conditions are true: <ul> <li data-md> the user agent has performed any processing necessary to suspend the playback of animation’s associated effect, if any. <li data-md> the animation is associated with a timeline that is not inactive. <li data-md> the animation has a resolved <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-hold-time" id="ref-for-animation-hold-time②⑧">hold time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②②">start time</a>. </ul> </blockquote> Note: A <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②③">start time</a> is still required for a pause-pending animation if the <var>auto-align start time</var> flag is true to properly align to the animation range. The start time is set following the procedure for <a data-link-type="dfn" href="#animation-calculating-an-auto-aligned-start-time" id="ref-for-animation-calculating-an-auto-aligned-start-time">calculating an auto-aligned start time</a>. <h4 class="heading settled" data-level="3.3.9" id="canceling-an-animation-section">3.3.9. Canceling an animation<a class="self-link" href="#canceling-an-animation-section"></a></h4> <ins cite="#amend-CE"> Append the final step: <blockquote> <ol> <li data-md> Queue a task to call any <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑥">custom effects</a> associated with <a data-link-type="dfn" href="#inclusive-descendant" id="ref-for-inclusive-descendant②">inclusive descendants</a> of <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect⑥">associated effect</a> with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③⑤">unresolved</a> iteration progress. <a class="self-link" href="#issue-5b6104df"></a> The procedures for calling custom effects need to be reworked. Currently they probably involve calling too often for changes that could be coalesced. </ol> </blockquote> </ins> <h4 class="heading settled" data-level="3.3.10" id="speed-control">3.3.10. Speed control<a class="self-link" href="#speed-control"></a></h4> <div class="informative-bg"> Add the following sentence: <blockquote> Note that <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②">animation effects</a> also have a <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①④">playback rate</a> associated with them that behaves differently to that defined here. </blockquote> </div> <h4 class="heading settled" data-level="3.3.11" id="the-overall-progress-of-an-animation">3.3.11. Calculating the overall progress of an animation<a class="self-link" href="#the-overall-progress-of-an-animation"></a></h4> An animation’s <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-overallprogress">overallProgress</dfn> is the ratio of its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①④">current time</a> to its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end⑧">associated effect end</a>. <div class="algorithm" data-algorithm="calculate animation overall progress"> The <a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress">overallProgress</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②">animation</a>, <var>animation</var>, is calculated as follows: <dl class="switch"> <dt data-md> If any of the following are true: <ul> <li data-md> <var>animation</var> does not have an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect⑦">associated effect</a>, or <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①⑤">current time</a> is an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③⑥">unresolved</a> time value, </ul> <dd data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress①">overallProgress</a> is null. <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end⑨">associated effect end</a> is zero, <dd data-md> <dl> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①⑥">current time</a> is negative, <dd data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress②">overallProgress</a> is zero. <dt data-md>Otherwise, <dd data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress③">overallProgress</a> is one. </dl> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end①⓪">associated effect end</a> is infinite, <dd data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress④">overallProgress</a> is zero. <dt data-md>Otherwise, <dd data-md> <blockquote> <code><a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress⑤">overallProgress</a> = min(max(<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①⑦">current time</a> / <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end①①">associated effect end</a>, 0), 1) </code> </blockquote> </dl> </div> <h3 class="heading settled" data-level="3.4" id="animation-effects">3.4. Animation effects<a class="self-link" href="#animation-effects"></a></h3> Adds the following text: <blockquote> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect⑧">associated effect</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③">animation</a> is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="directly associated with an animation" data-noexport id="directly-associated-with-an-animation">directly associated</dfn> with that animation. <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③">Animation effects</a> can be combined together into a hierarchy using <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①">group effects</a> (see <a href="#grouping-and-synchronization">§ 3.9 Grouping and synchronization</a>). Only the <a data-link-type="dfn" href="#root" id="ref-for-root">root</a> animation effect of such a hierarchy can be <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation">directly associated with an animation</a>. If an animation effect that has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②">parent group</a> is designated as the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect⑨">associated effect</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation④">animation</a>, the animation effect is removed from its parent group before being associated with the animation. An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦">animation effect</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-with-an-animation">associated with an animation</dfn> if it is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation①">directly associated with an animation</a> or if it has an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor">ancestor</a> <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②">group effect</a> that is directly associated with an animation. </blockquote> <h4 class="heading settled" data-level="3.4.1" id="types-of-animation-effects">3.4.1. Types of animation effects<a class="self-link" href="#types-of-animation-effects"></a></h4> This specification defines two types of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧">animation effects</a>: <ul> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect②">keyframe effects</a>, and <li data-md> <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③">group effects</a>. </ul> <h4 class="heading settled" data-level="3.4.2" id="the-active-interval">3.4.2. The active interval<a class="self-link" href="#the-active-interval"></a></h4> In this level of the specification the lower bound of the active interval is defined as: <blockquote> The lower bound of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval">active interval</a> is determined by the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time">start time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨">animation effect</a> but may be shifted by a <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay③">start delay</a> on the animation effect. </blockquote> The subsequent diagram should also refer to the animation effect start time as opposed to the animation start time. Finally, the description of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay③">end delay</a> is updated to: <blockquote> An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay④">end delay</a> may also be specified but is primarily only of use when sequencing animations such as by using a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①">sequence effect</a>. </blockquote> The normative description is updated as follows: <blockquote> The lower bound of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①">active interval</a> is defined by the combination of the animation effect’s <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①">start time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay④">start delay</a>. An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①">animation effect</a>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation effect start time" data-noexport id="animation-effect-start-time">start time</dfn> is the moment at which the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group④">parent group</a>, if any, has scheduled the animation effect to begin. It is expressed in <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time">inherited time</a>. In most cases, including the case when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①③">animation effect</a> has no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑤">parent group</a>, the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②">start time</a> is zero. The singular exception is <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect②">sequence effects</a> which set the start times of their children as described in <a href="#the-start-time-of-children-of-a-sequence-effect">§ 3.9.4.1 The start time of children of a sequence effect</a>. In addition to the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time④">start time</a>, an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①④">animation effect</a> also has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start-delay">start delay</dfn> which is an offset from the start time. Unlike the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑥">start time</a> which is determined by the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑥">parent group</a>, the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑤">start delay</a> is a property of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑤">animation effect</a> itself. The lower bound of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval②">active interval</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑥">animation effect</a>, expressed in <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①">inherited time space</a>, is the sum of the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑦">start time</a> and the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑥">start delay</a>. These definitions are incorporated in the calculation of the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time">local time</a> (see <a href="#local-time-and-inherited-time">§ 3.4.3 Local time and inherited time</a>) and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time">active time</a>. </blockquote> And finally regarding the definition of the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑤">end time</a>: <blockquote> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="end-time">end time</dfn> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑦">animation effect</a> is the result of evaluating <code>max(<a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑧">start time</a> + <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑦">start delay</a> + <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration">active duration</a> + <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay⑤">end delay</a>, 0)</code>. </blockquote> <h4 class="heading settled" data-level="3.4.3" id="local-time-and-inherited-time">3.4.3. Local time and inherited time<a class="self-link" href="#local-time-and-inherited-time"></a></h4> This section is added. <div class="informative-bg"> In Web Animations all times are relative to some point of reference. These different points of reference produce different time spaces. This can be compared to coordinate spaces as used in computer graphics. The zero time of a time space is analogous to the origin of a coordinate space. Just as with coordinate spaces, time spaces can also be nested. <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect④">Group effects</a> typically perform some transformations on the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value⑤">time values</a> they receive from their <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑦">parent</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑥">animation</a> before passing on the transformed time values to their children. Child <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑧">animation effects</a> then operate within that transformed time space. Children take the transformed time values from their parent—called the <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time②">inherited time</a>—and add their <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑨">start time</a> to establish their own <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①">local time space</a> as illustrated below. <figure> <img alt="Inherited time and local time." src="images/local-time.svg" width="600"> <figcaption> Inherited time and local time. At time <var>t</var>, the <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time③">inherited time</a> is 2.5. For <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑨">animation effect</a> (a) which has a <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⓪">start time</a> of 1, the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②">local time</a> is 1.5. For animation effect (b) which has a start time of 1 and a <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑧">start delay</a> of 1, the local time is also 1.5 since local time is based on an animation effect’s start time only, and not on its start delay. </figcaption> </figure> </div> For an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②②">animation effect</a>, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="inherited-time">inherited time</dfn> at a given moment is based on the first matching condition from the following: <dl class="switch"> <dt data-md>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②③">animation effect</a> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑧">parent group</a>, <dd data-md> the inherited time is the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑨">parent group</a>’s current <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time">transformed time</a>. <dt data-md>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②④">animation effect</a> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation③">directly associated with an animation</a>, <dd data-md> the inherited time is the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①⑧">current time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑦">animation</a>. <dt data-md>Otherwise, <dd data-md> the inherited time is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③⑦">unresolved</a>. </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="local-time">local time</dfn> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②⑤">animation effect</a> is the animation effect’s <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time④">inherited time</a> minus its <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①③">start time</a>. If the inherited time is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③⑧">unresolved</a> then the local time is also unresolved. <h4 class="heading settled" data-level="3.4.4" id="animation-effect-phases-and-states">3.4.4. Animation effect phases and states<a class="self-link" href="#animation-effect-phases-and-states"></a></h4> <div class="informative-bg"> This section is non-normative The non-normative description of the <a data-link-type="dfn" href="#in-play" id="ref-for-in-play">in play</a> state includes the following description; <blockquote> This occurs when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②⑦">animation effect</a> and all its ancestors are in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase" id="ref-for-animation-effect-active-phase">active phase</a>. Animation effects only “move” when they are <a data-link-type="dfn" href="#in-play" id="ref-for-in-play①">in play</a>. It is possible for an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②⑨">animation effect</a> to be in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase" id="ref-for-animation-effect-active-phase①">active phase</a> but not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play②">in play</a>. For example, if an animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⓪">parent group</a> that causes the animation effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval③">active interval</a> to be clipped and both parent and child apply the same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode">fill mode</a>, the child animation effect may be effectively be snapshotted within the active phase despite no longer being in play. </blockquote> Likewise for <a data-link-type="dfn" href="#current" id="ref-for-current">current</a> <blockquote> This will be the case if the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③②">animation effect</a> is <a data-link-type="dfn" href="#in-play" id="ref-for-in-play④">in play</a> or in its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase" id="ref-for-animation-effect-before-phase">before phase</a>, or it has an ancestor for which this is true thereby opening up the possibility that this animation effect might play again (e.g. due to repeating). </blockquote> </div> The normative definition of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="in-play">in play</dfn> includes the following condition: <blockquote> <ol start="2"> <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③④">animation effect</a> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①①">parent group</a> that is <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑤">in play</a> or else the animation effect is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation④">directly associated with an animation</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-state-finished" id="ref-for-play-state-finished①">finished</a>. </ol> </blockquote> In place of: <blockquote> <ol start="2"> <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑥">animation effect</a> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation">associated with an animation</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-state-finished" id="ref-for-play-state-finished②">finished</a>. </ol> </blockquote> The normative definition of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current">current</dfn> adds the following condition: <blockquote> <ul> <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑦">animation effect</a> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①②">parent group</a> and the parent group is <a data-link-type="dfn" href="#current" id="ref-for-current①">current</a>. </ul> </blockquote> Add the following definitions to the list used in determining the phase of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑧">animation effect</a>. <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="at-progress-timeline-boundary">at progress timeline boundary</dfn> <dd data-md> Determined using the following procedure: <ol> <li data-md> If any of the following conditions are true: <ul> <li data-md> the associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑧">animation</a>’s timeline is not a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline③">progress-based timeline</a>, or <li data-md> the associated <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑨">animation</a>’s <a data-link-type="dfn" href="#timeline-duration" id="ref-for-timeline-duration③">timeline duration</a> is unresolved or zero, or <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⓪">animation</a>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑤">playback rate</a> is zero </ul> return false </ol> </dl> <ol> <li data-md> Let <var>effective start time</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①①">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②⑤">start time</a> if resolved, or zero otherwise. <ol> <li data-md> Set <var>unlimited current time</var> based on the first matching condition: <dl> <dt data-md><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②⑥">start time</a> is resolved: <dd data-md> <code>(<var>timeline time</var> - <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②⑦">start time</a>) × <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑥">playback rate</a></code> <dt data-md>Otherwise <dd data-md> <code>animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time①⑨">current time</a></code> </dl> <li data-md> Let <var>effective timeline time</var> be <code><var>unlimited current time</var> / <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①②">animation</a>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑦">playback rate</a> + <var>effective start time</var></code> <li data-md> Let <var>effective timeline progress</var> be <code><var>effective timeline time</var> / <a data-link-type="dfn" href="#timeline-duration" id="ref-for-timeline-duration④">timeline duration</a></code> <li data-md> If <var>effective timeline progress</var> is 0 or 1, return true, otherwise false. </ol> </ol> <a class="self-link" href="#issue-05668d8c"></a> This procedure is not strictly correct for a paused animation if the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①③">animation</a>’s current time is explicitly set, as this can introduce a lead or lag, between the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①⑤">timeline</a>’s current time and animation’s current time. <a class="self-link" href="#issue-c8759f87"></a> This procedure can likely be simplified, and instead determine if at a scrolling boundary regardless of playback rate or start time. The surprising behavior that this is trying to prevent is an animation becoming inactive precisely at the scroll limit, alleviating the need for set a fill-mode with a ScrollTimeline. Checking if timeline <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline-current-time" id="ref-for-timeline-current-time">current time</a> is 0 or timeline duration may be sufficient. Replace: <blockquote> An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑨">animation effect</a> is in the before phase if the animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑤">local time</a> is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④⓪">unresolved</a> and either of the following conditions are met: <ol> <li data-md> the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑥">local time</a> is less than the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-active-boundary-time" id="ref-for-before-active-boundary-time">before-active boundary time</a>, or <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-direction" id="ref-for-animation-direction">animation direction</a> is "backwards" and the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑦">local time</a> is equal to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-active-boundary-time" id="ref-for-before-active-boundary-time①">before-active boundary time</a>. </ol> </blockquote> with: <blockquote> An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⓪">animation effect</a> is in the before phase if the animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑧">local time</a> is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④①">unresolved</a> and either of the following conditions are met: <ol> <li data-md> the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑨">local time</a> is less than the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-active-boundary-time" id="ref-for-before-active-boundary-time②">before-active boundary time</a>, or <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-direction" id="ref-for-animation-direction①">animation direction</a> is "backwards" and the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⓪">local time</a> is equal to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-active-boundary-time" id="ref-for-before-active-boundary-time③">before-active boundary time</a> and not <a data-link-type="dfn" href="#at-progress-timeline-boundary" id="ref-for-at-progress-timeline-boundary">at progress timeline boundary</a>. </ol> </blockquote> Replace: <blockquote> An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④①">animation effect</a> is in the after phase if the animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①①">local time</a> is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④②">unresolved</a> and either of the following conditions are met: <ol> <li data-md> the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①②">local time</a> is greater than the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-after-boundary-time" id="ref-for-active-after-boundary-time">active-after boundary time</a>, or <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-direction" id="ref-for-animation-direction②">animation direction</a> is "forwards" and the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①③">local time</a> is equal to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-after-boundary-time" id="ref-for-active-after-boundary-time①">active-after boundary time</a>. </ol> </blockquote> with: <blockquote> An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④②">animation effect</a> is in the after phase if the animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①④">local time</a> is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④③">unresolved</a> and either of the following conditions are met: <ol> <li data-md> the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑤">local time</a> is greater than the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-after-boundary-time" id="ref-for-active-after-boundary-time②">active-after boundary time</a>, or <li data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-direction" id="ref-for-animation-direction③">animation direction</a> is "forwards" and the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑥">local time</a> is equal to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-after-boundary-time" id="ref-for-active-after-boundary-time③">active-after boundary time</a> and not <a data-link-type="dfn" href="#at-progress-timeline-boundary" id="ref-for-at-progress-timeline-boundary①">at progress timeline boundary</a>. </ol> </blockquote> <h4 class="heading settled" data-level="3.4.5" id="fill-modes">3.4.5. Fill modes<a class="self-link" href="#fill-modes"></a></h4> <div class="informative-bg"> This section is non-normative The description of the forwards fill mode is updated from: <blockquote> When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase" id="ref-for-animation-effect-after-phase">after phase</a>, … </blockquote> to: <blockquote> When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase" id="ref-for-animation-effect-after-phase①">after phase</a>, or when the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase" id="ref-for-animation-effect-active-phase③">active phase</a> but an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor①">ancestor</a> is in its after phase, … </blockquote> The description of the backwards fill mode is updated from: <blockquote> When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase" id="ref-for-animation-effect-before-phase①">before phase</a>, … </blockquote> to: <blockquote> When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase" id="ref-for-animation-effect-before-phase②">before phase</a>, or when the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase" id="ref-for-animation-effect-active-phase④">active phase</a> but an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor②">ancestor</a> is in its before phase, … </blockquote> The description of the both fill mode is updated from: <blockquote> When the animation effect … </blockquote> to: <blockquote> When the animation effect or an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor③">ancestor</a> … </blockquote> (twice). <div class="issue" id="issue-e54c2365"> <a class="self-link" href="#issue-e54c2365"></a> Currently <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function">timing functions</a> that generate results outside the range [0, 1] will behave unexpectedly when applied to group effects, as children will increase iterations or enter into fill mode rather than continuing to extrapolate along their defined behavior (which is what they would do if the timing function applied to them directly). To fix this it is possible we will wish to introduce ‘overflow’ fill modes that respond to time values larger than or smaller than the active time range by extrapolating rather than filling. See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section 15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F</a>. </div> </div> <h3 class="heading settled" data-level="3.5" id="repeating">3.5. Repeating<a class="self-link" href="#repeating"></a></h3> <h4 class="heading settled" data-level="3.5.1" id="iteration-intervals">3.5.1. Iteration intervals<a class="self-link" href="#iteration-intervals"></a></h4> After: <blockquote> The length of a single iteration is called the iteration duration. </blockquote> Add: <blockquote> The initial <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑥">iteration duration</a> of an animation effect is simply its <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration②">intrinsic iteration duration</a>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="intrinsic-iteration-duration">intrinsic iteration duration</dfn> is calculated from the first matching condition from below: <dl class="switch"> <dt data-md>If the animation effect is a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑤">group effect</a>, <dd data-md> Follow the procedure in <a href="#the-intrinsic-iteration-duration-of-a-group-effect">§ 3.9.3 The intrinsic iteration duration of a group effect</a> <dt data-md>If the animation effect is a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect③">sequence effect</a>, <dd data-md> Follow the procedure in <a href="#the-intrinsic-iteration-duration-of-a-sequence-effect">§ 3.9.4.2 The intrinsic iteration duration of a sequence effect</a> <dt data-md>If <a data-link-type="dfn" href="#timeline-duration" id="ref-for-timeline-duration⑤">timeline duration</a> is unresolved or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count">iteration count</a> is zero, <dd data-md> Return 0 <dt data-md>Otherwise <dd data-md> Return <code>(100% - <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⓪">start delay</a> - <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay⑥">end delay</a>) / <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count①">iteration count</a></code> Note: Presently start and end delays are zero until such time as percentage based delays are supported. </dl> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑦">iteration duration</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④③">animation effect</a> may be set by the author to represent a value other than the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration③">intrinsic iteration duration</a>. </blockquote> <h4 class="heading settled" data-level="3.5.2" id="iteration-time-space">3.5.2. Iteration time space<a class="self-link" href="#iteration-time-space"></a></h4> <div class="informative-bg"> This section is non-normative The first few paragraphs of this section are replaced with: <blockquote> We have already encountered different time spaces in describing <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑦">local time</a> and <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑥">inherited time</a> (see <a href="#local-time-and-inherited-time">§ 3.4.3 Local time and inherited time</a>). Repetition introduces yet another time space: the iteration time space. </blockquote> </div> <h4 class="heading settled" data-level="3.5.3" id="interval-timing">3.5.3. Interval timing<a class="self-link" href="#interval-timing"></a></h4> <div class="informative-bg"> This section is non-normative The description is updated as follows: <blockquote> In the examples below, for the repeated effect, at local time 1s, the iteration time is 0. For the sequenced effects, at inherited time 1s, only effect B will be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑥">in play</a>; there is no overlap. </blockquote> And likewise the figure is updated as follows: <figure> <img alt="Illustration of end-point exclusive timing." src="images/endpoint-exclusive-timing.svg" width="600"> <figcaption> Illustration of end-point exclusive timing. For both repeated and sequenced animation effects there is no overlap at the boundaries between intervals. </figcaption> </figure> </div> <h3 class="heading settled" data-level="3.6" id="animation-effect-speed-control">3.6. Animation effect speed control<a class="self-link" href="#animation-effect-speed-control"></a></h3> (This section is added.) Like <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑤">animations</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④④">animation effects</a> also have a <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-noexport id="animation-effect-playback-rate">playback rate</dfn> parameter. The <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑧">playback rate</a> of an animation effect is a finite real number that acts as a multiplier when calculating the animation effect’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time①">transformed time</a> from its <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑧">local time</a>. The effect of setting the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑨">playback rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑦">animation effect</a> differs from the setting the playback rate on an animation. Its behavior is defined in the timing calculations given in <a href="#core-animation-effect-calculations">§ 3.7 Core animation effect calculations</a>. <div class="informative-bg"> This section is non-normative In summary, the behavior of the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②①">playback rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑧">animation effect</a> is as follows: <ul> <li data-md> The <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②②">playback rate</a> is applied only to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval④">active interval</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑨">animation effect</a> and not to the time while it is <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①①">delayed</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode①">filling</a>. <li data-md> Setting a negative <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②③">playback rate</a> on an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⓪">animation effect</a> causes the animation effect to begin at the end of its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑤">active interval</a>. This differs from the playback rate on an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑥">animation</a>. Setting a playback rate on an animation to a negative value at a moment before the animation’s associated effect has begun, will result in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect①⓪">associated effect</a> never playing. <li data-md> Setting the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②⑥">playback rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤②">animation effect</a> affects the calculated value of the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①">active duration</a> (see <a href="#calculating-the-active-duration">§ 3.7.2 Calculating the active duration</a>). <li data-md> Changing the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②⑦">playback rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤③">animation effect</a> whose <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑨">local time</a> is within its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑥">active interval</a> will cause it to jump. This is because the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration②">active duration</a> will be updated but the local time will not. Furthermore, if other <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤④">animation effects</a> depend on the animation effect’s <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration③">active duration</a>, such as sibling animation effect in a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect④">sequence effect</a>, they too may jump as a result of setting the animation effect’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②⑧">playback rate</a>. For runtime speed control the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②⑨">playback rate</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑨">animation</a> should be used. </ul> </div> <h3 class="heading settled" data-level="3.7" id="core-animation-effect-calculations">3.7. Core animation effect calculations<a class="self-link" href="#core-animation-effect-calculations"></a></h3> <h4 class="heading settled" data-level="3.7.1" id="animation-effect-calculations-overview">3.7.1. Overview<a class="self-link" href="#animation-effect-calculations-overview"></a></h4> <div class="informative-bg"> This section is non-normative Update description from: <blockquote> At the core of the Web Animations timing model is the process that takes a <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②①">local time</a> value and converts it to an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress②">iteration progress</a>. </blockquote> to: <blockquote> At the core of the Web Animations timing model is the process that takes an <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑦">inherited time</a> value and converts it to an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress③">iteration progress</a>. </blockquote> Update diagram to show animation effect playback rate: <figure> <img alt="Calculation of the active duration." src="images/active-duration-calculation.svg" width="650"> <figcaption> Calculation of the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration④">active duration</a> is based on multiplying the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑧">iteration duration</a> by the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count②">iteration count</a> and then dividing by the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③⓪">playback rate</a>. </figcaption> </figure> Update: <blockquote> Having established the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑤">active duration</a>, the process for transforming an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⑧">animation effect</a>’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②②">local time</a> into its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress">transformed progress</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress④">iteration progress</a>) is illustrated below. </blockquote> to: <blockquote> Having established the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑥">active duration</a>, the process for transforming an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⑨">animation effect</a>’s <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑧">inherited time</a> into its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress①">transformed progress</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑤">iteration progress</a>) is illustrated below. </blockquote> Update the time calculations diagram as follows: <figure> <img alt="An overview of timing model calculations." src="images/time-calculations.svg" width="650"> <figcaption> An overview of timing model calculations. (1) The <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑨">inherited time</a> is converted into a <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②③">local time</a> by incorporating the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①④">start time</a>. (2) The local time is converted into an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time①">active time</a> by incorporating the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①②">start delay</a>. (3) The active time is divided by the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑨">iteration duration</a> incorporating also the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-start" id="ref-for-iteration-start">iteration start</a> property and the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③①">playback rate</a> property to produce the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#overall-progress" id="ref-for-overall-progress">overall progress</a>. (4) The overall progress time is then converted to an offset within a single iteration: the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#simple-iteration-progress" id="ref-for-simple-iteration-progress">simple iteration progress</a>. (5) The simple iteration progress is converted into a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#directed-progress" id="ref-for-directed-progress">directed progress</a> by incorporating the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#playback-direction" id="ref-for-playback-direction">playback direction</a>. (6) Finally, a timing function is applied to the directed progress to produce the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress②">transformed progress</a>. </figcaption> </figure> Update: <blockquote> The first step, calculating the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑤">local time</a> is described in Local time. </blockquote> to: <blockquote> The first step, calculating the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑥">local time</a> is described in <a href="#local-time-and-inherited-time">§ 3.4.3 Local time and inherited time</a>. </blockquote> </div> <h4 class="heading settled" data-level="3.7.2" id="calculating-the-active-duration">3.7.2. Calculating the active duration<a class="self-link" href="#calculating-the-active-duration"></a></h4> Updated to: <blockquote> In order to calculate the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑦">active duration</a> we first define the <a data-link-type="dfn" href="#repeated-duration" id="ref-for-repeated-duration">repeated duration</a> as follows: <blockquote> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="repeated-duration">repeated duration</dfn> = <code><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①⓪">iteration duration</a> × <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count③">iteration count</a></code> If either the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①①">iteration duration</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count④">iteration count</a> are zero, the <a data-link-type="dfn" href="#repeated-duration" id="ref-for-repeated-duration①">repeated duration</a> is zero. This clarification is needed since the result of infinity multiplied by zero is undefined according to IEEE 754-2008. </blockquote> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-duration">active duration</dfn> is calculated according to the following steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③②">playback rate</a> is zero, return <code>Infinity</code>. <li data-md> Otherwise, return <code><a data-link-type="dfn" href="#repeated-duration" id="ref-for-repeated-duration②">repeated duration</a> / abs(<a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③③">playback rate</a>)</code>. </ol> </blockquote> <h4 class="heading settled" data-level="3.7.3" id="transforming-the-local-time">3.7.3. Transforming the local time<a class="self-link" href="#transforming-the-local-time"></a></h4> <h5 class="heading settled" data-level="3.7.3.1" id="calculating-the-active-time">3.7.3.1. Calculating the active time<a class="self-link" href="#calculating-the-active-time"></a></h5> Update the qualification on the definition of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time③">active time</a> to include reference to the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①④">parent group</a>: <blockquote> However, it is only defined when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥⓪">animation effect</a> should produce an output and hence depends on its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode②">fill mode</a> and phase as well as the phase of its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑤">parent group</a>, if any, as follows, </blockquote> Update the definition to include the additional steps to for each phase: <blockquote> <dl class="switch"> <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase" id="ref-for-animation-effect-before-phase④">before phase</a>, <dd data-md> The result depends on the first matching condition from the following, <dl class="switch"> <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑥">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase" id="ref-for-animation-effect-after-phase③">after phase</a>, <dd data-md> Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④④">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value⑦">time value</a>. </dl> … <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase" id="ref-for-animation-effect-active-phase⑤">active phase</a>, <dd data-md> The result depends on the first matching condition from the following, <dl class="switch"> <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑦">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase" id="ref-for-animation-effect-before-phase⑤">before phase</a>, and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode③">fill mode</a> of this animation effect is none or class="prop-value">forwards, <dd data-md> Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④⑤">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value⑧">time value</a>. <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑧">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase" id="ref-for-animation-effect-after-phase④">after phase</a>, and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode④">fill mode</a> of this animation effect is none or class="prop-value">backwards, <dd data-md> Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④⑥">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value⑨">time value</a>. <dt data-md>Otherwise, <dd data-md> Return the result of evaluating <code><a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑦">local time</a> - <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①③">start delay</a></code>. </dl> <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase" id="ref-for-animation-effect-after-phase⑤">after phase</a>, <dd data-md> The result depends on the first matching condition from the following, <dl class="switch"> <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑨">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase" id="ref-for-animation-effect-before-phase⑥">before phase</a>, <dd data-md> Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④⑦">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value①⓪">time value</a>. </dl> … <dt data-md>Otherwise (the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑧">local time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④⑧">unresolved</a>), <dd data-md> Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④⑨">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value①①">time value</a>. </dl> </blockquote> <h5 class="heading settled" data-level="3.7.3.2" id="calculating-the-overall-progress">3.7.3.2. Calculating the overall progress<a class="self-link" href="#calculating-the-overall-progress"></a></h5> In the definition of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#overall-progress" id="ref-for-overall-progress②">overall progress</a> update the “Otherwise” branch of the definition of the <var>initial progress</var> as: <blockquote> <dl> <dt data-md>Otherwise, <dd data-md> Calculate the <var>overall progress</var> following the first matching condition from below: <dl class="switch"> <dt data-md>If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③④">playback rate</a> is less than zero, <dd data-md> Let <var>overall progress</var> be <code>(<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time④">active time</a> - <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑧">active duration</a>) × <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③⑤">playback rate</a> / <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①②">iteration duration</a></code>. <dt data-md>If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③⑥">playback rate</a> is zero, <dd data-md> Let <var>overall progress</var> be zero. <dt data-md>Otherwise, <dd data-md> Let <var>overall progress</var> be <code>(<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time⑤">active time</a> × <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③⑦">playback rate</a>) / <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①③">iteration duration</a></code>. </dl> </dl> </blockquote> <h3 class="heading settled" data-level="3.8" id="time-transformations">3.8. Time transformations<a class="self-link" href="#time-transformations"></a></h3> <div class="issue" id="issue-b2228569"> <a class="self-link" href="#issue-b2228569"></a> Currently, the set of <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①">timing functions</a> allowed on a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑥">group effect</a> is not restricted. This has raised concern about complexity of implementation and also complexity of behavior with regards to fill modes. As a result, allowing the full set of timing functions on group effects is considered at risk. Alternatives are to either restrict timing functions on group effects to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-easing-1/#linear-easing-function" id="ref-for-linear-easing-function">linear timing function</a> or to a set of “simple” timing functions that have properties that alleviate some of the concerns with the more complex timing functions. See <a href="http://lists.w3.org/Archives/Public/public-fx/2013JulSep/0076.html">section 2 of the discussion from August 2013</a>. </div> <h4 class="heading settled" data-level="3.8.1" id="calculating-the-transformed-progress">3.8.1. Calculating the transformed progress<a class="self-link" href="#calculating-the-transformed-progress"></a></h4> Replace the second step as the calculation of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function-before-flag" id="ref-for-easing-function-before-flag">before flag</a> (to accommodate the effect playback rate): <blockquote> <ol> <li data-md> If either the <var>current direction</var> is class="prop-value">forwards or the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③⑧">playback rate</a> ≥ 0 (but not when both conditions are true), let <var>going forwards</var> be true, otherwise it is false. </ol> </blockquote> <h4 class="heading settled" data-level="3.8.2" id="calculating-the-transformed-time">3.8.2. Calculating the transformed time<a class="self-link" href="#calculating-the-transformed-time"></a></h4> (This section is added.) The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="transformed-time">transformed time</dfn> of an animation effect is simply the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress③">transformed progress</a> multiplied by the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①④">iteration duration</a>. If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress④">transformed progress</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑤⓪">unresolved</a>, then the <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time②">transformed time</a> is also unresolved. If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress⑤">transformed progress</a> is zero and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①⑤">iteration duration</a> is infinity, then the <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time③">transformed time</a> is zero. <h3 class="heading settled" data-level="3.9" id="grouping-and-synchronization">3.9. Grouping and synchronization<a class="self-link" href="#grouping-and-synchronization"></a></h3> <div class="informative-bg"> This section is non-normative While it is possible to set the timing properties of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥①">animation effects</a> individually, it is often useful to synchronize animation effects so that they share common timing properties and maintain their temporal relationship. This is achieved using an <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑦">group effect</a>. A simple example is illustrated below. <figure> <img alt="Using groups to share common timing properties." src="images/grouping-delay.svg" width="800"> <figcaption> Using groups to share common timing properties. (a) Shows setting a delay of 5 seconds on individual animations. (b) Produces the same effect by setting the delay on the group. </figcaption> </figure> When a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑧">group effect</a> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation⑤">directly associated with an animation</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥③">animation effect</a> associated with the group effect can be seeked, paused, and stopped as a unit. </div> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="group-effect">group effect</dfn> is a type of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥④">animation effect</a> that contains an ordered sequence of zero or more animation effects known as <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="child effect" data-noexport id="child-effect">child effects</dfn>. At a given moment, an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥⑥">animation effect</a> may be a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect">child effect</a> of at most one <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⓪">group effect</a> known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="parent-group">parent group</dfn>. The <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⓪">parent group</a> cannot be the same animation effect as the child effect itself. By nesting <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①①">group effects</a> it is possible to create hierarchical tree structures. The following terms are used to describe the parts and properties of such structures and are defined in <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a>: <ul> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="tree order" data-noexport id="tree-order"><a href="https://www.w3.org/TR/dom/#concept-tree-order"> tree order</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="root" data-noexport id="root"><a href="https://www.w3.org/TR/dom/#concept-tree-root"> root</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="ancestor" data-noexport id="ancestor"><a href="https://www.w3.org/TR/dom/#concept-tree-ancestor"> ancestor</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="descendant" data-noexport id="descendant"><a href="https://www.w3.org/TR/dom/#concept-tree-descendant"> descendant</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="inclusive ancestor" data-noexport id="inclusive-ancestor"><a href="https://www.w3.org/TR/dom/#concept-tree-inclusive-ancestor"> inclusive ancestor</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="inclusive descendant" data-noexport id="inclusive-descendant"><a href="https://www.w3.org/TR/dom/#concept-tree-inclusive-descendant"> inclusive descendant</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="next sibling" data-noexport id="next-sibling"><a href="https://www.w3.org/TR/dom/#concept-tree-next-sibling"> next sibling</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="previous sibling" data-noexport id="previous-sibling"><a href="https://www.w3.org/TR/dom/#concept-tree-previous-sibling"> previous sibling</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="first child" data-noexport id="first-child"><a href="https://www.w3.org/TR/dom/#concept-tree-first-child"> first child</a></dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="last child" data-noexport id="last-child"><a href="https://www.w3.org/TR/dom/#concept-tree-last-child"> last child</a></dfn> </ul> Note: in applying these definitions to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥⑧">animation effects</a>, the term parent refers exclusively to a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②①">parent group</a> and does not include the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⓪">animation</a> which with an animation effect may be <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation⑥">directly associated</a> despite the fact that conceptually the animation acts as a parent time source. The temporal relationship between a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect②">child effect</a> and its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②②">parent group</a> is incorporated in the definition of <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①⓪">inherited time</a> (see <a href="#local-time-and-inherited-time">§ 3.4.3 Local time and inherited time</a>). <h4 class="heading settled" data-level="3.9.1" id="relationship-of-group-time-to-child-time">3.9.1. Relationship of group time to child time<a class="self-link" href="#relationship-of-group-time-to-child-time"></a></h4> <div class="informative-bg"> This section is non-normative The timing of the children of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①②">group effect</a> is based on the timing of the group. Specifically, times for the children are based on the parent’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time④">transformed time</a>. With regards to repetition, this means the children operate inside an iteration of the parent. For example, if a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①③">group effect</a> has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count⑤">iteration count</a> of 2, then the children of the group will all play twice since they effectively play inside the group’s iterations. <figure> <img alt="The effect of multiple iterations on the children of a group." src="images/grouping-repetition.svg" width="600"> <figcaption> Since children of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①④">group effect</a> base their timing on the group’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑤">transformed time</a>, when the group repeats, the children play again. </figcaption> </figure> Note that even in this case, the child <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⓪">animation effects</a> still have only one <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑦">active interval</a>. However, as a result of the parent’s timing, the active interval is played twice. If an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count⑥">iteration count</a> is specified for the children of a group as well as for the group itself, the effect is as if the iteration count of the group was multiplied with the iteration count of the children. <figure> <img alt="Iteration counts are multiplicative." src="images/grouping-repetition-and-animation-repetition.svg" width="600"> <figcaption> Specifying an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count⑨">iteration count</a> of 2 on a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑤">group effect</a> and an iteration count of 3 on one of its children results in that child playing 6 times. </figcaption> </figure> A further result of the children of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑥">group effect</a> basing their timing on the group’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑥">transformed time</a> is that they cannot animate outside of the group’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑨">active interval</a>. This is because the transformed time of a group will not change outside its active interval. This allows groups to clip the playback of their children. <figure> <img alt="Groups clip the active interval of contained children." src="images/grouping-clipping.svg" width="600"> <figcaption> In the first instance, an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦①">animation effect</a> has a negative delay and an infinite <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count①①">iteration count</a>. However, when a similar animation effect is placed inside a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑦">group effect</a> with a specified <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①⑥">iteration duration</a> it has the effect of clipping the child animation effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①①">active interval</a>. </figcaption> </figure> Some further consequences of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑧">group effect</a> children basing their timing on their parent group’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑧">transformed time</a> are: <ul> <li data-md> Setting the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③⑨">playback rate</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑨">group effect</a> will speed up or slow down all children. <li data-md> Changing the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#playback-direction" id="ref-for-playback-direction①">playback direction</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⓪">group effect</a> will change the direction of all children. <li data-md> Applying a <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function②">timing function</a> to a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②①">group effect</a> will affect the progress of all children. </ul> </div> <h4 class="heading settled" data-level="3.9.2" id="the-start-time-of-children-of-a-group-effect">3.9.2. The start time of children of a group effect<a class="self-link" href="#the-start-time-of-children-of-a-group-effect"></a></h4> The <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑤">start time</a> of a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect③">child effect</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②②">group effect</a> is zero. Note that specific types of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②③">group effects</a> may override this definition to provide other kinds of synchronization behavior. <h4 class="heading settled" data-level="3.9.3" id="the-intrinsic-iteration-duration-of-a-group-effect">3.9.3. The intrinsic iteration duration of a group effect<a class="self-link" href="#the-intrinsic-iteration-duration-of-a-group-effect"></a></h4> The <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration④">intrinsic iteration duration</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②④">group effect</a> is based on the time when the last <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect④">child effect</a> completes its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①②">active interval</a> and depends on the number of child effects as follows. <dl class="switch"> <dt data-md>If the group has no <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect⑥">child effects</a>, <dd data-md> the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑤">intrinsic iteration duration</a> is zero. <dt data-md>Otherwise, <dd data-md> <ol> <li data-md> Let <var>maximum end time</var> be the maximum value after calculating the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑥">end time</a> of each <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect⑦">child effect</a> in the group. The end time may be expressed as a time or a percentage (in the case of a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline④">progress-based timeline</a>). In the event of mixed time and percentage end times, the largest time based value equates to 100% for the purpose of time scaling. <li data-md> The <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑥">intrinsic iteration duration</a> is the result of evaluating <code>max(0, <var>maximum end time</var>)</code>. </ol> </dl> This definition of the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑦">intrinsic iteration duration</a> may be overridden by specific types of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑤">group effects</a>. <h4 class="heading settled" data-level="3.9.4" id="sequence-effects">3.9.4. Sequence effects<a class="self-link" href="#sequence-effects"></a></h4> <div class="informative-bg"> This section is non-normative Specific types of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑥">group effects</a> can be used to provide different kinds of synchronization behavior for their children. This specification defines one additional type of group effect: a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect⑤">sequence effect</a>. Sequence effects arrange the start times of their children so that they run one at a time, in turn. Compare the two arrangements illustrated below: <figure> <img alt="Group effects and sequence effects." src="images/grouping-types.svg" width="600"> <figcaption> Group effects and sequence effects. (a) is a regular <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑧">group effect</a> where all the children run simultaneously. (b) is a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect⑦">sequence effect</a> where the children run in turn. </figcaption> </figure> Since <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑨">group effects</a> can also contain other group effects, complex synchronization is possible by combining different types of groups as illustrated below. <figure> <img alt="Nesting of group effects." src="images/grouping-nesting.svg" width="600"> <figcaption> A <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect⑧">sequence effect</a> that contains a regular <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③①">group effect</a> as a child. The group effect waits for the previous child of the sequence effect to finish, and then the children of the group effect play simultaneously. After they have finished the next child of the sequence effect plays. </figcaption> </figure> </div> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sequence-effect">sequence effect</dfn> is a type of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③④">group effect</a> that schedules its <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect⑧">child effects</a> such that they play in turn following their order in the group. This sequencing is achieved by adjusting the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑥">start time</a> of each child effect in the group. <h5 class="heading settled" data-level="3.9.4.1" id="the-start-time-of-children-of-a-sequence-effect">3.9.4.1. The start time of children of a sequence effect<a class="self-link" href="#the-start-time-of-children-of-a-sequence-effect"></a></h5> The <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑦">start time</a> of a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①⓪">child effect</a> of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①①">sequence effect</a> is the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑨">end time</a> of the child’s <a data-link-type="dfn" href="#previous-sibling" id="ref-for-previous-sibling">previous sibling</a>. If the child has no previous sibling the start time is zero. <div class="note" role="note"> When the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑨">active duration</a> is positive infinity the behavior for calculating the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time①⓪">end time</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦④">animation effect</a> and the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑧">start time</a> of subsequent children follows the usual behavior defined by IEEE 754-2008. As a result, if any of the children of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①②">sequence effect</a> has an infinite active duration, any children that occur later in the sequence will not play. Similarly, the above definition does not restrict <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑨">start times</a> to positive values and hence some children may not play due to a negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①④">start delay</a> on children that occur earlier in the group since their <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①③">active interval</a> may end before the group’s start time. </div> <div class="informative-bg"> This section is non-normative Because the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①④">active interval</a> is based on the sum of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑤">animation effect</a>’s <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②①">start time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑤">start delay</a>, the active intervals of children of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①③">sequence effect</a> need not run in strict sequence but can be shifted back and forth by using the start delay as shown in the following diagram. <figure> <img alt="Using negative start delays to overlap children of seq groups" src="images/sequence-groups-and-start-delays.svg" width="600"> <figcaption> Example of using the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑦">start delay</a> on children of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①④">sequence effect</a> to shift their timing so that they overlap (a negative delay) or are spaced apart (a positive delay). </figcaption> </figure> A negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑧">start delay</a> can be used to cause the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑥">active interval</a> of two children to overlap. Note that the start delay affects the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②②">start time</a> of subsequent children in the group. </div> <h5 class="heading settled" data-level="3.9.4.2" id="the-intrinsic-iteration-duration-of-a-sequence-effect">3.9.4.2. The intrinsic iteration duration of a sequence effect<a class="self-link" href="#the-intrinsic-iteration-duration-of-a-sequence-effect"></a></h5> The <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑧">intrinsic iteration duration</a> of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑤">sequence effect</a> is equivalent to the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②③">start time</a> of a hypothetical <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①①">child effect</a> appended to the group’s children calculated according to the definition in <a href="#the-start-time-of-children-of-a-sequence-effect">§ 3.9.4.1 The start time of children of a sequence effect</a> unless that produces a negative value, in which case the intrinsic iteration duration is zero. As a result, if the <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑥">sequence effect</a> has no <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①②">child effects</a> the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①⓪">intrinsic iteration duration</a> will be zero. <h2 class="heading settled" data-level="4" id="animation-model">4. Animation model<a class="self-link" href="#animation-model"></a></h2> <h3 class="heading settled" data-level="4.1" id="animation-types">4.1. Animation types<a class="self-link" href="#animation-types"></a></h3> <h4 class="heading settled" data-level="4.1.1" id="not-animatable-section">4.1.1. Not animatable<a class="self-link" href="#not-animatable-section"></a></h4> Update the description of an effect that targets a non-animated property as: <blockquote> An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑥">animation effect</a> that targets a property that is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#not-animatable" id="ref-for-not-animatable">not animatable</a> will still exhibit the usual behavior for an animation effect such as occupying time in a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑦">sequence effect</a> and delaying the fulfillment of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②②">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-finished-promise" id="ref-for-current-finished-promise①">current finished promise</a>. </blockquote> <h3 class="heading settled" data-level="4.2" id="keyframe-effects">4.2. Keyframe Effects<a class="self-link" href="#keyframe-effects"></a></h3> <h4 class="heading settled" data-level="4.2.1" id="the-effect-value-of-a-keyframe-animation-effect">4.2.1. The effect value of a keyframe effect<a class="self-link" href="#the-effect-value-of-a-keyframe-animation-effect"></a></h4> The procedure for computing the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-value" id="ref-for-effect-value">effect value</a> of a single property referenced by a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect③">keyframe effect</a> as one of its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-property" id="ref-for-target-property">target properties</a>, for a given <var>iteration progress</var>, <var>current iteration</var> and <var>underlying value</var> is amended by inserting the following step after the step to apply the keyframe effect composite mode. <ol start="12"> <li data-md> For each <var>keyframe</var> in <var>interval endpoints</var>: <ol> <li data-md> (As in web-animations-1). <li data-md> If this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect④">keyframe effect</a> has an <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation">iteration composite operation</a> of <a data-link-type="dfn" href="#iteration-composite-operation-accumulate" id="ref-for-iteration-composite-operation-accumulate">accumulate</a>, apply the following step <var>current iteration</var> times: <ul> <li data-md> replace the property value of <var>target property</var> on <var>keyframe</var> with the result of combining the property value on the final keyframe in <var>property-specific keyframes</var> (<var>V</var>a) with the property value on <var>keyframe</var> (<var>V</var>b) using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation">accumulation procedure</a> defined for <var>target property</var>. </ul> Note: The order of arguments here is important. In the case where the animation type of the target property does not define a procedure for accumulation or addition, the default definition for these procedures result in <var>V</var>b being returned. When performing iteration composition on properties that do not support accumulation, the result should be the initial property value of <var>target property</var> on <var>keyframe</var>, hence we make this <var>V</var>b in the above step. </ol> </ol> <h3 class="heading settled" data-level="4.3" id="combining-effects">4.3. Combining effects<a class="self-link" href="#combining-effects"></a></h3> <h4 class="heading settled" data-level="4.3.1" id="the-effect-stack">4.3.1. The effect stack<a class="self-link" href="#the-effect-stack"></a></h4> The procedure for sorting effects appends the following step: <blockquote> <ol> <li data-md> Sort <var>A</var> and <var>B</var> in <a data-link-type="dfn" href="#tree-order" id="ref-for-tree-order">tree order</a>. (By this point, <var>A</var> and <var>B</var> must have the same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②③">animation</a> since otherwise the order would have been resolved in the previous step.) </ol> </blockquote> <a class="self-link" href="#issue-d462e32e"></a> The "associated animation of an animation effect" definition used when sorting animation effects needs to be revised to use the <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①">associated with an animation</a> definition introduced in this level of the specification so that it correctly handles group effects. <h3 class="heading settled" data-level="4.4" id="effect-accumulation-section">4.4. Effect accumulation<a class="self-link" href="#effect-accumulation-section"></a></h3> Similar to the compositing performed between <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-value" id="ref-for-effect-value①">effect values</a> (see <a href="https://drafts.csswg.org/web-animations-1/#effect-composition"><cite>Web Animations</cite> § 5.4.4 Effect composition</a>), the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-composite-operation">iteration composite operation</dfn> determines how values are combined between successive iterations of the same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect⑤">keyframe effect</a>. This specification defines two <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation①">iteration composite operations</a> as follows: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="iteration composite operation replace" data-noexport id="iteration-composite-operation-replace">replace</dfn> <dd data-md> Each successive iteration is calculated independently of previous iterations. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="iteration composite operation accumulate" data-noexport id="iteration-composite-operation-accumulate">accumulate</dfn> <dd data-md> Successive iterations of the animation are <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation①">accumulated</a> with the final value of the previous iteration. The application of the <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation②">iteration composite operation</a> is incorporated in the calculation of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-value" id="ref-for-effect-value②">effect value</a> in <a href="#the-effect-value-of-a-keyframe-animation-effect">§ 4.2.1 The effect value of a keyframe effect</a>. </dl> <ins cite="#amend-CE"> <h3 class="heading settled" data-level="4.5" id="custom-effects">4.5. Custom effects<a class="self-link" href="#custom-effects"></a></h3> (This section is added.) <a class="self-link" href="#issue-3b34db07"></a> This whole feature needs to be revisited. The current thinking is that rather than having custom effects, we should simply have an <code>onupdate</code> callback on each <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑧">animation effect</a>. That would allow, for example, augmenting an existing effect with a function that performs logging or triggers additional actions at certain times. With the current arrangement, doing this would require adding a parent group just to achieve this. <div class="informative-bg"> This section is non-normative In some situations the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑨">animation effects</a> provided by Web Animations may be insufficient. For example, the animation effects defined here are only able to target certain CSS properties. They are unable, therefore, to modify the <a href="https://www.w3.org/TR/SVG11/struct.html#__svg__SVGSVGElement__currentScale"><code>currentScale</code></a> property of an SVG element to smoothly zoom the viewport without affecting the document content. In such cases, where the provided <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧①">animation effects</a> do not provide needed functionality, an effect defined by script may be used. Such <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑦">custom effects</a> receive an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑥">iteration progress</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-iteration" id="ref-for-current-iteration">current iteration</a> from the timing model and are responsible for producing an effect corresponding to the specified time. Using an effect defined in script it is possible to animate not only otherwise un-animatable attributes and properties, but potentially anything that is accessible via script, including even producing audio or creating vibrations. For example, using a <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑧">custom effect</a> that draws to a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/canvas.html#canvas" id="ref-for-canvas">canvas</a></code> element, it is possible to produce a complex animated effect featuring patterns that may be difficult to create using CSS or SVG. Compared to using <a href="https://www.w3.org/TR/animation-timing/">Timing control for script-based animations</a>, this approach ensures the animation is frame-rate independent and can be paused, reversed, eased with timing effects, accelerated, synchronized with other animations, and be controlled in the same manner as any other Web Animations animation without any additional programming. </div> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="custom-effect">custom effect</dfn> is an author-defined programming callback that is passed timing information as part of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events" id="ref-for-update-animations-and-send-events">update animations and send events</a> procedure. <a class="self-link" href="#issue-e49078ba"></a> It needs to be called whenever timing properties are updated too, right? <h4 class="heading settled" data-level="4.5.1" id="updating-custom-effects">4.5.1. Sampling custom effects<a class="self-link" href="#updating-custom-effects"></a></h4> <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑨">Custom effects</a> are called for each referencing <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧②">animation effect</a> when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events" id="ref-for-update-animations-and-send-events①">update animations and send events</a> procedure is performed (henceforth referred to simple as an update) based on the following criteria. <ol> <li data-md> If, on the previous update, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧③">animation effect</a> referencing the <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①⓪">custom effect</a>: <ul> <li data-md> was <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect">in effect</a>, and <li data-md> referenced this same <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①①">custom effect</a>, and <li data-md> had a different <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element">target element</a> </ul> Call the callback passing an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑤②">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑦">iteration progress</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element①">target element</a> from the previous update as parameters to the callback. <li data-md> Call the callback for the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element②">target element</a> based on the first matching condition from the following: <dl class="switch"> <dt data-md>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧④">animation effect</a> referencing the custom effect is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect①">in effect</a> but was in effect in the previous update, <dd data-md> Call the callback passing an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑤③">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑧">iteration progress</a> and the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element③">target element</a> as parameters to the callback. <dt data-md>Otherwise, if the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑤">animation effect</a> referencing the custom effect: <dd data-md> <ul> <li data-md> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect③">in effect</a>, and <li data-md> was not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect④">in effect</a> in the previous update, or was in effect but with a different <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑨">iteration progress</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-iteration" id="ref-for-current-iteration①">current iteration</a>, </ul> <dd data-md> Call the callback passing with the referencing <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑥">animation effect</a>’s current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress①⓪">iteration progress</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element④">target element</a> as parameters to the callback. </dl> </ol> <div class="issue" id="issue-55235f86"> <a class="self-link" href="#issue-55235f86"></a> There may be use cases where an action needs to be triggered at a specific point in an animation tree. In many cases this can be achieved by inserting a custom effect with a step-start easing that spans the period during which the action should be triggered. However, this can impose additional layout requirements on the content which might be cumbersome to accommodate. Some alternatives under consideration: <ul> <li data-md> Additional calling conditions could be defined to accommodate zero-width custom effects. For example, it could be required that the callback be called if (given infinite precision) there was a time between the previous and current update times that aligned with the custom effect. <li data-md> Instead of adding special calling conditions to custom effects, a new type of animation effect, Trigger, could be introduced. The trigger would only ever act as a zero-width custom effect as described above, its constructor would take a callback function, but not require a target or timing. It could also specify other calling conventions, for example whether it should only trigger in a specific playback direction. </ul> </div> <h4 class="heading settled" data-level="4.5.2" id="execution-order-of-custom-effects">4.5.2. Execution order of custom effects<a class="self-link" href="#execution-order-of-custom-effects"></a></h4> Since <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①②">custom effects</a>, unlike <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑦">animation effects</a>, are not limited to a single <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-property" id="ref-for-target-property①">target property</a>, the steps for assessing their order of execution differs from animation effects.f <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①③">Custom effects</a> are executed after all <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑨">animation effects</a> have completed and applied their result to their targets (see Applying the composited result). <a class="self-link" href="#issue-df790f19"></a> Need to define this more precisely. Are styles flushed? Presumably they are. Can we suspend reflow for the duration of executing the script-based animation effects and just do it once afterwards? Within the set of <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①④">custom effects</a>, the order of execution is the same as that defined for <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⓪">animation effects</a> in <a href="#the-effect-stack">§ 4.3.1 The effect stack</a>. Items sorted earlier are executed before those sorted later. </ins> <h2 class="heading settled" data-level="5" id="programming-interface">5. Programming interface<a class="self-link" href="#programming-interface"></a></h2> <h3 class="heading settled" data-level="5.1" id="the-animationtimeline-interface">5.1. The <code>AnimationTimeline</code> interface<a class="self-link" href="#the-animationtimeline-interface"></a></h3> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline"><c- g>AnimationTimeline</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationtimeline-currenttime" id="ref-for-dom-animationtimeline-currenttime"><c- g>currentTime</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationtimeline-duration" id="ref-for-dom-animationtimeline-duration"><c- g>duration</c-></a>; <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②④"><c- n>Animation</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationtimeline-play" id="ref-for-dom-animationtimeline-play"><c- g>play</c-></a> (<c- b>optional</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animationtimeline-play-effect-effect" id="ref-for-dom-animationtimeline-play-effect-effect"><c- g>effect</c-></a> = <c- b>null</c->); }; </pre> <div class="attributes"> Update the attribute type for currentTime. <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline" data-dfn-type="attribute" data-export id="dom-animationtimeline-currenttime"><code>currentTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish②">CSSNumberish</a>, readonly, nullable <dd data-md> Returns the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline-current-time" id="ref-for-timeline-current-time①">current time</a> for this timeline or <code>null</code> if this timeline is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline⑤">inactive</a>. The value is expressed as a percentage for a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline⑤">progress-based timeline</a>, or as a double in milliseconds otherwise. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline" data-dfn-type="attribute" data-export id="dom-animationtimeline-duration"><code>duration</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish③">CSSNumberish</a>, readonly, nullable <dd data-md> Returns the <a data-link-type="dfn" href="#timeline-duration" id="ref-for-timeline-duration⑥">duration</a> for this timeline. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline" data-dfn-type="method" data-export data-lt="play(effect)|play()" id="dom-animationtimeline-play"><code> Animation play(optional AnimationEffect? effect = null)</code></dfn> <dd data-md> Creates a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑤">Animation</a></code> object associated with this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①⑥">timeline</a> that begins playback as soon as it is <a data-link-type="dfn" href="#ready" id="ref-for-ready④">ready</a>. If <var>effect</var> is specified, it will be used as the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect①①">associated effect</a>. <a class="self-link" href="#issue-6fb09aae"></a> It has been suggested this method be renamed, or even removed (see <a href="https://github.com/w3ctag/spec-reviews/blob/master/2013/10/Web%20Animations.md#issue-play-method">TAG feedback</a>). <a class="self-link" href="#issue-befeaed2"></a> Need to define the start behavior when <var>effect</var> is null. The new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑥">Animation</a></code> object is created using the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-animation-animation" id="ref-for-dom-animation-animation">Animation()</a></code> constructor passing this <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline①">AnimationTimeline</a></code> object as the <var>timeline</var> parameter and <var>effect</var> as the <var>effect</var> parameter. Following construction of the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑦">Animation</a></code> object, the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation①">play an animation</a> is performed on the newly constructed object with the <var>auto-rewind</var> flag set to true. <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline/play(effect)" data-dfn-type="argument" data-export id="dom-animationtimeline-play-effect-effect"><code>effect</code></dfn> <dd data-md> the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect①②">associated effect</a> to assign to the newly-created <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑧">Animation</a></code> object. </dl> </div> </dl> </div> <h3 class="heading settled" data-level="5.2" id="the-animation-interface">5.2. The <code>Animation</code> interface<a class="self-link" href="#the-animation-interface"></a></h3> Update the startTime and currentTime of the Animation interface, and add rangeStart, rangeEnd, and overallProgress as follows: <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑨"><c- g>Animation</c-></a> { <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish④"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSNumberish?" href="#dom-animation-starttime" id="ref-for-dom-animation-starttime"><c- g>startTime</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish⑤"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSNumberish?" href="#dom-animation-currenttime" id="ref-for-dom-animation-currenttime"><c- g>currentTime</c-></a>; <c- b>attribute</c-> (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue" id="ref-for-csskeywordvalue"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-link-type="attribute" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-animation-rangestart" id="ref-for-dom-animation-rangestart"><c- g>rangeStart</c-></a>; <c- b>attribute</c-> (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset①"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue①"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue" id="ref-for-csskeywordvalue①"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a>) <a class="idl-code" data-link-type="attribute" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-animation-rangeend" id="ref-for-dom-animation-rangeend"><c- g>rangeEnd</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animation-overallprogress" id="ref-for-dom-animation-overallprogress"><c- g>overallProgress</c-></a>; }; </pre> Add or update attribute descriptions as follows: <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-starttime"><code>startTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish⑥">CSSNumberish</a>, nullable <dd data-md> Update the description as: <blockquote> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-start-time" id="ref-for-animation-start-time②⑧">start time</a> of this animation. When associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline⑥">progress-based timeline</a>, start time must be returned as a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue②">CSSNumericValue</a></code> with percent units. Otherwise start time must be returned as a double value, representing the time in units of milliseconds. Setting this attribute updates the start time using the procedure to <a data-link-type="dfn" href="#set-the-start-time" id="ref-for-set-the-start-time">set the start time</a> of this object to the new value. </blockquote> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-currenttime"><code>currentTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish⑦">CSSNumberish</a>, nullable <dd data-md> update the description as: <blockquote> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time②⓪">current time</a> of this animation. When associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline⑦">progress-based timeline</a>, current time must be returned as a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue③">CSSNumericValue</a></code>. with percent units. Otherwise current time must be returned as a double value, representing the time in units of milliseconds. Setting this attribute follows the procedure to <a data-link-type="dfn" href="#set-the-current-time" id="ref-for-set-the-current-time①">set the current time</a> of this object to the new value. </blockquote> </dl> Add: <blockquote> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-rangestart"><code>rangeStart</code></dfn>, of type <code class="idl-code">(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)</code> <dd data-md> Specifies the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③⓪">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range" id="ref-for-animation-attachment-range②">animation attachment range</a>. Setting the attribute follows the same rules as the KeyframeAnimationOption <a href="#dom-keyframeanimationoptions-rangestart" id="ref-for-dom-keyframeanimationoptions-rangestart">rangeStart</a>. When reading the attribute, the returned value is either a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset②">TimelineRangeOffset</a></code> or the <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString②">DOMString</a></code> "normal". <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-rangeend"><code>rangeEnd</code></dfn>, of type <code class="idl-code">(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)</code> <dd data-md> Specifies the end of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③①">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range" id="ref-for-animation-attachment-range③">animation attachment range</a>. Setting the attribute follows the same rules as the KeyframeAnimationOption <a href="#dom-keyframeanimationoptions-rangeend" id="ref-for-dom-keyframeanimationoptions-rangeend">rangeEnd</a>. When reading the attribute, the returned value is either a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset③">TimelineRangeOffset</a></code> or the <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString③">DOMString</a></code> "normal". <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-overallprogress"><code>overallProgress</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①">double</a>, readonly, nullable <dd data-md> Specifies the <a data-link-type="dfn" href="#animation-overallprogress" id="ref-for-animation-overallprogress⑥">overallProgress</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③②">animation</a> as a proportion of its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#associated-effect-end" id="ref-for-associated-effect-end①②">associated effect end</a>. </dl> </blockquote> </div> <h3 class="heading settled" data-level="5.3" id="the-animationeffect-interface">5.3. The <code>AnimationEffect</code> interface<a class="self-link" href="#the-animationeffect-interface"></a></h3> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①"><c- g>AnimationEffect</c-></a> { // Timing hierarchy <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect"><c- n>GroupEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="GroupEffect?" href="#dom-animationeffect-parent" id="ref-for-dom-animationeffect-parent"><c- g>parent</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect②"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-animationeffect-previoussibling" id="ref-for-dom-animationeffect-previoussibling"><c- g>previousSibling</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect③"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-animationeffect-nextsibling" id="ref-for-dom-animationeffect-nextsibling"><c- g>nextSibling</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-before" id="ref-for-dom-animationeffect-before"><c- g>before</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect④"><c- n>AnimationEffect</c-></a>... <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect/before(...effects), AnimationEffect/before()" data-dfn-type="argument" data-export id="dom-animationeffect-before-effects-effects"><code><c- g>effects</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-after" id="ref-for-dom-animationeffect-after"><c- g>after</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect⑤"><c- n>AnimationEffect</c-></a>... <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect/after(...effects), AnimationEffect/after()" data-dfn-type="argument" data-export id="dom-animationeffect-after-effects-effects"><code><c- g>effects</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined②"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-replace" id="ref-for-dom-animationeffect-replace"><c- g>replace</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect⑥"><c- n>AnimationEffect</c-></a>... <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect/replace(...effects), AnimationEffect/replace()" data-dfn-type="argument" data-export id="dom-animationeffect-replace-effects-effects"><code><c- g>effects</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined③"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-remove" id="ref-for-dom-animationeffect-remove"><c- g>remove</c-></a> (); }; </pre> <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export id="dom-animationeffect-getcomputedtiming"><code>getComputedTiming()</code></dfn> <dd data-md> The description of the <code>duration</code> attribute of the object needs to indicate that if <code>timing.duration</code> is the string <code>auto</code>, this attribute will return the current calculated value of the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①①">intrinsic iteration duration</a>, which may be a expressed as a double representing the duration in milliseconds or a percentage when the effect is associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline⑧">progress-based timeline</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="attribute" data-export id="dom-animationeffect-parent"><code>parent</code></dfn>, of type <a data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect①">GroupEffect</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②③">parent group</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨①">animation effect</a> or <code>null</code> if this animation effect does not have a parent group. <a class="self-link" href="#issue-40288bfc"></a> Should this be <code>parentGroup</code>? <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="attribute" data-export id="dom-animationeffect-previoussibling"><code>previousSibling</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect⑦">AnimationEffect</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#previous-sibling" id="ref-for-previous-sibling②">previous sibling</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨③">animation effect</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="attribute" data-export id="dom-animationeffect-nextsibling"><code>nextSibling</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect⑧">AnimationEffect</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#next-sibling" id="ref-for-next-sibling">next sibling</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨④">animation effect</a>. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export data-lt="before(...effects)|before()" id="dom-animationeffect-before"><code> undefined before (AnimationEffect... effects)</code></dfn> <dd data-md> Inserts <var>effects</var> before this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑤">animation effect</a>. <ol> <li data-md> If there is no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑤">parent group</a>, abort these steps. <li data-md> If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑥">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor">inclusive ancestor</a> of this animation effect, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑥">throw</a> a HierarchyRequestError exception and abort these steps. <li data-md> <a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children">Insert</a> <var>effects</var> before this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑧">animation effect</a>. </ol> <div class="note" role="note"> Note that this definition precludes the following usage since <code>effect</code> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor①">inclusive ancestor</a> of itself: <pre class="lang-javascript highlight">effect<c- p>.</c->before<c- p>(</c->effect<c- p>);</c-> <c- c1>// throws HierarchyRequestError</c-></pre> </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export data-lt="after(...effects)|after()" id="dom-animationeffect-after"><code> undefined after(AnimationEffect... effects)</code></dfn> <dd data-md> Inserts <var>effects</var> after this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑨">animation effect</a>. <ol> <li data-md> If there is no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑥">parent group</a>, abort these steps. <li data-md> If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⓪">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor②">inclusive ancestor</a> of this animation effect, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑦">throw</a> a HierarchyRequestError exception and abort these steps. <li data-md> Let <var>reference child</var> be the <a data-link-type="dfn" href="#next-sibling-not-included" id="ref-for-next-sibling-not-included">next sibling of this animation effect not in <var>effects</var></a>. <li data-md> <a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children①">Insert</a> <var>effects</var> before <var>reference child</var>. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export data-lt="replace(...effects)|replace()" id="dom-animationeffect-replace"><code> undefined replace(AnimationEffect... effects)</code></dfn> <dd data-md> Replaces this <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect⑨">AnimationEffect</a></code> with the passed in <var>effects</var>. <ol> <li data-md> If there is no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑦">parent group</a>, abort these steps. <li data-md> If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪②">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor③">inclusive ancestor</a> of the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑧">parent group</a> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑧">throw</a> a HierarchyRequestError exception and abort these steps. <li data-md> Let <var>reference child</var> be the <a data-link-type="dfn" href="#next-sibling-not-included" id="ref-for-next-sibling-not-included①">next sibling of this animation effect not in <var>effects</var></a>. <li data-md> <a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect①">Remove</a> this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪③">animation effect</a> from its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑨">parent group</a>. <li data-md> <a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children②">Insert</a> <var>effects</var> before <var>reference child</var>. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export data-lt="remove()" id="dom-animationeffect-remove"><code>undefined remove()</code></dfn> <dd data-md> <a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect②">Removes</a> this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪④">animation effect</a> from its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③⓪">parent group</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③③">animation</a>. </dl> </div> <a class="self-link" href="#issue-49ccd991"></a> The <code>remove()</code> method can be used to remove an effect from either its parent group or animation. Should we keep it in level 1 and define it simply as removing the animation from its animation? <h3 class="heading settled" data-level="5.4" id="the-effecttiming-dictionaries">5.4. The <code>EffectTiming</code> and <code>OptionalEffectTiming</code> dictionaries<a class="self-link" href="#the-effecttiming-dictionaries"></a></h3> <pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming"><c- g>EffectTiming</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay"><c- g>delay</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay"><c- g>endDelay</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-playbackrate" id="ref-for-dom-effecttiming-playbackrate"><c- g>playbackRate</c-></a> = 1.0; (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue④"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a>) <a class="idl-code" data-default=""auto"" data-link-type="dict-member" data-type="(unrestricted double or CSSNumericValue or DOMString)" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration"><c- g>duration</c-></a> = "auto"; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming"><c- g>OptionalEffectTiming</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-type="double" id="dom-optionaleffecttiming-playbackrate"><code><c- g>playbackRate</c-></code></dfn>; }; </pre> Note: In this version of the spec, duration is not settable as a CSSNumericValue; however, duration may be returned as a CSSNumericValue when resolving the duration in <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming">getComputedTiming()</a></code>. Future versions of the spec may enable setting the duration as a CSSNumeric value, where the unit is a valid time unit or percent. <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-delay"><code>delay</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑥">double</a><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="delay" id="dom-optionaleffecttiming-delay"><code></code></dfn> <dd data-md> Update the description as: <blockquote> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="specified-start-delay">specified start delay</dfn> which represents the number of milliseconds from an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑤">animation effect</a>’s <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②④">start time</a> to the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑦">active interval</a>. The <var>specified start delay</var> is converted to a <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②⓪">start delay</a> following the <a data-link-type="dfn" href="#normalize-specified-timing" id="ref-for-normalize-specified-timing">normalize specified timing</a> procedure. </blockquote> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-enddelay"><code>endDelay</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑦">double</a><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="endDelay" id="dom-optionaleffecttiming-enddelay"><code></code></dfn> <dd data-md> Update the description as: <blockquote> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="specified-end-delay">specified end delay</dfn> which represents the number of milliseconds from the end of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑥">animation effect</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑧">active interval</a> until the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②⑤">start time</a> of any animation effect that may follow, for example, in a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑧">sequence effect</a>. The <var>specified end delay</var> is converted to an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay⑦">end delay</a> following the <a data-link-type="dfn" href="#normalize-specified-timing" id="ref-for-normalize-specified-timing①">normalize specified timing</a> procedure. </blockquote> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-duration"><code>duration</code></dfn>, of type <code class="idl-code">(unrestricted double or CSSNumericValue or DOMString)</code>, defaulting to <code>"auto"</code><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="duration" id="dom-optionaleffecttiming-duration"><code></code></dfn> <dd data-md> Update the description as: <blockquote> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="specified-iteration-duration">specified iteration duration</dfn> which is a real number greater than or equal to zero (including positive infinity) representing the time taken in milliseconds to complete a single iteration of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑧">animation effect</a>, or the string value <code>auto</code> to indicate that the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①⑦">iteration duration</a> reflects the animation effect’s <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①②">intrinsic iteration duration</a>. The <var>specified iteration duration</var> is converted to an iteration duration following the <a data-link-type="dfn" href="#normalize-specified-timing" id="ref-for-normalize-specified-timing②">normalize specified timing</a> procedure. </blockquote> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-playbackrate"><code>playbackRate</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑧">double</a>, defaulting to <code>1.0</code> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑨">animation effect</a>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate④⓪">playback rate</a> property which is a multiplier applied to the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑨">local time</a> potentially causing the effect to run at a different rate to its natural speed. </dl> </div> <h3 class="heading settled" data-level="5.5" id="updating-animationeffect-timing">5.5. Updating the timing of an AnimationEffect<a class="self-link" href="#updating-animationeffect-timing"></a></h3> Replace: <blockquote> Assign each member that <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exists</a> in <var>input</var> to the corresponding timing property of <var>effect</var> as follows: <ul> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay①">delay</a></code> → <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②①">start delay</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay①">endDelay</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay⑧">end delay</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill">fill</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode⑤">fill mode</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart">iterationStart</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-start" id="ref-for-iteration-start①">iteration start</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations">iterations</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count①②">iteration count</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration①">duration</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①⑨">iteration duration</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction">direction</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#playback-direction" id="ref-for-playback-direction②">playback direction</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing">easing</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function③">timing function</a> </ul> </blockquote> with: <blockquote> Assign each member that <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists①">exists</a> in <var>input</var> to the corresponding timing property of <var>effect</var> as follows: <ul> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay②">delay</a></code> → <a data-link-type="dfn" href="#specified-start-delay" id="ref-for-specified-start-delay">specified start delay</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay②">endDelay</a></code> → <a data-link-type="dfn" href="#specified-end-delay" id="ref-for-specified-end-delay">specified end delay</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill①">fill</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode⑥">fill mode</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart①">iterationStart</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-start" id="ref-for-iteration-start②">iteration start</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations①">iterations</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count①③">iteration count</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration②">duration</a></code> → <a data-link-type="dfn" href="#specified-iteration-duration" id="ref-for-specified-iteration-duration">specified iteration duration</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction①">direction</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#playback-direction" id="ref-for-playback-direction③">playback direction</a> <li data-md> <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing①">easing</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function④">timing function</a> </ul> </blockquote> Add: <blockquote> Follow the procedure to <a data-link-type="dfn" href="#normalize-specified-timing" id="ref-for-normalize-specified-timing③">normalize specified timing</a>. Timing properties may also be updated due to a style change. Any change to a CSS animation property that affects timing requires rerunning the procedure to <a data-link-type="dfn" href="#normalize-specified-timing" id="ref-for-normalize-specified-timing④">normalize specified timing</a>. </blockquote> <h3 class="heading settled" data-level="5.6" id="the-computedeffecttiming-dictionary">5.6. The <code>ComputedEffectTiming</code> dictionary<a class="self-link" href="#the-computedeffecttiming-dictionary"></a></h3> <pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming"><c- g>ComputedEffectTiming</c-></a> { <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish⑧"><c- n>CSSNumberish</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish" href="#dom-computedeffecttiming-starttime" id="ref-for-dom-computedeffecttiming-starttime"><c- g>startTime</c-></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish⑨"><c- n>CSSNumberish</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish" href="#dom-computedeffecttiming-endtime" id="ref-for-dom-computedeffecttiming-endtime"><c- g>endTime</c-></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①⓪"><c- n>CSSNumberish</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish" href="#dom-computedeffecttiming-activeduration" id="ref-for-dom-computedeffecttiming-activeduration"><c- g>activeDuration</c-></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①①"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish?" href="#dom-computedeffecttiming-localtime" id="ref-for-dom-computedeffecttiming-localtime"><c- g>localTime</c-></a>; }; </pre> <div class="members"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-starttime"><code>startTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①②">CSSNumberish</a> <dd data-md> The <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②⑥">start time</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⓪">animation effect</a> expressed as a percentage if associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline⑨">progress-based timeline</a>, or as a double in milliseconds otherwise. This is the time at which the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③①">parent group</a>, if any, has scheduled this child to run within its <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑨">transformed time space</a>, that is, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①①">animation effect</a>’s <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①①">inherited time space</a>. The start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑨">active interval</a> is based on the sum of the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②⑦">start time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②②">start delay</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-endtime"><code>endTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①③">CSSNumberish</a> <dd data-md> Update the description as: <blockquote> The <a data-link-type="dfn" href="#end-time" id="ref-for-end-time①①">end time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①②">animation effect</a> in <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①②">inherited timespace</a>. The value is expressed as a percentage if associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline①⓪">progress-based timeline</a>, or as a double in milliseconds otherwise. This corresponds to the end of the animation effect’s active interval plus any <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay⑨">end delay</a>. </blockquote> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-activeduration"><code>activeDuration</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①④">CSSNumberish</a> <dd data-md> Update the description as: <blockquote> The <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①①">active duration</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①④">animation effect</a> expressed as a percentage if associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline①①">progress-based timeline</a>, or as a double in milliseconds otherwise. </blockquote> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-localtime"><code>localTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①⑤">CSSNumberish</a>, nullable <dd data-md> Update the second paragraph as: <blockquote> This will be <code>null</code> if this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑤">animation effect</a> is not <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation②">associated with an animation</a> or if it has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③②">parent group</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect⑥">in effect</a>. </blockquote> Append: <blockquote> The value is expressed as a percentage if associated with a <a data-link-type="dfn" href="#progress-based-timeline" id="ref-for-progress-based-timeline①②">progress-based timeline</a>, or as a double in milliseconds otherwise. </blockquote> </dl> </div> <h4 class="heading settled" data-level="5.6.1" id="the-fillmode-enumeration">5.6.1. The <code>FillMode</code> enumeration<a class="self-link" href="#the-fillmode-enumeration"></a></h4> <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-fillmode"><code><c- g>FillMode</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-none"><code><c- s>"none"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-forwards"><code><c- s>"forwards"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-backwards"><code><c- s>"backwards"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-both"><code><c- s>"both"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-auto"><code><c- s>"auto"</c-></code></dfn> }; </pre> <dl> <dt data-md><code>auto</code> <dd data-md> Update the description as: <blockquote> Fill backwards and forwards when applied to an <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect②">GroupEffect</a></code> and no fill when applied to an <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source">KeyframeEffect</a></code>. </blockquote> </dl> <h3 class="heading settled" data-level="5.7" id="the-groupeffect-interface">5.7. The <code>GroupEffect</code> interface<a class="self-link" href="#the-groupeffect-interface"></a></h3> (This section is added.) <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③⑤">Group effects</a> are represented by the <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect③">GroupEffect</a></code> interface. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="groupeffect"><code><c- g>GroupEffect</c-></code></dfn> { <a class="idl-code" data-link-type="constructor" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect"><c- g>constructor</c-></a>(<a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①⓪"><c- n>AnimationEffect</c-></a>>? <a class="idl-code" data-link-type="argument" href="#dom-groupeffect-groupeffect-children-timing-children" id="ref-for-dom-groupeffect-groupeffect-children-timing-children"><c- g>children</c-></a>, <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①"><c- n>EffectTiming</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-groupeffect-groupeffect-children-timing-timing" id="ref-for-dom-groupeffect-groupeffect-children-timing-timing"><c- g>timing</c-></a> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#animationnodelist" id="ref-for-animationnodelist"><c- n>AnimationNodeList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationNodeList" href="#dom-groupeffect-children" id="ref-for-dom-groupeffect-children"><c- g>children</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①①"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-groupeffect-firstchild" id="ref-for-dom-groupeffect-firstchild"><c- g>firstChild</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①②"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-groupeffect-lastchild" id="ref-for-dom-groupeffect-lastchild"><c- g>lastChild</c-></a>; <a data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect④"><c- n>GroupEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffect-clone" id="ref-for-dom-groupeffect-clone"><c- g>clone</c-></a> (); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined④"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffect-prepend" id="ref-for-dom-groupeffect-prepend"><c- g>prepend</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①③"><c- n>AnimationEffect</c-></a>... <dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect/prepend(...effects), GroupEffect/prepend()" data-dfn-type="argument" data-export id="dom-groupeffect-prepend-effects-effects"><code><c- g>effects</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑤"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffect-append" id="ref-for-dom-groupeffect-append"><c- g>append</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①④"><c- n>AnimationEffect</c-></a>... <dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect/append(...effects), GroupEffect/append()" data-dfn-type="argument" data-export id="dom-groupeffect-append-effects-effects"><code><c- g>effects</c-></code></dfn>); }; </pre> <div class="constructors"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="constructor" data-export data-lt="GroupEffect(children, timing)|constructor(children, timing)|GroupEffect(children)|constructor(children)" id="dom-groupeffect-groupeffect"><code>GroupEffect ()</code></dfn> <dd data-md> Creates a new <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑤">GroupEffect</a></code> object using the following procedure: <ol> <li data-md> Create a new <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑥">GroupEffect</a></code> object, <var>group</var>. <li data-md> Let <var>timing input</var> be the result of applying the procedure to <a data-link-type="dfn" href="#process-a-timing-argument" id="ref-for-process-a-timing-argument">process a timing argument</a> to <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect-children-timing-timing" id="ref-for-dom-groupeffect-groupeffect-children-timing-timing①">timing</a></code>. <li data-md> Let <var>timing input</var> be the result corresponding to the first matching condition from below. <dl> <dt data-md>If <var>options</var> is an <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming②">EffectTiming</a></code> object, <dd data-md> Let <var>timing input</var> be <var>options</var>. <dt data-md>Otherwise (if <var>options</var> is a <code>double</code>), <dd data-md> Let <var>timing input</var> be a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming③">EffectTiming</a></code> object with all members set to their default values and <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration③">duration</a></code> set to <var>options</var>. </dl> <li data-md> Call the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-the-timing-properties-of-an-animation-effect" id="ref-for-update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation effect</a> of <var>group</var> from <var>timing input</var>. If that procedure causes an exception to be thrown, propagate the exception and abort this procedure. <li data-md> <a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children③">Insert</a> <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect-children-timing-children" id="ref-for-dom-groupeffect-groupeffect-children-timing-children①">children</a></code> before <code>null</code>. </ol> <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect/GroupEffect(children, timing)" data-dfn-type="argument" data-export id="dom-groupeffect-groupeffect-children-timing-children"><code>children</code></dfn> <dd data-md> A sequence of animation effects to add as children of this group. These children are appended in sequence using the same semantics as the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-append" id="ref-for-dom-groupeffect-append①">append()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑦">GroupEffect</a></code> interface. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect/GroupEffect(children, timing)" data-dfn-type="argument" data-export id="dom-groupeffect-groupeffect-children-timing-timing"><code>timing</code></dfn> <dd data-md> The timing properties or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration②⓪">iteration duration</a> of the new group effect. </dl> </div> </dl> </div> <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="attribute" data-export id="dom-groupeffect-children"><code>children</code></dfn>, of type <a data-link-type="idl-name" href="#animationnodelist" id="ref-for-animationnodelist①">AnimationNodeList</a>, readonly <dd data-md> The list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①③">child effects</a> in the group. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="attribute" data-export id="dom-groupeffect-firstchild"><code>firstChild</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①⑤">AnimationEffect</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#first-child" id="ref-for-first-child">first child</a> of this <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③⑥">group effect</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="attribute" data-export id="dom-groupeffect-lastchild"><code>lastChild</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①⑥">AnimationEffect</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#last-child" id="ref-for-last-child">last child</a> of this <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③⑦">group effect</a>. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="method" data-export data-lt="prepend(...effects)|prepend()" id="dom-groupeffect-prepend"><code></code></dfn> <dt data-md>undefined prepend (AnimationEffect... effects) <dd data-md> <ol> <li data-md> If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑥">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor④">inclusive ancestor</a> of this animation effect, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑨">throw</a> a HierarchyRequestError exception and abort these steps. <li data-md> <a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children④">Insert</a> <var>effects</var> before the <a data-link-type="dfn" href="#first-child" id="ref-for-first-child①">first child</a>. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="method" data-export data-lt="append(...effects)|append()" id="dom-groupeffect-append"><code> undefined append (AnimationEffect... effects)</code></dfn> <dd data-md> <ol> <li data-md> If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑧">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor⑤">inclusive ancestor</a> of this animation effect, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①⓪">throw</a> a HierarchyRequestError exception and abort these steps. <li data-md> <a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children⑤">Insert</a> <var>effects</var> before <code>null</code>. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="method" data-export data-lt="clone()" id="dom-groupeffect-clone"><code> GroupEffect clone ()</code></dfn> <dd data-md> Creates a deep copy of this <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑧">GroupEffect</a></code> object using the following procedure. <ol> <li data-md> Let <var>source</var> be this <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑨">GroupEffect</a></code> object, the object to be cloned. <li data-md> Let <var>cloned timing</var> be a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming④">EffectTiming</a></code> object whose members are assigned the value of the attribute with the same name on <code><var>source</var>.getTiming()</code>. <li data-md> Let <var>cloned children</var> be an empty sequence of <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①⑦">AnimationEffect</a></code> objects. <li data-md> For each <var>child</var> in <code><var>source</var>.children</code>, append the result of calling <code><var>child</var>.clone()</code> to <var>cloned children</var>. <li data-md> Return a new <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect①⓪">GroupEffect</a></code> object created by calling the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect①">GroupEffect()</a></code> constructor with parameters <code>GroupEffect(<var>cloned children</var>, <var>cloned timing</var>)</code>. </ol> </dl> </div> <h4 class="heading settled" data-level="5.7.1" id="processing-a-timing-argument">5.7.1. Processing a <code>timing</code> argument<a class="self-link" href="#processing-a-timing-argument"></a></h4> The <var>timing</var> parameter passed to the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect②">GroupEffect()</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-sequenceeffect-sequenceeffect" id="ref-for-dom-sequenceeffect-sequenceeffect">SequenceEffect()</a></code> constructor may be an <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑤">EffectTiming</a></code> object, a double representing the duration of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⓪">animation effect</a> in milliseconds, or undefined. The following procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-a-timing-argument">process a timing argument</dfn>, <var>timing</var>, normalizes the above inputs into a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑥">EffectTiming</a></code> object. <dl> <dt data-md>If <var>timing</var> is an <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑦">EffectTiming</a></code> object, <dd data-md> Return <var>timing</var>. <dt data-md>If <var>timing</var> is a <code>double</code>, <dd data-md> Return a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑧">EffectTiming</a></code> object with all members set to their default values and <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration④">duration</a></code> set to <var>timing</var>. <dt data-md>Otherwise (<var>timing</var> is undefined), <dd data-md> Return a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑨">EffectTiming</a></code> object with all members set to their default values. </dl> <h4 class="heading settled" data-level="5.7.2" id="definitions-for-manipulating-hierarchies">5.7.2. Definitions for manipulating hierarchies<a class="self-link" href="#definitions-for-manipulating-hierarchies"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="next sibling not included" data-noexport id="next-sibling-not-included">next sibling of <var>effect</var> not included</dfn> in a set of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②①">animation effects</a>, <var>effects</var> is determined using the following steps: <ol> <li data-md> Let <var>context effect</var> be <var>effect</var>. <li data-md> While the <a data-link-type="dfn" href="#next-sibling" id="ref-for-next-sibling①">next sibling</a> of <var>context effect</var> is not <code>null</code> perform the following steps: <ol> <li data-md> Let <var>context effect</var> be the <a data-link-type="dfn" href="#next-sibling" id="ref-for-next-sibling②">next sibling</a> of <var>context effect</var>. <li data-md> If <var>context effect</var> is not in <var>effects</var> return <var>context effect</var> and abort these steps. </ol> <li data-md> Return <code>null</code>. </ol> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="remove an animation effect" data-noexport id="remove-an-animation-effect">remove</dfn> a <var>effect</var> from its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③③">parent group</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③④">animation</a>, perform the steps corresponding to the first matching condition from below, if any: <dl class="switch"> <dt data-md>If <var>effect</var> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③④">parent group</a>, <dd data-md> Remove <var>effect</var> from the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③⑤">parent group</a>’s list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①④">child effects</a>. <dt data-md>If <var>effect</var> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation⑦">directly associated with an animation</a>, <dd data-md> Disassociate <var>effect</var> from the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③⑤">animation</a>. </dl> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="insert children" data-noexport id="insert-children">insert</dfn> a series of zero or more <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②②">animation effects</a>, <var>effects</var>, to <var>parent</var>’s list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①⑤">child effects</a> before <var>reference child</var> perform the following steps for each <var>effect</var> in <var>effects</var>: <ol> <li data-md> <a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect③">Remove</a> <var>effect</var> from its parent. <li data-md> Insert <var>effect</var> to <var>parent</var>’s list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①⑥">child effects</a> before <var>reference child</var> </ol> <h3 class="heading settled" data-level="5.8" id="the-animationnodelist-interface">5.8. The <code>AnimationNodeList</code> interface<a class="self-link" href="#the-animationnodelist-interface"></a></h3> A list of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②③">animation effects</a> may be represented by an <code class="idl"><a data-link-type="idl" href="#animationnodelist" id="ref-for-animationnodelist②">AnimationNodeList</a></code>. The <code>AnimationNodeList</code> interface supports indexed properties with indices in the range 0 ≤ <var>index</var> < <code>length</code>. The only reason this interface exists is to provide a familiar experience for authors familiar with DOM interfaces where child nodes are accessed via a <code>children</code> member. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationnodelist"><code><c- g>AnimationNodeList</c-></code></dfn> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-animationnodelist-length" id="ref-for-dom-animationnodelist-length"><c- g>length</c-></a>; <c- b>getter</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①⑧"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-animationnodelist-item" id="ref-for-dom-animationnodelist-item"><c- g>item</c-></a> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationNodeList/item(index)" data-dfn-type="argument" data-export id="dom-animationnodelist-item-index-index"><code><c- g>index</c-></code></dfn>); }; </pre> <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationNodeList" data-dfn-type="attribute" data-export id="dom-animationnodelist-length"><code>length</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long②">unsigned long</a>, readonly <dd data-md> The number of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②④">animation effects</a> in the list. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationNodeList" data-dfn-type="method" data-export data-lt="item(index)" id="dom-animationnodelist-item"><code> getter AnimationEffect? item(unsigned long index)</code></dfn> <dd data-md> Returns the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⑤">animation effect</a> at <code>index</code>. If <code>index</code> is greater than or equal to <code>length</code> returns <code>null</code>. </dl> </div> <h3 class="heading settled" data-level="5.9" id="the-sequenceeffect-interface">5.9. The <code>SequenceEffect</code> interfaces<a class="self-link" href="#the-sequenceeffect-interface"></a></h3> <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑨">Sequence effects</a> are represented by the <code class="idl"><a data-link-type="idl" href="#sequenceeffect" id="ref-for-sequenceeffect">SequenceEffect</a></code> interface. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="sequenceeffect"><code><c- g>SequenceEffect</c-></code></dfn> : <a data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect①①"><c- n>GroupEffect</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-sequenceeffect-sequenceeffect" id="ref-for-dom-sequenceeffect-sequenceeffect①"><c- g>constructor</c-></a>(<a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence①"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①⑨"><c- n>AnimationEffect</c-></a>>? <dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffect/SequenceEffect(children, timing), SequenceEffect/constructor(children, timing), SequenceEffect/SequenceEffect(children), SequenceEffect/constructor(children)" data-dfn-type="argument" data-export id="dom-sequenceeffect-sequenceeffect-children-timing-children"><code><c- g>children</c-></code></dfn>, <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①⓪"><c- n>EffectTiming</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffect/SequenceEffect(children, timing), SequenceEffect/constructor(children, timing), SequenceEffect/SequenceEffect(children), SequenceEffect/constructor(children)" data-dfn-type="argument" data-export id="dom-sequenceeffect-sequenceeffect-children-timing-timing"><code><c- g>timing</c-></code></dfn> = {}); <a data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect①"><c- n>SequenceEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-sequenceeffect-clone" id="ref-for-dom-sequenceeffect-clone"><c- g>clone</c-></a> (); }; </pre> <div class="constructors"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffect" data-dfn-type="constructor" data-export data-lt="SequenceEffect(children, timing)|constructor(children, timing)|SequenceEffect(children)|constructor(children)" id="dom-sequenceeffect-sequenceeffect"><code>constructor (sequence<AnimationEffect>? children, optional (unrestricted double or EffectTiming) timing)</code></dfn> <dd data-md> The meaning and handling of each of the parameters in this constructor is identical to the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect③">GroupEffect()</a></code> constructor. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffect" data-dfn-type="method" data-export data-lt="clone()" id="dom-sequenceeffect-clone"><code> SequenceEffect clone ()</code></dfn> <dd data-md> Creates a deep copy of this <code class="idl"><a data-link-type="idl" href="#sequenceeffect" id="ref-for-sequenceeffect②">SequenceEffect</a></code> object using the same procedure as defined for the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-clone" id="ref-for-dom-groupeffect-clone①">clone()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect①②">GroupEffect</a></code> interface except that a new <code class="idl"><a data-link-type="idl" href="#sequenceeffect" id="ref-for-sequenceeffect③">SequenceEffect</a></code> object is created. </dl> </div> <h3 class="heading settled" data-level="5.10" id="the-keyframeeffect-interface">5.10. The <code>KeyframeEffect</code> interfaces<a class="self-link" href="#the-keyframeeffect-interface"></a></h3> The <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source①">KeyframeEffect</a></code> interface is modified to add the following: <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect"><c- g>KeyframeEffect</c-></a> { <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation"><c- n>IterationCompositeOperation</c-></a> <a class="idl-code" data-link-type="attribute" data-type="IterationCompositeOperation" href="#dom-keyframeeffect-iterationcomposite" id="ref-for-dom-keyframeeffect-iterationcomposite"><c- g>iterationComposite</c-></a>; }; </pre> <div class="constructors"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(target, keyframes, options)" id="dom-keyframeeffect-keyframeeffect"><code> KeyframeEffect (target, keyframes, options)</code></dfn> <dd data-md> Amend step 5 of the procedure to create a new <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source②">KeyframeEffect</a></code> object as follows: <ol start="5"> <li data-md> If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions">KeyframeEffectOptions</a></code> object, assign the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-iterationcomposite" id="ref-for-dom-keyframeeffect-iterationcomposite①">iterationComposite</a></code>, and <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite">composite</a></code>, properties of <var>effect</var> to the corresponding value from <var>options</var>. When assigning these properties, the error-handling defined for the corresponding setters on the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect">KeyframeEffect</a></code> interface is applied. If any of those setters require an exception to be thrown for the values specified by <var>options</var>, this procedure must <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①①">throw</a> the same exception and abort all further steps. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(source)" id="dom-keyframeeffect-keyframeeffect-source"><code>KeyframeEffect (source)</code></dfn> <dd data-md> Amend the procedure to create a new <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect①">KeyframeEffect</a></code> object with the same properties as <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source-source">source</a></code> to include setting the <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation③">iteration composite operation</a> from <var>source</var> on <var>effect</var>. </dl> </div> <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-iterationcomposite"><code>iterationComposite</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation①">IterationCompositeOperation</a> <dd data-md> The <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation④">iteration composite operation</a> property of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect⑥">keyframe effect</a> as specified by one of the <a data-link-type="dfn" href="#iterationcompositeoperation" id="ref-for-iterationcompositeoperation">IterationCompositeOperation</a> enumeration values. On setting, sets the <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑤">iteration composite operation</a> property of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⑥">animation effect</a> to the provided value. </dl> </div> <h4 class="heading settled" data-level="5.10.1" id="creating-a-new-keyframeeffect-object">5.10.1. Creating a new <code>KeyframeEffect</code> object<a class="self-link" href="#creating-a-new-keyframeeffect-object"></a></h4> <div class="informative-bg"> This section is non-normative Replace: <blockquote> If the duration is not specified, a value of zero is used. </blockquote> with: <blockquote> If the duration is not specified, the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①③">intrinsic iteration duration</a> is used. </blockquote> Add: <blockquote> This is particularly useful in combination with other <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⑦">animation effects</a>. For example, fading an element before switching <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> to ‘hidden’ can be achieved as follows, </blockquote> <div class="example" id="example-e0f07204"> <a class="self-link" href="#example-e0f07204"></a> <pre class="lang-javascript highlight"><c- ow>new</c-> SequenceEffect<c- p>(</c-> <c- p>[</c-> <c- ow>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mf>0</c-> <c- p>},</c-> <c- mf>1000</c-><c- p>),</c-> <c- ow>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> visibility<c- o>:</c-> <c- t>'hidden'</c-> <c- p>},</c-> <c- p>{</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>})</c-> <c- p>]</c-> <c- p>);</c-></pre> </div> </div> <h4 class="heading settled" data-level="5.10.2" id="keyframe-offset-type">5.10.2. Modification to the <code>*Keyframe</code> dictionaries<a class="self-link" href="#keyframe-offset-type"></a></h4> The <code>double?</code> type of the <code>offset</code> key in <code>ComputedKeyframe</code>, <code>BaseComputedKeyframe</code>, <code>BaseKeyframe</code>, <code>BasePropertyIndexedKeyframe</code>, etc. is replaced by <code>(CSSNumberish? or TimelineRangeOffset or DOMString)</code>, where <code>double</code> continues to be interpreted as a percentage, a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString⑤">DOMString</a></code> is parsed into a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset④">TimelineRangeOffset</a></code> according to the syntax of <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>, and the resulting <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset⑤">TimelineRangeOffset</a></code> or <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue⑤">CSSNumericValue</a></code> is interpreted as defined for <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>. If the <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString⑥">DOMString</a></code> fails to parse as a valid <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>, then the keyframe is invalid, and will throw a TypeError when <a href="https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument">processed</a> (same as if the <code>double</code> value was outside the [0,1] range). <h4 class="heading settled" data-level="5.10.3" id="the-keyframeeffectoptions-dictionary">5.10.3. The KeyframeEffectOptions dictionary<a class="self-link" href="#the-keyframeeffectoptions-dictionary"></a></h4> The <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions①">KeyframeEffectOptions</a></code> dictionary interface is modified to add the following member: <pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions②"><c- g>KeyframeEffectOptions</c-></a> { <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation②"><c- n>IterationCompositeOperation</c-></a> <a class="idl-code" data-default=""replace"" data-link-type="dict-member" data-type="IterationCompositeOperation" href="#dom-keyframeeffectoptions-iterationcomposite" id="ref-for-dom-keyframeeffectoptions-iterationcomposite"><c- g>iterationComposite</c-></a> = "replace"; }; </pre> <div class="members"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffectOptions" data-dfn-type="dict-member" data-export id="dom-keyframeeffectoptions-iterationcomposite"><code>iterationComposite</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation③">IterationCompositeOperation</a>, defaulting to <code>"replace"</code> <dd data-md> The <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑥">iteration composite operation</a> used to define the way animation values build from iteration to iteration. </dl> <h3 class="heading settled" data-level="5.11" id="the-iterationcompositeoperation-enumeration">5.11. The IterationCompositeOperation enumeration<a class="self-link" href="#the-iterationcompositeoperation-enumeration"></a></h3> The possible values of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⑧">animation effect</a>’s <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑦">iteration composite operation</a> are represented by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iterationcompositeoperation">IterationCompositeOperation</dfn> enumeration. <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-iterationcompositeoperation"><code><c- g>IterationCompositeOperation</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="IterationCompositeOperation" data-dfn-type="enum-value" data-export id="dom-iterationcompositeoperation-replace"><code><c- s>"replace"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="IterationCompositeOperation" data-dfn-type="enum-value" data-export id="dom-iterationcompositeoperation-accumulate"><code><c- s>"accumulate"</c-></code></dfn> }; </pre> <dl> <dt data-md><code>replace</code> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#iteration-composite-operation-replace" id="ref-for-iteration-composite-operation-replace">replace</a> <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑧">iteration composite operation</a> value such that the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-value" id="ref-for-effect-value③">effect value</a> produced is independent of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-iteration" id="ref-for-current-iteration②">current iteration</a>. <dt data-md><code>accumulate</code> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#iteration-composite-operation-accumulate" id="ref-for-iteration-composite-operation-accumulate①">accumulate</a> iteration composite operation value such that subsequent iterations of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⑨">animation effect</a> build on the final value of the previous iteration. </dl> <h3 class="heading settled" data-level="5.12" id="the-effectcallback-callback-function">5.12. The <code>EffectCallback</code> callback function<a class="self-link" href="#the-effectcallback-callback-function"></a></h3> <ins cite="#amend-CE"> <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①⑤">Custom effects</a> can be defined in script by providing an <code class="idl"><a data-link-type="idl" href="#callbackdef-effectcallback" id="ref-for-callbackdef-effectcallback">EffectCallback</a></code> callback function. <pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-effectcallback"><code><c- g>EffectCallback</c-></code></dfn> = <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑥"><c- b>undefined</c-></a> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="EffectCallback" data-dfn-type="argument" data-export id="dom-effectcallback-progress"><code><c- g>progress</c-></code></dfn>, (<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement" id="ref-for-csspseudoelement"><c- n>CSSPseudoElement</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-for="EffectCallback" data-dfn-type="argument" data-export id="dom-effectcallback-currenttarget"><code><c- g>currentTarget</c-></code></dfn>, <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③⑥"><c- n>Animation</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="EffectCallback" data-dfn-type="argument" data-export id="dom-effectcallback-animation"><code><c- g>animation</c-></code></dfn>); </pre> An <code class="idl"><a data-link-type="idl" href="#callbackdef-effectcallback" id="ref-for-callbackdef-effectcallback①">EffectCallback</a></code> is called each time an <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect②">KeyframeEffect</a></code> object with which it is associated is updated. <div class="parameters"> <dl> <dt data-md>double? progress <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress①①">iteration progress</a> value for which to produce an effect. When this is <code>null</code>, the function SHOULD remove the effect. <dt data-md>(Element or CSSPseudoElement) currentTarget <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element⑤">target element</a> on which this callback is expected to operate. <div class="note" role="note"> Note that <var>currentTarget</var> may differ from <code><var>animation</var>.target</code>. If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element⑥">target element</a> of <var>animation</var> is changed between updates, this method will be called once with a null <var>progress</var> and the previous target element as the <var>currentTarget</var>, then again with the current <var>progress</var> and the updated target element as the <var>currentTarget</var>. This allows the animation effect to be removed from the old target element. </div> <dt data-md>Animation animation <dd data-md> The <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③⑦">Animation</a></code> object that is being updated. </dl> </div> </ins> <h3 class="heading settled" data-level="5.13" id="the-animatable-interface">5.13. The <code>Animatable</code> interface<a class="self-link" href="#the-animatable-interface"></a></h3> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable" data-dfn-type="method" data-export data-lt="getAnimations()" id="dom-animatable-getanimations"><code> sequence<Animation> getAnimations()</code></dfn> <dd data-md> Add: <blockquote> If this object is the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#effect-target-target-element" id="ref-for-effect-target-target-element①⓪">target element</a> of two or more <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①③⓪">animation effects</a> which are associated with the same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③⑧">animation</a>, the corresponding <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③⑨">Animation</a></code> object will still only appear in the returned list once. </blockquote> </dl> </div> <h3 class="heading settled" data-level="5.14" id="the-animatable-interface-mixin">5.14. The <code>Animatable</code> interface mixin<a class="self-link" href="#the-animatable-interface-mixin"></a></h3> The <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions">KeyframeAnimationOptions</a></code> dictionary interface is modified to add the following members: <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-timelinerangeoffset"><code><c- g>TimelineRangeOffset</c-></code></dfn> { <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="TimelineRangeOffset" data-dfn-type="dict-member" data-export data-type="CSSOMString?" id="dom-timelinerangeoffset-rangename"><code><c- g>rangeName</c-></code></dfn>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue⑥"><c- n>CSSNumericValue</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="TimelineRangeOffset" data-dfn-type="dict-member" data-export data-type="CSSNumericValue" id="dom-timelinerangeoffset-offset"><code><c- g>offset</c-></code></dfn>; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions①"><c- g>KeyframeAnimationOptions</c-></a> { (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset⑥"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue⑦"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue" id="ref-for-csskeywordvalue②"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a>) <a class="idl-code" data-default=""normal"" data-link-type="dict-member" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-keyframeanimationoptions-rangestart" id="ref-for-dom-keyframeanimationoptions-rangestart③"><c- g>rangeStart</c-></a> = "normal"; (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset⑦"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue⑧"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue" id="ref-for-csskeywordvalue③"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString⑧"><c- b>DOMString</c-></a>) <a class="idl-code" data-default=""normal"" data-link-type="dict-member" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-keyframeanimationoptions-rangeend" id="ref-for-dom-keyframeanimationoptions-rangeend③"><c- g>rangeEnd</c-></a> = "normal"; }; </pre> <div class="members"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeAnimationOptions" data-dfn-type="dict-member" data-export id="dom-keyframeanimationoptions-rangestart"><code>rangeStart</code></dfn>, of type <code class="idl-code">(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)</code>, defaulting to <code>"normal"</code> <dd data-md> If present and not "normal", specifies the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation④⓪">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range" id="ref-for-animation-attachment-range④">animation attachment range</a>. A <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString⑨">DOMString</a></code> value is parsed as an <a class="property css" data-link-type="property" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end" id="ref-for-propdef-animation-range-end">animation-range-end</a> value to yield a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset⑧">TimelineRangeOffset</a></code> <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-rangename" id="ref-for-dom-timelinerangeoffset-rangename">rangeName</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-offset" id="ref-for-dom-timelinerangeoffset-offset">offset</a></code> or alternatively a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue" id="ref-for-csskeywordvalue④">CSSKeywordValue</a></code> with the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csskeywordvalue-value" id="ref-for-dom-csskeywordvalue-value">value</a></code> of "normal"; a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue⑨">CSSNumericValue</a></code> is interpreted as a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset⑨">TimelineRangeOffset</a></code> with that <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-offset" id="ref-for-dom-timelinerangeoffset-offset①">offset</a></code> and a null <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-rangename" id="ref-for-dom-timelinerangeoffset-rangename①">rangeName</a></code>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeAnimationOptions" data-dfn-type="dict-member" data-export id="dom-keyframeanimationoptions-rangeend"><code>rangeEnd</code></dfn>, of type <code class="idl-code">(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)</code>, defaulting to <code>"normal"</code> <dd data-md> If present and not "normal", specifies the end of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation④①">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range" id="ref-for-animation-attachment-range⑤">animation attachment range</a>. A <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString①⓪">DOMString</a></code> value is parsed as an <a class="property css" data-link-type="property" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end" id="ref-for-propdef-animation-range-end①">animation-range-end</a> value to yield a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset①⓪">TimelineRangeOffset</a></code> <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-rangename" id="ref-for-dom-timelinerangeoffset-rangename②">rangeName</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-offset" id="ref-for-dom-timelinerangeoffset-offset②">offset</a></code>; a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue" id="ref-for-cssnumericvalue①⓪">CSSNumericValue</a></code> is interpreted as a <code class="idl"><a data-link-type="idl" href="#dictdef-timelinerangeoffset" id="ref-for-dictdef-timelinerangeoffset①①">TimelineRangeOffset</a></code> with that <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-offset" id="ref-for-dom-timelinerangeoffset-offset③">offset</a></code> and a null <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-rangename" id="ref-for-dom-timelinerangeoffset-rangename③">rangeName</a></code>. </dl> </div> Passing a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue" id="ref-for-csskeywordvalue⑤">CSSKeywordValue</a></code> with a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csskeywordvalue-value" id="ref-for-dom-csskeywordvalue-value①">value</a></code> other than "normal" as the <code class="idl"><a data-link-type="idl" href="#dom-keyframeanimationoptions-rangestart" id="ref-for-dom-keyframeanimationoptions-rangestart①">rangeStart</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-keyframeanimationoptions-rangeend" id="ref-for-dom-keyframeanimationoptions-rangeend①">rangeEnd</a></code> value to any API defined to accept <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions②">KeyframeAnimationOptions</a></code> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①②">throws</a> a TypeError. Note: The <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-rangename" id="ref-for-dom-timelinerangeoffset-rangename④">rangeName</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-timelinerangeoffset-offset" id="ref-for-dom-timelinerangeoffset-offset④">offset</a></code> values of <code class="idl"><a data-link-type="idl" href="#dom-keyframeanimationoptions-rangestart" id="ref-for-dom-keyframeanimationoptions-rangestart②">rangeStart</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-keyframeanimationoptions-rangeend" id="ref-for-dom-keyframeanimationoptions-rangeend②">rangeEnd</a></code> are interpreted as defined for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start" id="ref-for-propdef-animation-range-start">animation-range-start</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end" id="ref-for-propdef-animation-range-end②">animation-range-end</a>, and affect the animation accordingly. See <a href="https://drafts.csswg.org/web-animations-1/#the-animatable-interface-mixin"><cite>Web Animations</cite> § 6.8 The Animatable interface mixin</a> for further description. <h3 class="heading settled" data-level="5.15" id="the-animationplaybackevent-interface">5.15. The <code>AnimationPlaybackEvent</code> interface <a class="self-link" href="#the-animationplaybackevent-interface"></a></h3> Replace double with CSSNumberish as the type for currentTime and timelineTime. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed⑥"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationplaybackevent"><code><c- g>AnimationPlaybackEvent</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> { <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent" data-dfn-type="constructor" data-export data-lt="AnimationPlaybackEvent(type, eventInitDict)|constructor(type, eventInitDict)|AnimationPlaybackEvent(type)|constructor(type)" id="dom-animationplaybackevent-animationplaybackevent"><code><c- g>constructor</c-></code></dfn>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent/AnimationPlaybackEvent(type, eventInitDict), AnimationPlaybackEvent/constructor(type, eventInitDict), AnimationPlaybackEvent/AnimationPlaybackEvent(type), AnimationPlaybackEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type"><code><c- g>type</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-animationplaybackeventinit" id="ref-for-dictdef-animationplaybackeventinit"><c- n>AnimationPlaybackEventInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent/AnimationPlaybackEvent(type, eventInitDict), AnimationPlaybackEvent/constructor(type, eventInitDict), AnimationPlaybackEvent/AnimationPlaybackEvent(type), AnimationPlaybackEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></dfn> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①⑥"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime"><c- g>currentTime</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①⑦"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime"><c- g>timelineTime</c-></a>; }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-animationplaybackeventinit"><code><c- g>AnimationPlaybackEventInit</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> { <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①⑧"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSNumberish?" href="#dom-animationplaybackeventinit-currenttime" id="ref-for-dom-animationplaybackeventinit-currenttime"><c- g>currentTime</c-></a> = <c- b>null</c->; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish①⑨"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSNumberish?" href="#dom-animationplaybackeventinit-timelinetime" id="ref-for-dom-animationplaybackeventinit-timelinetime"><c- g>timelineTime</c-></a> = <c- b>null</c->; }; </pre> <div class="attributes"> Update the type for the AnimationPlaybackEvent attributes. <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent" data-dfn-type="attribute" data-export id="dom-animationplaybackevent-currenttime"><code>currentTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish②⓪">CSSNumberish</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-current-time" id="ref-for-animation-current-time②③">current time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation④②">animation</a> that generated the event at the moment the event as queued. This will be <code class="esvalue">null</code> if the animation was <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-state-idle" id="ref-for-play-state-idle">idle</a> at the time the event was generated. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent" data-dfn-type="attribute" data-export id="dom-animationplaybackevent-timelinetime"><code>timelineTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish②①">CSSNumberish</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value①②">time value</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①⑦">timeline</a> with which the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation④④">animation</a> that generated the event is associated at the moment the event was queued. This will be <code class="esvalue">null</code> if the animation was not associated with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#inactive-timeline" id="ref-for-inactive-timeline⑥">active timeline</a> at the time the event was queued. </dl> </div> <div class="members"> Update the type for the AnimationPlaybackEventInit members. <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEventInit" data-dfn-type="dict-member" data-export id="dom-animationplaybackeventinit-currenttime"><code>currentTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish②②">CSSNumberish</a>, nullable, defaulting to <code>null</code> <dd data-md> See the description of the <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime①">currentTime</a></code> attribute. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEventInit" data-dfn-type="dict-member" data-export id="dom-animationplaybackeventinit-timelinetime"><code>timelineTime</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish" id="ref-for-typedefdef-cssnumberish②③">CSSNumberish</a>, nullable, defaulting to <code>null</code> <dd data-md> See the description of the <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime①">timelineTime</a></code> attribute. </dl> </div> <h3 class="heading settled" data-level="5.16" id="model-liveness">5.16. Model liveness<a class="self-link" href="#model-liveness"></a></h3> <div class="informative-bg"> This section is non-normative Regarding the section on, “ Changes made to the Web Animations model take effect immediately”, add: <blockquote> The same concept applies to more complex modifications of the Web Animations model such as adding and removing children from an <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect①③">GroupEffect</a></code>. </blockquote> Add: <blockquote> <dl> <dt data-md>Changes made to the model using the programming interface do not cause any <code class="idl"><a data-link-type="idl" href="#callbackdef-effectcallback" id="ref-for-callbackdef-effectcallback②">EffectCallback</a></code> functions to be called <dd data-md> For example, in the following code, the callback function will not be called until after the script block has completed during regular updating. <div class="example" id="example-e18684ee"> <a class="self-link" href="#example-e18684ee"></a> <pre class="lang-javascript highlight"><c- a>var</c-> timesCalled <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> elem<c- p>.</c->animate<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c-> timesCalled<c- o>++</c-><c- p>;</c-> <c- p>},</c-> <c- mf>10000</c-><c- p>);</c-> alert<c- p>(</c->timesCalled<c- p>);</c-> <c- c1>// Displays ‘0’</c-></pre> </div> Note: Need to spec this properly somewhere. </dl> </blockquote> <h2 class="heading settled" data-level="6" id="priv">6. Privacy Considerations<a class="self-link" href="#priv"></a></h2> No privacy considerations have been reported on this module. <h2 class="heading settled" data-level="7" id="sec">7. Security Considerations<a class="self-link" href="#sec"></a></h2> No security considerations have been reported on this module. </div> </div> </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#dom-iterationcompositeoperation-accumulate">"accumulate"</a>, in § 5.11 <li><a href="#active-duration">active duration</a>, in § 3.7.2 <li><a href="#dom-computedeffecttiming-activeduration">activeDuration</a>, in § 5.6 <li><a href="#dom-animationeffect-after">after()</a>, in § 5.3 <li><a href="#dom-animationeffect-after">after(...effects)</a>, in § 5.3 <li><a href="#ancestor">ancestor</a>, in § 3.9 <li><a href="#animation-effect-start-time">animation effect start time</a>, in § 3.4.2 <li><a href="#animationnodelist">AnimationNodeList</a>, in § 5.8 <li><a href="#animationplaybackevent">AnimationPlaybackEvent</a>, in § 5.15 <li><a href="#dictdef-animationplaybackeventinit">AnimationPlaybackEventInit</a>, in § 5.15 <li><a href="#dom-animationplaybackevent-animationplaybackevent">AnimationPlaybackEvent(type)</a>, in § 5.15 <li><a href="#dom-animationplaybackevent-animationplaybackevent">AnimationPlaybackEvent(type, eventInitDict)</a>, in § 5.15 <li><a href="#dom-groupeffect-append">append()</a>, in § 5.7 <li><a href="#dom-groupeffect-append">append(...effects)</a>, in § 5.7 <li><a href="#associated-with-an-animation">associated with an animation</a>, in § 3.4 <li><a href="#at-progress-timeline-boundary">at progress timeline boundary</a>, in § 3.4.4 <li><a href="#dom-fillmode-auto">"auto"</a>, in § 5.6.1 <li><a href="#animation-auto-aligned-start-time">auto-aligned start time</a>, in § 3.3.7 <li><a href="#dom-fillmode-backwards">"backwards"</a>, in § 5.6.1 <li><a href="#dom-animationeffect-before">before()</a>, in § 5.3 <li><a href="#dom-animationeffect-before">before(...effects)</a>, in § 5.3 <li><a href="#dom-fillmode-both">"both"</a>, in § 5.6.1 <li><a href="#animation-calculating-an-auto-aligned-start-time">calculating an auto-aligned start time</a>, in § 3.3.7.1 <li><a href="#child-effect">child effect</a>, in § 3.9 <li><a href="#dom-groupeffect-children">children</a>, in § 5.7 <li> clone() <ul> <li><a href="#dom-groupeffect-clone">method for GroupEffect</a>, in § 5.7 <li><a href="#dom-sequenceeffect-clone">method for SequenceEffect</a>, in § 5.9 </ul> <li> constructor(children) <ul> <li><a href="#dom-groupeffect-groupeffect">constructor for GroupEffect</a>, in § 5.7 <li><a href="#dom-sequenceeffect-sequenceeffect">constructor for SequenceEffect</a>, in § 5.9 </ul> <li> constructor(children, timing) <ul> <li><a href="#dom-groupeffect-groupeffect">constructor for GroupEffect</a>, in § 5.7 <li><a href="#dom-sequenceeffect-sequenceeffect">constructor for SequenceEffect</a>, in § 5.9 </ul> <li><a href="#dom-animationplaybackevent-animationplaybackevent">constructor(type)</a>, in § 5.15 <li><a href="#dom-animationplaybackevent-animationplaybackevent">constructor(type, eventInitDict)</a>, in § 5.15 <li><a href="#current">current</a>, in § 3.4.4 <li> currentTime <ul> <li><a href="#dom-animation-currenttime">attribute for Animation</a>, in § 5.2 <li><a href="#dom-animationplaybackevent-currenttime">attribute for AnimationPlaybackEvent</a>, in § 5.15 <li><a href="#dom-animationtimeline-currenttime">attribute for AnimationTimeline</a>, in § 5.1 <li><a href="#dom-animationplaybackeventinit-currenttime">dict-member for AnimationPlaybackEventInit</a>, in § 5.15 </ul> <li><a href="#custom-effect">custom effect</a>, in § 4.5 <li> delay <ul> <li><a href="#dom-effecttiming-delay">dict-member for EffectTiming</a>, in § 5.4 <li><a href="#dom-optionaleffecttiming-delay">dict-member for OptionalEffectTiming</a>, in § 5.4 </ul> <li><a href="#descendant">descendant</a>, in § 3.9 <li><a href="#directly-associated-with-an-animation">directly associated with an animation</a>, in § 3.4 <li> duration <ul> <li><a href="#dom-animationtimeline-duration">attribute for AnimationTimeline</a>, in § 5.1 <li><a href="#dom-effecttiming-duration">dict-member for EffectTiming</a>, in § 5.4 <li><a href="#dom-optionaleffecttiming-duration">dict-member for OptionalEffectTiming</a>, in § 5.4 </ul> <li><a href="#callbackdef-effectcallback">EffectCallback</a>, in § 5.12 <li> endDelay <ul> <li><a href="#dom-effecttiming-enddelay">dict-member for EffectTiming</a>, in § 5.4 <li><a href="#dom-optionaleffecttiming-enddelay">dict-member for OptionalEffectTiming</a>, in § 5.4 </ul> <li><a href="#end-time">end time</a>, in § 3.4.2 <li><a href="#dom-computedeffecttiming-endtime">endTime</a>, in § 5.6 <li><a href="#enumdef-fillmode">FillMode</a>, in § 5.6.1 <li><a href="#first-child">first child</a>, in § 3.9 <li><a href="#dom-groupeffect-firstchild">firstChild</a>, in § 5.7 <li><a href="#dom-fillmode-forwards">"forwards"</a>, in § 5.6.1 <li><a href="#dom-animatable-getanimations">getAnimations()</a>, in § 5.13 <li><a href="#dom-animationeffect-getcomputedtiming">getComputedTiming()</a>, in § 5.3 <li><a href="#group-effect">group effect</a>, in § 3.9 <li><a href="#groupeffect">GroupEffect</a>, in § 5.7 <li><a href="#dom-groupeffect-groupeffect">GroupEffect(children)</a>, in § 5.7 <li><a href="#dom-groupeffect-groupeffect">GroupEffect(children, timing)</a>, in § 5.7 <li><a href="#inclusive-ancestor">inclusive ancestor</a>, in § 3.9 <li><a href="#inclusive-descendant">inclusive descendant</a>, in § 3.9 <li><a href="#inherited-time">inherited time</a>, in § 3.4.3 <li><a href="#in-play">in play</a>, in § 3.4.4 <li><a href="#insert-children">insert children</a>, in § 5.7.2 <li><a href="#intrinsic-iteration-duration">intrinsic iteration duration</a>, in § 3.5.1 <li><a href="#dom-animationnodelist-item">item(index)</a>, in § 5.8 <li> iterationComposite <ul> <li><a href="#dom-keyframeeffect-iterationcomposite">attribute for KeyframeEffect</a>, in § 5.10 <li><a href="#dom-keyframeeffectoptions-iterationcomposite">dict-member for KeyframeEffectOptions</a>, in § 5.10.3 </ul> <li><a href="#iteration-composite-operation">iteration composite operation</a>, in § 4.4 <li> IterationCompositeOperation <ul> <li><a href="#enumdef-iterationcompositeoperation">(enum)</a>, in § 5.11 <li><a href="#iterationcompositeoperation">definition of</a>, in § 5.11 </ul> <li><a href="#iteration-composite-operation-accumulate">iteration composite operation accumulate</a>, in § 4.4 <li><a href="#iteration-composite-operation-replace">iteration composite operation replace</a>, in § 4.4 <li><a href="#dom-keyframeeffect-keyframeeffect-source">KeyframeEffect(source)</a>, in § 5.10 <li><a href="#dom-keyframeeffect-keyframeeffect">KeyframeEffect(target, keyframes, options)</a>, in § 5.10 <li><a href="#last-child">last child</a>, in § 3.9 <li><a href="#dom-groupeffect-lastchild">lastChild</a>, in § 5.7 <li><a href="#dom-animationnodelist-length">length</a>, in § 5.8 <li><a href="#local-time">local time</a>, in § 3.4.3 <li><a href="#dom-computedeffecttiming-localtime">localTime</a>, in § 5.6 <li><a href="#next-sibling">next sibling</a>, in § 3.9 <li><a href="#dom-animationeffect-nextsibling">nextSibling</a>, in § 5.3 <li><a href="#next-sibling-not-included">next sibling not included</a>, in § 5.7.2 <li><a href="#dom-fillmode-none">"none"</a>, in § 5.6.1 <li><a href="#normalize-specified-timing">normalize specified timing</a>, in § 3.3 <li><a href="#dom-timelinerangeoffset-offset">offset</a>, in § 5.14 <li> overallProgress <ul> <li><a href="#dom-animation-overallprogress">attribute for Animation</a>, in § 5.2 <li><a href="#animation-overallprogress">dfn for animation</a>, in § 3.3.11 </ul> <li><a href="#dom-animationeffect-parent">parent</a>, in § 5.3 <li><a href="#parent-group">parent group</a>, in § 3.9 <li><a href="#pending-play-task">pending play task</a>, in § 3.3.7 <li><a href="#dom-animationtimeline-play">play()</a>, in § 5.1 <li><a href="#play-an-animation">play an animation</a>, in § 3.3.7 <li><a href="#animation-effect-playback-rate">playback rate</a>, in § 3.6 <li> playbackRate <ul> <li><a href="#dom-effecttiming-playbackrate">dict-member for EffectTiming</a>, in § 5.4 <li><a href="#dom-optionaleffecttiming-playbackrate">dict-member for OptionalEffectTiming</a>, in § 5.4 </ul> <li><a href="#dom-animationtimeline-play">play(effect)</a>, in § 5.1 <li><a href="#dom-groupeffect-prepend">prepend()</a>, in § 5.7 <li><a href="#dom-groupeffect-prepend">prepend(...effects)</a>, in § 5.7 <li><a href="#previous-sibling">previous sibling</a>, in § 3.9 <li><a href="#dom-animationeffect-previoussibling">previousSibling</a>, in § 5.3 <li><a href="#process-a-timing-argument">process a timing argument</a>, in § 5.7.1 <li><a href="#progress-based-timeline">progress-based timeline</a>, in § 3.2 <li> rangeEnd <ul> <li><a href="#dom-animation-rangeend">attribute for Animation</a>, in § 5.2 <li><a href="#dom-keyframeanimationoptions-rangeend">dict-member for KeyframeAnimationOptions</a>, in § 5.14 </ul> <li><a href="#dom-timelinerangeoffset-rangename">rangeName</a>, in § 5.14 <li> rangeStart <ul> <li><a href="#dom-animation-rangestart">attribute for Animation</a>, in § 5.2 <li><a href="#dom-keyframeanimationoptions-rangestart">dict-member for KeyframeAnimationOptions</a>, in § 5.14 </ul> <li><a href="#ready">ready</a>, in § 3.3.3 <li><a href="#dom-animationeffect-remove">remove()</a>, in § 5.3 <li><a href="#remove-an-animation-effect">remove an animation effect</a>, in § 5.7.2 <li><a href="#repeated-duration">repeated duration</a>, in § 3.7.2 <li><a href="#dom-iterationcompositeoperation-replace">"replace"</a>, in § 5.11 <li><a href="#dom-animationeffect-replace">replace()</a>, in § 5.3 <li><a href="#dom-animationeffect-replace">replace(...effects)</a>, in § 5.3 <li><a href="#root">root</a>, in § 3.9 <li><a href="#sequence-effect">sequence effect</a>, in § 3.9.4 <li><a href="#sequenceeffect">SequenceEffect</a>, in § 5.9 <li><a href="#dom-sequenceeffect-sequenceeffect">SequenceEffect(children)</a>, in § 5.9 <li><a href="#dom-sequenceeffect-sequenceeffect">SequenceEffect(children, timing)</a>, in § 5.9 <li><a href="#set-the-current-time">set the current time</a>, in § 3.3.5 <li><a href="#set-the-start-time">set the start time</a>, in § 3.3.6 <li><a href="#animation-set-the-timeline-of-an-animation">set the timeline of an animation</a>, in § 3.3.1 <li><a href="#silently-set-the-current-time">silently set the current time</a>, in § 3.3.5 <li><a href="#specified-end-delay">specified end delay</a>, in § 5.4 <li><a href="#specified-iteration-duration">specified iteration duration</a>, in § 5.4 <li><a href="#specified-start-delay">specified start delay</a>, in § 5.4 <li><a href="#start-delay">start delay</a>, in § 3.4.2 <li> startTime <ul> <li><a href="#dom-animation-starttime">attribute for Animation</a>, in § 5.2 <li><a href="#dom-computedeffecttiming-starttime">dict-member for ComputedEffectTiming</a>, in § 5.6 </ul> <li><a href="#time-based-animation-to-a-proportional-animation">time-based animation to a proportional animation</a>, in § 3.3 <li><a href="#timeline-duration">timeline duration</a>, in § 3.2 <li><a href="#dictdef-timelinerangeoffset">TimelineRangeOffset</a>, in § 5.14 <li> timelineTime <ul> <li><a href="#dom-animationplaybackevent-timelinetime">attribute for AnimationPlaybackEvent</a>, in § 5.15 <li><a href="#dom-animationplaybackeventinit-timelinetime">dict-member for AnimationPlaybackEventInit</a>, in § 5.15 </ul> <li><a href="#transformed-time">transformed time</a>, in § 3.8.2 <li><a href="#tree-order">tree order</a>, in § 3.9 <li><a href="#validate-a-cssnumberish-time">validate a CSSNumberish time</a>, in § 3.3.4 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms: <ul> <li><keyframe-selector> <li>@keyframes </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-EASING-1]</a> defines the following terms: <ul> <li>linear timing function </ul> <li> <a data-link-type="biblio">[CSS-EASING-2]</a> defines the following terms: <ul> <li>before flag <li>timing function </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>CSSPseudoElement </ul> <li> <a data-link-type="biblio">[CSS-TRANSITIONS-1]</a> defines the following terms: <ul> <li>start time </ul> <li> <a data-link-type="biblio">[CSS-TYPED-OM-1]</a> defines the following terms: <ul> <li>CSSKeywordValue <li>CSSNumberish <li>CSSNumericValue <li>value </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><time> <li>value accumulation </ul> <li> <a data-link-type="biblio">[CSSOM-1]</a> defines the following terms: <ul> <li>CSSOMString </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>Element <li>Event <li>EventInit </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>canvas <li>perform a microtask checkpoint <li>relevant realm </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>exist </ul> <li> <a data-link-type="biblio">[SCROLL-ANIMATIONS-1]</a> defines the following terms: <ul> <li>animation attachment range <li>animation-range-end <li>animation-range-start <li>html-processing-model-event-loops <li>scroll-driven animations </ul> <li> <a data-link-type="biblio">[WEB-ANIMATIONS-1]</a> defines the following terms: <ul> <li>Animation <li>Animation() <li>AnimationEffect <li>AnimationTimeline <li>ComputedEffectTiming <li>EffectTiming <li>KeyframeAnimationOptions <li>KeyframeEffect <li>KeyframeEffectOptions <li>OptionalEffectTiming <li>active interval <li>active phase <li>active time <li>active-after boundary time <li>after phase <li>animation <li>animation direction <li>animation effect <li>Apply any pending playback rate <li>associated effect <li>associated effect end <li>before phase <li>before-active boundary time <li>composite <li>current finished promise <li>current iteration <li>current ready promise <li>current time (for animation) <li>current time (for timeline) <li>directed progress <li>direction <li>easing <li>effect value <li>effective playback rate <li>end delay <li>fill <li>fill mode <li>finished <li>hold time <li>idle <li>in effect <li>inactive timeline <li>iteration count <li>iteration duration <li>iteration progress <li>iteration start <li>iterationStart <li>iterations <li>keyframe effect <li>monotonically increasing timeline <li>not animatable <li>overall progress <li>pause an animation <li>pending pause task <li>pending playback rate <li>play state <li>playback direction <li>simple iteration progress <li>source <li>start time <li>target element <li>target property <li>time value <li>timeline <li>transformed progress <li>unresolved <li>update an animation's finished state <li>update animations and send events <li>update the timing properties of an animation effect </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>DOMException <li>DOMString <li>Exposed <li>InvalidStateError <li>a new promise <li>double <li>resolve a promise <li>sequence <li>throw <li>undefined <li>unrestricted double <li>unsigned long </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-animations/"><cite>CSS Animations Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations/">https://drafts.csswg.org/css-animations/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd><a href="https://drafts.csswg.org/css-display-4/"><cite>CSS Display Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-display-4/">https://drafts.csswg.org/css-display-4/</a> <dt id="biblio-css-easing-1">[CSS-EASING-1] <dd>Brian Birtles; Dean Jackson; Matt Rakow. <a href="https://drafts.csswg.org/css-easing/"><cite>CSS Easing Functions Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-easing/">https://drafts.csswg.org/css-easing/</a> <dt id="biblio-css-easing-2">[CSS-EASING-2] <dd><a href="https://drafts.csswg.org/css-easing/"><cite>CSS Easing Functions Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-easing/">https://drafts.csswg.org/css-easing/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-transitions/"><cite>CSS Transitions</cite></a>. URL: <a href="https://drafts.csswg.org/css-transitions/">https://drafts.csswg.org/css-transitions/</a> <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1] <dd>Tab Atkins Jr.; François Remy. <a href="https://drafts.css-houdini.org/css-typed-om-1/"><cite>CSS Typed OM Level 1</cite></a>. URL: <a href="https://drafts.css-houdini.org/css-typed-om-1/">https://drafts.css-houdini.org/css-typed-om-1/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-cssom-1">[CSSOM-1] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-scroll-animations-1">[SCROLL-ANIMATIONS-1] <dd>Brian Birtles; et al. <a href="https://drafts.csswg.org/scroll-animations-1/"><cite>Scroll-driven Animations</cite></a>. URL: <a href="https://drafts.csswg.org/scroll-animations-1/">https://drafts.csswg.org/scroll-animations-1/</a> <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1] <dd>Brian Birtles; et al. <a href="https://drafts.csswg.org/web-animations-1/"><cite>Web Animations</cite></a>. URL: <a href="https://drafts.csswg.org/web-animations-1/">https://drafts.csswg.org/web-animations-1/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animationtimeline"><c- g>AnimationTimeline</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationtimeline-currenttime"><c- g>currentTime</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationtimeline-duration"><c- g>duration</c-></a>; <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation"><c- n>Animation</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationtimeline-play"><c- g>play</c-></a> (<c- b>optional</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animationtimeline-play-effect-effect"><c- g>effect</c-></a> = <c- b>null</c->); }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animation"><c- g>Animation</c-></a> { <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSNumberish?" href="#dom-animation-starttime"><c- g>startTime</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSNumberish?" href="#dom-animation-currenttime"><c- g>currentTime</c-></a>; <c- b>attribute</c-> (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-link-type="attribute" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-animation-rangestart"><c- g>rangeStart</c-></a>; <c- b>attribute</c-> (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-link-type="attribute" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-animation-rangeend"><c- g>rangeEnd</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animation-overallprogress"><c- g>overallProgress</c-></a>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- g>AnimationEffect</c-></a> { // Timing hierarchy <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#groupeffect"><c- n>GroupEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="GroupEffect?" href="#dom-animationeffect-parent"><c- g>parent</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-animationeffect-previoussibling"><c- g>previousSibling</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-animationeffect-nextsibling"><c- g>nextSibling</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-before"><c- g>before</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>... <a href="#dom-animationeffect-before-effects-effects"><code><c- g>effects</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-after"><c- g>after</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>... <a href="#dom-animationeffect-after-effects-effects"><code><c- g>effects</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-replace"><c- g>replace</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>... <a href="#dom-animationeffect-replace-effects-effects"><code><c- g>effects</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-remove"><c- g>remove</c-></a> (); }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming"><c- g>EffectTiming</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-delay"><c- g>delay</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-enddelay"><c- g>endDelay</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-playbackrate"><c- g>playbackRate</c-></a> = 1.0; (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-default=""auto"" data-link-type="dict-member" data-type="(unrestricted double or CSSNumericValue or DOMString)" href="#dom-effecttiming-duration"><c- g>duration</c-></a> = "auto"; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-optionaleffecttiming"><c- g>OptionalEffectTiming</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a data-type="double" href="#dom-optionaleffecttiming-playbackrate"><code><c- g>playbackRate</c-></code></a>; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming"><c- g>ComputedEffectTiming</c-></a> { <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish" href="#dom-computedeffecttiming-starttime"><c- g>startTime</c-></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish" href="#dom-computedeffecttiming-endtime"><c- g>endTime</c-></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish" href="#dom-computedeffecttiming-activeduration"><c- g>activeDuration</c-></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="CSSNumberish?" href="#dom-computedeffecttiming-localtime"><c- g>localTime</c-></a>; }; <c- b>enum</c-> <a href="#enumdef-fillmode"><code><c- g>FillMode</c-></code></a> { <a href="#dom-fillmode-none"><code><c- s>"none"</c-></code></a>, <a href="#dom-fillmode-forwards"><code><c- s>"forwards"</c-></code></a>, <a href="#dom-fillmode-backwards"><code><c- s>"backwards"</c-></code></a>, <a href="#dom-fillmode-both"><code><c- s>"both"</c-></code></a>, <a href="#dom-fillmode-auto"><code><c- s>"auto"</c-></code></a> }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#groupeffect"><code><c- g>GroupEffect</c-></code></a> { <a class="idl-code" data-link-type="constructor" href="#dom-groupeffect-groupeffect"><c- g>constructor</c-></a>(<a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>>? <a class="idl-code" data-link-type="argument" href="#dom-groupeffect-groupeffect-children-timing-children"><c- g>children</c-></a>, <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming"><c- n>EffectTiming</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-groupeffect-groupeffect-children-timing-timing"><c- g>timing</c-></a> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#animationnodelist"><c- n>AnimationNodeList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationNodeList" href="#dom-groupeffect-children"><c- g>children</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-groupeffect-firstchild"><c- g>firstChild</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffect?" href="#dom-groupeffect-lastchild"><c- g>lastChild</c-></a>; <a data-link-type="idl-name" href="#groupeffect"><c- n>GroupEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffect-clone"><c- g>clone</c-></a> (); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffect-prepend"><c- g>prepend</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>... <a href="#dom-groupeffect-prepend-effects-effects"><code><c- g>effects</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffect-append"><c- g>append</c-></a> (<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>... <a href="#dom-groupeffect-append-effects-effects"><code><c- g>effects</c-></code></a>); }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#animationnodelist"><code><c- g>AnimationNodeList</c-></code></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-animationnodelist-length"><c- g>length</c-></a>; <c- b>getter</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-animationnodelist-item"><c- g>item</c-></a> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a href="#dom-animationnodelist-item-index-index"><code><c- g>index</c-></code></a>); }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#sequenceeffect"><code><c- g>SequenceEffect</c-></code></a> : <a data-link-type="idl-name" href="#groupeffect"><c- n>GroupEffect</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-sequenceeffect-sequenceeffect"><c- g>constructor</c-></a>(<a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect"><c- n>AnimationEffect</c-></a>>? <a href="#dom-sequenceeffect-sequenceeffect-children-timing-children"><code><c- g>children</c-></code></a>, <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming"><c- n>EffectTiming</c-></a>) <a href="#dom-sequenceeffect-sequenceeffect-children-timing-timing"><code><c- g>timing</c-></code></a> = {}); <a data-link-type="idl-name" href="#sequenceeffect"><c- n>SequenceEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-sequenceeffect-clone"><c- g>clone</c-></a> (); }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect"><c- g>KeyframeEffect</c-></a> { <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation"><c- n>IterationCompositeOperation</c-></a> <a class="idl-code" data-link-type="attribute" data-type="IterationCompositeOperation" href="#dom-keyframeeffect-iterationcomposite"><c- g>iterationComposite</c-></a>; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions"><c- g>KeyframeEffectOptions</c-></a> { <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation"><c- n>IterationCompositeOperation</c-></a> <a class="idl-code" data-default=""replace"" data-link-type="dict-member" data-type="IterationCompositeOperation" href="#dom-keyframeeffectoptions-iterationcomposite"><c- g>iterationComposite</c-></a> = "replace"; }; <c- b>enum</c-> <a href="#enumdef-iterationcompositeoperation"><code><c- g>IterationCompositeOperation</c-></code></a> { <a href="#dom-iterationcompositeoperation-replace"><code><c- s>"replace"</c-></code></a>, <a href="#dom-iterationcompositeoperation-accumulate"><code><c- s>"accumulate"</c-></code></a> }; <c- b>callback</c-> <a href="#callbackdef-effectcallback"><code><c- g>EffectCallback</c-></code></a> = <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a>? <a href="#dom-effectcallback-progress"><code><c- g>progress</c-></code></a>, (<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"><c- n>CSSPseudoElement</c-></a>) <a href="#dom-effectcallback-currenttarget"><code><c- g>currentTarget</c-></code></a>, <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation"><c- n>Animation</c-></a> <a href="#dom-effectcallback-animation"><code><c- g>animation</c-></code></a>); <c- b>dictionary</c-> <a href="#dictdef-timelinerangeoffset"><code><c- g>TimelineRangeOffset</c-></code></a> { <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a>? <a data-type="CSSOMString?" href="#dom-timelinerangeoffset-rangename"><code><c- g>rangeName</c-></code></a>; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"><c- n>CSSNumericValue</c-></a> <a data-type="CSSNumericValue" href="#dom-timelinerangeoffset-offset"><code><c- g>offset</c-></code></a>; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions"><c- g>KeyframeAnimationOptions</c-></a> { (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-default=""normal"" data-link-type="dict-member" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-keyframeanimationoptions-rangestart"><c- g>rangeStart</c-></a> = "normal"; (<a data-link-type="idl-name" href="#dictdef-timelinerangeoffset"><c- n>TimelineRangeOffset</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"><c- n>CSSNumericValue</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue"><c- n>CSSKeywordValue</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-default=""normal"" data-link-type="dict-member" data-type="(TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)" href="#dom-keyframeanimationoptions-rangeend"><c- g>rangeEnd</c-></a> = "normal"; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#animationplaybackevent"><code><c- g>AnimationPlaybackEvent</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event"><c- n>Event</c-></a> { <a href="#dom-animationplaybackevent-animationplaybackevent"><code><c- g>constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a> <a href="#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-animationplaybackeventinit"><c- n>AnimationPlaybackEventInit</c-></a> <a href="#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationplaybackevent-currenttime"><c- g>currentTime</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSNumberish?" href="#dom-animationplaybackevent-timelinetime"><c- g>timelineTime</c-></a>; }; <c- b>dictionary</c-> <a href="#dictdef-animationplaybackeventinit"><code><c- g>AnimationPlaybackEventInit</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit"><c- n>EventInit</c-></a> { <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSNumberish?" href="#dom-animationplaybackeventinit-currenttime"><c- g>currentTime</c-></a> = <c- b>null</c->; <a data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"><c- n>CSSNumberish</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSNumberish?" href="#dom-animationplaybackeventinit-timelinetime"><c- g>timelineTime</c-></a> = <c- b>null</c->; }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> This is not quite right. If <var>old effect</var> is attached to another animation in the same task then we should probably not do an extra callback with <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved">unresolved</a>. The definition of when <a data-link-type="dfn" href="#custom-effect">custom effects</a> gets called needs to be audited and probably rewritten. <a class="issue-return" href="#issue-ddad0532" title="Jump to section">↵</a> </div> <div class="issue"> The procedure to <a data-link-type="dfn" href="#play-an-animation">play an animation</a> needs to include scheduling a task for updating <a data-link-type="dfn" href="#custom-effect">custom effects</a>. <a class="issue-return" href="#issue-fab0faba" title="Jump to section">↵</a></div> <div class="issue"> The procedures for calling custom effects need to be reworked. Currently they probably involve calling too often for changes that could be coalesced. <a class="issue-return" href="#issue-5b6104df" title="Jump to section">↵</a></div> <div class="issue"> This procedure is not strictly correct for a paused animation if the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation">animation</a>’s current time is explicitly set, as this can introduce a lead or lag, between the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline">timeline</a>’s current time and animation’s current time. <a class="issue-return" href="#issue-05668d8c" title="Jump to section">↵</a></div> <div class="issue"> This procedure can likely be simplified, and instead determine if at a scrolling boundary regardless of playback rate or start time. The surprising behavior that this is trying to prevent is an animation becoming inactive precisely at the scroll limit, alleviating the need for set a fill-mode with a ScrollTimeline. Checking if timeline <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline-current-time">current time</a> is 0 or timeline duration may be sufficient. <a class="issue-return" href="#issue-c8759f87" title="Jump to section">↵</a></div> <div class="issue"> Currently <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function">timing functions</a> that generate results outside the range [0, 1] will behave unexpectedly when applied to group effects, as children will increase iterations or enter into fill mode rather than continuing to extrapolate along their defined behavior (which is what they would do if the timing function applied to them directly). To fix this it is possible we will wish to introduce ‘overflow’ fill modes that respond to time values larger than or smaller than the active time range by extrapolating rather than filling. See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section 15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F</a>. <a class="issue-return" href="#issue-e54c2365" title="Jump to section">↵</a> </div> <div class="issue"> Currently, the set of <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function">timing functions</a> allowed on a <a data-link-type="dfn" href="#group-effect">group effect</a> is not restricted. This has raised concern about complexity of implementation and also complexity of behavior with regards to fill modes. As a result, allowing the full set of timing functions on group effects is considered at risk. Alternatives are to either restrict timing functions on group effects to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-easing-1/#linear-easing-function">linear timing function</a> or to a set of “simple” timing functions that have properties that alleviate some of the concerns with the more complex timing functions. See <a href="http://lists.w3.org/Archives/Public/public-fx/2013JulSep/0076.html">section 2 of the discussion from August 2013</a>. <a class="issue-return" href="#issue-b2228569" title="Jump to section">↵</a> </div> <div class="issue"> The "associated animation of an animation effect" definition used when sorting animation effects needs to be revised to use the <a data-link-type="dfn" href="#associated-with-an-animation">associated with an animation</a> definition introduced in this level of the specification so that it correctly handles group effects. <a class="issue-return" href="#issue-d462e32e" title="Jump to section">↵</a></div> <div class="issue"> This whole feature needs to be revisited. The current thinking is that rather than having custom effects, we should simply have an <code>onupdate</code> callback on each <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect">animation effect</a>. That would allow, for example, augmenting an existing effect with a function that performs logging or triggers additional actions at certain times. With the current arrangement, doing this would require adding a parent group just to achieve this. <a class="issue-return" href="#issue-3b34db07" title="Jump to section">↵</a></div> <div class="issue"> It needs to be called whenever timing properties are updated too, right? <a class="issue-return" href="#issue-e49078ba" title="Jump to section">↵</a></div> <div class="issue"> There may be use cases where an action needs to be triggered at a specific point in an animation tree. In many cases this can be achieved by inserting a custom effect with a step-start easing that spans the period during which the action should be triggered. However, this can impose additional layout requirements on the content which might be cumbersome to accommodate. Some alternatives under consideration: <ul> <li data-md> Additional calling conditions could be defined to accommodate zero-width custom effects. For example, it could be required that the callback be called if (given infinite precision) there was a time between the previous and current update times that aligned with the custom effect. <li data-md> Instead of adding special calling conditions to custom effects, a new type of animation effect, Trigger, could be introduced. The trigger would only ever act as a zero-width custom effect as described above, its constructor would take a callback function, but not require a target or timing. It could also specify other calling conventions, for example whether it should only trigger in a specific playback direction. </ul> <a class="issue-return" href="#issue-55235f86" title="Jump to section">↵</a> </div> <div class="issue"> Need to define this more precisely. Are styles flushed? Presumably they are. Can we suspend reflow for the duration of executing the script-based animation effects and just do it once afterwards? <a class="issue-return" href="#issue-df790f19" title="Jump to section">↵</a></div> <div class="issue"> It has been suggested this method be renamed, or even removed (see <a href="https://github.com/w3ctag/spec-reviews/blob/master/2013/10/Web%20Animations.md#issue-play-method">TAG feedback</a>). <a class="issue-return" href="#issue-6fb09aae" title="Jump to section">↵</a></div> <div class="issue"> Need to define the start behavior when <var>effect</var> is null. <a class="issue-return" href="#issue-befeaed2" title="Jump to section">↵</a></div> <div class="issue"> Should this be <code>parentGroup</code>? <a class="issue-return" href="#issue-40288bfc" title="Jump to section">↵</a></div> <div class="issue"> The <code>remove()</code> method can be used to remove an effect from either its parent group or animation. Should we keep it in level 1 and define it simply as removing the animation from its animation? <a class="issue-return" href="#issue-49ccd991" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="dom-keyframeeffect-iterationcomposite"> <summary>MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/iterationComposite" title="The iterationComposite property of a KeyframeEffect resolves how the animation's property value changes accumulate or override each other upon each of the animation's iterations.">KeyframeEffect/iterationComposite</a> <div class="support"> Firefox80+Safari16.4+ChromeNone <hr> Opera?EdgeNone <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "000c54c5": {"dfnID":"000c54c5","dfnText":"KeyframeEffect","external":true,"refSections":[{"refs":[{"id":"ref-for-keyframeeffect"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"https://drafts.csswg.org/web-animations-1/#keyframeeffect"}, "00c27339": {"dfnID":"00c27339","dfnText":"OptionalEffectTiming","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-optionaleffecttiming"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"https://drafts.csswg.org/web-animations-1/#dictdef-optionaleffecttiming"}, "03570f9e": {"dfnID":"03570f9e","dfnText":"<time>","external":true,"refSections":[{"refs":[{"id":"ref-for-time-value"}],"title":"3.3.4. Validating a CSSNumberish time"}],"url":"https://drafts.csswg.org/css-values-4/#time-value"}, "05badf27": {"dfnID":"05badf27","dfnText":"monotonically increasing timeline","external":true,"refSections":[{"refs":[{"id":"ref-for-monotonically-increasing-timeline"},{"id":"ref-for-monotonically-increasing-timeline\u2460"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2461"}],"title":"3.3.7. Playing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#monotonically-increasing-timeline"}, "079e827a": {"dfnID":"079e827a","dfnText":"ComputedEffectTiming","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-computedeffecttiming"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming"}, "085f7c08": {"dfnID":"085f7c08","dfnText":"inactive timeline","external":true,"refSections":[{"refs":[{"id":"ref-for-inactive-timeline"},{"id":"ref-for-inactive-timeline\u2460"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-inactive-timeline\u2461"},{"id":"ref-for-inactive-timeline\u2462"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-inactive-timeline\u2463"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-inactive-timeline\u2464"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-inactive-timeline\u2465"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#inactive-timeline"}, "0fc40460": {"dfnID":"0fc40460","dfnText":"canvas","external":true,"refSections":[{"refs":[{"id":"ref-for-canvas"}],"title":"4.5. Custom effects"}],"url":"https://html.spec.whatwg.org/multipage/canvas.html#canvas"}, "1198d389": {"dfnID":"1198d389","dfnText":"current time (for animation)","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-current-time"},{"id":"ref-for-animation-current-time\u2460"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2461"},{"id":"ref-for-animation-current-time\u2462"},{"id":"ref-for-animation-current-time\u2463"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-current-time\u2464"},{"id":"ref-for-animation-current-time\u2465"},{"id":"ref-for-animation-current-time\u2466"},{"id":"ref-for-animation-current-time\u2467"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-current-time\u2468"},{"id":"ref-for-animation-current-time\u2460\u24ea"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2460\u2460"},{"id":"ref-for-animation-current-time\u2460\u2461"},{"id":"ref-for-animation-current-time\u2460\u2462"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2460\u2463"},{"id":"ref-for-animation-current-time\u2460\u2464"},{"id":"ref-for-animation-current-time\u2460\u2465"},{"id":"ref-for-animation-current-time\u2460\u2466"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2460\u2467"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-animation-current-time\u2460\u2468"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation-current-time\u2461\u24ea"},{"id":"ref-for-animation-current-time\u2461\u2460"},{"id":"ref-for-animation-current-time\u2461\u2461"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-animation-current-time\u2461\u2462"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#animation-current-time"}, "11e0b87f": {"dfnID":"11e0b87f","dfnText":"unrestricted double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-unrestricted-double"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-idl-unrestricted-double\u2460"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-idl-unrestricted-double\u2461"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"https://webidl.spec.whatwg.org/#idl-unrestricted-double"}, "1243a891": {"dfnID":"1243a891","dfnText":"exist","external":true,"refSections":[{"refs":[{"id":"ref-for-map-exists"},{"id":"ref-for-map-exists\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://infra.spec.whatwg.org/#map-exists"}, "129bdae8": {"dfnID":"129bdae8","dfnText":"Event","external":true,"refSections":[{"refs":[{"id":"ref-for-event"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://dom.spec.whatwg.org/#event"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"5.10.1. Creating a new KeyframeEffect object"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "16ef1f31": {"dfnID":"16ef1f31","dfnText":"CSSNumericValue","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue"},{"id":"ref-for-cssnumericvalue\u2460"},{"id":"ref-for-cssnumericvalue\u2461"},{"id":"ref-for-cssnumericvalue\u2462"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-cssnumericvalue\u2463"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-cssnumericvalue\u2464"}],"title":"5.10.2. Modification to the *Keyframe dictionaries"},{"refs":[{"id":"ref-for-cssnumericvalue\u2465"},{"id":"ref-for-cssnumericvalue\u2466"},{"id":"ref-for-cssnumericvalue\u2467"},{"id":"ref-for-cssnumericvalue\u2468"},{"id":"ref-for-cssnumericvalue\u2460\u24ea"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"}, "187be130": {"dfnID":"187be130","dfnText":"play state","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-play-state"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-play-state\u2460"},{"id":"ref-for-animation-play-state\u2461"}],"title":"3.3.7.1. Auto-aligning the start time"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-play-state"}, "1f70c4b1": {"dfnID":"1f70c4b1","dfnText":"start time","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-start-time"},{"id":"ref-for-animation-start-time\u2460"},{"id":"ref-for-animation-start-time\u2461"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2462"},{"id":"ref-for-animation-start-time\u2463"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-animation-start-time\u2464"},{"id":"ref-for-animation-start-time\u2465"},{"id":"ref-for-animation-start-time\u2466"},{"id":"ref-for-animation-start-time\u2467"},{"id":"ref-for-animation-start-time\u2468"},{"id":"ref-for-animation-start-time\u2460\u24ea"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-start-time\u2460\u2460"},{"id":"ref-for-animation-start-time\u2460\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-start-time\u2460\u2462"},{"id":"ref-for-animation-start-time\u2460\u2463"},{"id":"ref-for-animation-start-time\u2460\u2464"},{"id":"ref-for-animation-start-time\u2460\u2465"},{"id":"ref-for-animation-start-time\u2460\u2466"},{"id":"ref-for-animation-start-time\u2460\u2467"},{"id":"ref-for-animation-start-time\u2460\u2468"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2461\u24ea"},{"id":"ref-for-animation-start-time\u2461\u2460"}],"title":"3.3.7.1. Auto-aligning the start time"},{"refs":[{"id":"ref-for-animation-start-time\u2461\u2461"},{"id":"ref-for-animation-start-time\u2461\u2462"},{"id":"ref-for-animation-start-time\u2461\u2463"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2461\u2464"},{"id":"ref-for-animation-start-time\u2461\u2465"},{"id":"ref-for-animation-start-time\u2461\u2466"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation-start-time\u2461\u2467"},{"id":"ref-for-animation-start-time\u2461\u2468"},{"id":"ref-for-animation-start-time\u2462\u24ea"},{"id":"ref-for-animation-start-time\u2462\u2460"}],"title":"5.2. The Animation interface"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-start-time"}, "21b83173": {"dfnID":"21b83173","dfnText":"idle","external":true,"refSections":[{"refs":[{"id":"ref-for-play-state-idle"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#play-state-idle"}, "21e02692": {"dfnID":"21e02692","dfnText":"associated effect end","external":true,"refSections":[{"refs":[{"id":"ref-for-associated-effect-end"},{"id":"ref-for-associated-effect-end\u2460"},{"id":"ref-for-associated-effect-end\u2461"},{"id":"ref-for-associated-effect-end\u2462"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2463"},{"id":"ref-for-associated-effect-end\u2464"},{"id":"ref-for-associated-effect-end\u2465"},{"id":"ref-for-associated-effect-end\u2466"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2467"},{"id":"ref-for-associated-effect-end\u2468"},{"id":"ref-for-associated-effect-end\u2460\u24ea"},{"id":"ref-for-associated-effect-end\u2460\u2460"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2460\u2461"}],"title":"5.2. The Animation interface"}],"url":"https://drafts.csswg.org/web-animations-1/#associated-effect-end"}, "25343345": {"dfnID":"25343345","dfnText":"easing","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-easing"},{"id":"ref-for-dom-effecttiming-easing\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-easing"}, "28642d4f": {"dfnID":"28642d4f","dfnText":"AnimationTimeline","external":true,"refSections":[{"refs":[{"id":"ref-for-animationtimeline"},{"id":"ref-for-animationtimeline\u2460"}],"title":"5.1. The AnimationTimeline interface"}],"url":"https://drafts.csswg.org/web-animations-1/#animationtimeline"}, "296f3551": {"dfnID":"296f3551","dfnText":"Element","external":true,"refSections":[{"refs":[{"id":"ref-for-element"}],"title":"5.12. The EffectCallback callback function"}],"url":"https://dom.spec.whatwg.org/#element"}, "2a319ac5": {"dfnID":"2a319ac5","dfnText":"animation","external":true,"refSections":[{"refs":[{"id":"ref-for-animation"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-animation\u2460"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-animation\u2461"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-animation\u2462"},{"id":"ref-for-animation\u2463"},{"id":"ref-for-animation\u2464"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-animation\u2465"},{"id":"ref-for-animation\u2466"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-animation\u2467"},{"id":"ref-for-animation\u2468"},{"id":"ref-for-animation\u2460\u24ea"},{"id":"ref-for-animation\u2460\u2460"},{"id":"ref-for-animation\u2460\u2461"},{"id":"ref-for-animation\u2460\u2462"},{"id":"ref-for-animation\u2460\u2463"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation\u2460\u2464"},{"id":"ref-for-animation\u2460\u2465"},{"id":"ref-for-animation\u2460\u2466"},{"id":"ref-for-animation\u2460\u2467"},{"id":"ref-for-animation\u2460\u2468"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-animation\u2461\u24ea"},{"id":"ref-for-animation\u2461\u2460"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-animation\u2461\u2461"}],"title":"4.1.1. Not animatable"},{"refs":[{"id":"ref-for-animation\u2461\u2462"}],"title":"4.3.1. The effect stack"},{"refs":[{"id":"ref-for-animation\u2461\u2463"},{"id":"ref-for-animation\u2461\u2464"},{"id":"ref-for-animation\u2461\u2465"},{"id":"ref-for-animation\u2461\u2466"},{"id":"ref-for-animation\u2461\u2467"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-animation\u2461\u2468"},{"id":"ref-for-animation\u2462\u24ea"},{"id":"ref-for-animation\u2462\u2460"},{"id":"ref-for-animation\u2462\u2461"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-animation\u2462\u2462"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-animation\u2462\u2463"},{"id":"ref-for-animation\u2462\u2464"}],"title":"5.7.2. Definitions for manipulating hierarchies"},{"refs":[{"id":"ref-for-animation\u2462\u2465"},{"id":"ref-for-animation\u2462\u2466"}],"title":"5.12. The EffectCallback callback function"},{"refs":[{"id":"ref-for-animation\u2462\u2467"},{"id":"ref-for-animation\u2462\u2468"}],"title":"5.13. The Animatable interface"},{"refs":[{"id":"ref-for-animation\u2463\u24ea"},{"id":"ref-for-animation\u2463\u2460"}],"title":"5.14. The Animatable interface mixin"},{"refs":[{"id":"ref-for-animation\u2463\u2461"},{"id":"ref-for-animation\u2463\u2462"},{"id":"ref-for-animation\u2463\u2463"},{"id":"ref-for-animation\u2463\u2464"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#animation"}, "2c373346": {"dfnID":"2c373346","dfnText":"current finished promise","external":true,"refSections":[{"refs":[{"id":"ref-for-current-finished-promise"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-current-finished-promise\u2460"}],"title":"4.1.1. Not animatable"}],"url":"https://drafts.csswg.org/web-animations-1/#current-finished-promise"}, "32060dd5": {"dfnID":"32060dd5","dfnText":"value accumulation","external":true,"refSections":[{"refs":[{"id":"ref-for-accumulation"}],"title":"4.2.1. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-accumulation\u2460"}],"title":"4.4. Effect accumulation"}],"url":"https://drafts.csswg.org/css-values-4/#accumulation"}, "3860d250": {"dfnID":"3860d250","dfnText":"simple iteration progress","external":true,"refSections":[{"refs":[{"id":"ref-for-simple-iteration-progress"},{"id":"ref-for-simple-iteration-progress\u2460"}],"title":"3.7.1. Overview"}],"url":"https://drafts.csswg.org/web-animations-1/#simple-iteration-progress"}, "3e80485f": {"dfnID":"3e80485f","dfnText":"pending pause task","external":true,"refSections":[{"refs":[{"id":"ref-for-pending-pause-task"},{"id":"ref-for-pending-pause-task\u2460"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-pending-pause-task\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-pending-pause-task\u2462"},{"id":"ref-for-pending-pause-task\u2463"}],"title":"3.3.7. Playing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#pending-pause-task"}, "40abc39b": {"dfnID":"40abc39b","dfnText":"EffectTiming","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-effecttiming"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2460"},{"id":"ref-for-dictdef-effecttiming\u2461"},{"id":"ref-for-dictdef-effecttiming\u2462"},{"id":"ref-for-dictdef-effecttiming\u2463"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2464"},{"id":"ref-for-dictdef-effecttiming\u2465"},{"id":"ref-for-dictdef-effecttiming\u2466"},{"id":"ref-for-dictdef-effecttiming\u2467"},{"id":"ref-for-dictdef-effecttiming\u2468"}],"title":"5.7.1. Processing a timing argument"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2460\u24ea"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming"}, "4316dabb": {"dfnID":"4316dabb","dfnText":"Apply any pending playback rate","external":true,"refSections":[{"refs":[{"id":"ref-for-apply-any-pending-playback-rate"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2460"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2462"},{"id":"ref-for-apply-any-pending-playback-rate\u2463"}],"title":"3.3.7. Playing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate"}, "43ac943b": {"dfnID":"43ac943b","dfnText":"hold time","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-hold-time"},{"id":"ref-for-animation-hold-time\u2460"},{"id":"ref-for-animation-hold-time\u2461"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2462"},{"id":"ref-for-animation-hold-time\u2463"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-animation-hold-time\u2464"},{"id":"ref-for-animation-hold-time\u2465"},{"id":"ref-for-animation-hold-time\u2466"},{"id":"ref-for-animation-hold-time\u2467"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-hold-time\u2468"},{"id":"ref-for-animation-hold-time\u2460\u24ea"},{"id":"ref-for-animation-hold-time\u2460\u2460"},{"id":"ref-for-animation-hold-time\u2460\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-hold-time\u2460\u2462"},{"id":"ref-for-animation-hold-time\u2460\u2463"},{"id":"ref-for-animation-hold-time\u2460\u2464"},{"id":"ref-for-animation-hold-time\u2460\u2465"},{"id":"ref-for-animation-hold-time\u2460\u2466"},{"id":"ref-for-animation-hold-time\u2460\u2467"},{"id":"ref-for-animation-hold-time\u2460\u2468"},{"id":"ref-for-animation-hold-time\u2461\u24ea"},{"id":"ref-for-animation-hold-time\u2461\u2460"},{"id":"ref-for-animation-hold-time\u2461\u2461"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2461\u2462"},{"id":"ref-for-animation-hold-time\u2461\u2463"}],"title":"3.3.7.1. Auto-aligning the start time"},{"refs":[{"id":"ref-for-animation-hold-time\u2461\u2464"},{"id":"ref-for-animation-hold-time\u2461\u2465"},{"id":"ref-for-animation-hold-time\u2461\u2466"},{"id":"ref-for-animation-hold-time\u2461\u2467"}],"title":"3.3.8. Pausing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-hold-time"}, "43b80a9a": {"dfnID":"43b80a9a","dfnText":"keyframe effect","external":true,"refSections":[{"refs":[{"id":"ref-for-keyframe-effect"},{"id":"ref-for-keyframe-effect\u2460"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-keyframe-effect\u2461"}],"title":"3.4.1. Types of animation effects"},{"refs":[{"id":"ref-for-keyframe-effect\u2462"},{"id":"ref-for-keyframe-effect\u2463"}],"title":"4.2.1. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-keyframe-effect\u2464"}],"title":"4.4. Effect accumulation"},{"refs":[{"id":"ref-for-keyframe-effect\u2465"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"https://drafts.csswg.org/web-animations-1/#keyframe-effect"}, "44a7708c": {"dfnID":"44a7708c","dfnText":"EventInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-eventinit"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "4ac10ac4": {"dfnID":"4ac10ac4","dfnText":"fill","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-fill"},{"id":"ref-for-dom-effecttiming-fill\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-fill"}, "4c53a3ed": {"dfnID":"4c53a3ed","dfnText":"iteration start","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-start"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-start\u2460"},{"id":"ref-for-iteration-start\u2461"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#iteration-start"}, "4f27c50c": {"dfnID":"4f27c50c","dfnText":"update an animation's finished state","external":true,"refSections":[{"refs":[{"id":"ref-for-update-an-animations-finished-state"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2460"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2462"},{"id":"ref-for-update-an-animations-finished-state\u2463"}],"title":"3.3.7. Playing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state"}, "53172985": {"dfnID":"53172985","dfnText":"current time (for timeline)","external":true,"refSections":[{"refs":[{"id":"ref-for-timeline-current-time"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-timeline-current-time\u2460"}],"title":"5.1. The AnimationTimeline interface"}],"url":"https://drafts.csswg.org/web-animations-1/#timeline-current-time"}, "55e6f293": {"dfnID":"55e6f293","dfnText":"associated effect","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-associated-effect"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460"},{"id":"ref-for-animation-associated-effect\u2461"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-animation-associated-effect\u2462"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2463"},{"id":"ref-for-animation-associated-effect\u2464"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2465"}],"title":"3.3.9. Canceling an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2466"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2467"},{"id":"ref-for-animation-associated-effect\u2468"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460\u24ea"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460\u2460"},{"id":"ref-for-animation-associated-effect\u2460\u2461"}],"title":"5.1. The AnimationTimeline interface"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-associated-effect"}, "561d6477": {"dfnID":"561d6477","dfnText":"iteration progress","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-progress"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-iteration-progress\u2460"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-iteration-progress\u2461"},{"id":"ref-for-iteration-progress\u2462"},{"id":"ref-for-iteration-progress\u2463"},{"id":"ref-for-iteration-progress\u2464"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-progress\u2465"}],"title":"4.5. Custom effects"},{"refs":[{"id":"ref-for-iteration-progress\u2466"},{"id":"ref-for-iteration-progress\u2467"},{"id":"ref-for-iteration-progress\u2468"},{"id":"ref-for-iteration-progress\u2460\u24ea"}],"title":"4.5.1. Sampling custom effects"},{"refs":[{"id":"ref-for-iteration-progress\u2460\u2460"}],"title":"5.12. The EffectCallback callback function"}],"url":"https://drafts.csswg.org/web-animations-1/#iteration-progress"}, "578a7982": {"dfnID":"578a7982","dfnText":"CSSPseudoElement","external":true,"refSections":[{"refs":[{"id":"ref-for-csspseudoelement"}],"title":"5.12. The EffectCallback callback function"}],"url":"https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"}, "5991ccfb": {"dfnID":"5991ccfb","dfnText":"relevant realm","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-relevant-realm"}],"title":"3.3.7. Playing an animation"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm"}, "5a7dff27": {"dfnID":"5a7dff27","dfnText":"scroll-driven animations","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-driven-animations"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-scroll-driven-animations\u2460"}],"title":"3.3.8. Pausing an animation"}],"url":"https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations"}, "5bb85f52": {"dfnID":"5bb85f52","dfnText":"finished","external":true,"refSections":[{"refs":[{"id":"ref-for-play-state-finished"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-play-state-finished\u2460"},{"id":"ref-for-play-state-finished\u2461"}],"title":"3.4.4. Animation effect phases and\nstates"}],"url":"https://drafts.csswg.org/web-animations-1/#play-state-finished"}, "5f90bbfb": {"dfnID":"5f90bbfb","dfnText":"undefined","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-undefined"},{"id":"ref-for-idl-undefined\u2460"},{"id":"ref-for-idl-undefined\u2461"},{"id":"ref-for-idl-undefined\u2462"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-idl-undefined\u2463"},{"id":"ref-for-idl-undefined\u2464"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-idl-undefined\u2465"}],"title":"5.12. The EffectCallback callback function"}],"url":"https://webidl.spec.whatwg.org/#idl-undefined"}, "5fced98b": {"dfnID":"5fced98b","dfnText":"CSSOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-cssomstring"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "602506f7": {"dfnID":"602506f7","dfnText":"linear timing function","external":true,"refSections":[{"refs":[{"id":"ref-for-linear-easing-function"}],"title":"3.8. Time transformations"}],"url":"https://www.w3.org/TR/css-easing-1/#linear-easing-function"}, "60aa41c8": {"dfnID":"60aa41c8","dfnText":"current ready promise","external":true,"refSections":[{"refs":[{"id":"ref-for-current-ready-promise"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-current-ready-promise\u2460"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-current-ready-promise\u2461"},{"id":"ref-for-current-ready-promise\u2462"},{"id":"ref-for-current-ready-promise\u2463"},{"id":"ref-for-current-ready-promise\u2464"}],"title":"3.3.7. Playing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#current-ready-promise"}, "6b3eac42": {"dfnID":"6b3eac42","dfnText":"start time","external":true,"refSections":[{"refs":[{"id":"ref-for-transition-start-time"}],"title":"3.3.8. Pausing an animation"}],"url":"https://drafts.csswg.org/css-transitions-1/#transition-start-time"}, "7362dc35": {"dfnID":"7362dc35","dfnText":"not animatable","external":true,"refSections":[{"refs":[{"id":"ref-for-not-animatable"}],"title":"4.1.1. Not animatable"}],"url":"https://drafts.csswg.org/web-animations-1/#not-animatable"}, "7447b8d1": {"dfnID":"7447b8d1","dfnText":"target element","external":true,"refSections":[{"refs":[{"id":"ref-for-effect-target-target-element"},{"id":"ref-for-effect-target-target-element\u2460"},{"id":"ref-for-effect-target-target-element\u2461"},{"id":"ref-for-effect-target-target-element\u2462"},{"id":"ref-for-effect-target-target-element\u2463"}],"title":"4.5.1. Sampling custom effects"},{"refs":[{"id":"ref-for-effect-target-target-element\u2464"},{"id":"ref-for-effect-target-target-element\u2465"},{"id":"ref-for-effect-target-target-element\u2466"},{"id":"ref-for-effect-target-target-element\u2467"},{"id":"ref-for-effect-target-target-element\u2468"}],"title":"5.12. The EffectCallback callback function"},{"refs":[{"id":"ref-for-effect-target-target-element\u2460\u24ea"}],"title":"5.13. The Animatable interface"}],"url":"https://drafts.csswg.org/web-animations-1/#effect-target-target-element"}, "757fa639": {"dfnID":"757fa639","dfnText":"KeyframeEffectOptions","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-keyframeeffectoptions"}],"title":"5.10. The KeyframeEffect interfaces"},{"refs":[{"id":"ref-for-dictdef-keyframeeffectoptions\u2460"},{"id":"ref-for-dictdef-keyframeeffectoptions\u2461"}],"title":"5.10.3. The KeyframeEffectOptions dictionary"}],"url":"https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions"}, "797018a7": {"dfnID":"797018a7","dfnText":"InvalidStateError","external":true,"refSections":[{"refs":[{"id":"ref-for-invalidstateerror"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-invalidstateerror\u2460"},{"id":"ref-for-invalidstateerror\u2461"}],"title":"3.3.8. Pausing an animation"}],"url":"https://webidl.spec.whatwg.org/#invalidstateerror"}, "7cb80605": {"dfnID":"7cb80605","dfnText":"in effect","external":true,"refSections":[{"refs":[{"id":"ref-for-in-effect"},{"id":"ref-for-in-effect\u2460"},{"id":"ref-for-in-effect\u2461"},{"id":"ref-for-in-effect\u2462"},{"id":"ref-for-in-effect\u2463"},{"id":"ref-for-in-effect\u2464"}],"title":"4.5.1. Sampling custom effects"},{"refs":[{"id":"ref-for-in-effect\u2465"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"https://drafts.csswg.org/web-animations-1/#in-effect"}, "7d9dff52": {"dfnID":"7d9dff52","dfnText":"timing function","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function"}],"title":"3.4.5. Fill modes"},{"refs":[{"id":"ref-for-easing-function\u2460"}],"title":"3.8. Time transformations"},{"refs":[{"id":"ref-for-easing-function\u2461"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-easing-function\u2462"},{"id":"ref-for-easing-function\u2463"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/css-easing-2/#easing-function"}, "820503c1": {"dfnID":"820503c1","dfnText":"target property","external":true,"refSections":[{"refs":[{"id":"ref-for-target-property"}],"title":"4.2.1. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-target-property\u2460"}],"title":"4.5.2. Execution order of custom effects"}],"url":"https://drafts.csswg.org/web-animations-1/#target-property"}, "83998ca7": {"dfnID":"83998ca7","dfnText":"playback direction","external":true,"refSections":[{"refs":[{"id":"ref-for-playback-direction"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-playback-direction\u2460"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-playback-direction\u2461"},{"id":"ref-for-playback-direction\u2462"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#playback-direction"}, "854f4b65": {"dfnID":"854f4b65","dfnText":"time value","external":true,"refSections":[{"refs":[{"id":"ref-for-time-value\u2460"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-time-value\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-time-value\u2462"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-time-value\u2463"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-time-value\u2464"},{"id":"ref-for-time-value\u2465"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-time-value\u2466"},{"id":"ref-for-time-value\u2467"},{"id":"ref-for-time-value\u2468"},{"id":"ref-for-time-value\u2460\u24ea"},{"id":"ref-for-time-value\u2460\u2460"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-time-value\u2460\u2461"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#time-value"}, "85b4884b": {"dfnID":"85b4884b","dfnText":"after phase","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-effect-after-phase"},{"id":"ref-for-animation-effect-after-phase\u2460"},{"id":"ref-for-animation-effect-after-phase\u2461"}],"title":"3.4.5. Fill modes"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2462"},{"id":"ref-for-animation-effect-after-phase\u2463"},{"id":"ref-for-animation-effect-after-phase\u2464"}],"title":"3.7.3.1. Calculating the active time"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase"}, "8603b31a": {"dfnID":"8603b31a","dfnText":"perform a microtask checkpoint","external":true,"refSections":[{"refs":[{"id":"ref-for-perform-a-microtask-checkpoint"}],"title":"3.3.7. Playing an animation"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint"}, "86fe716f": {"dfnID":"86fe716f","dfnText":"active-after boundary time","external":true,"refSections":[{"refs":[{"id":"ref-for-active-after-boundary-time"},{"id":"ref-for-active-after-boundary-time\u2460"},{"id":"ref-for-active-after-boundary-time\u2461"},{"id":"ref-for-active-after-boundary-time\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"}],"url":"https://drafts.csswg.org/web-animations-1/#active-after-boundary-time"}, "8793fcec": {"dfnID":"8793fcec","dfnText":"iterations","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-iterations"},{"id":"ref-for-dom-effecttiming-iterations\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterations"}, "87cf96cd": {"dfnID":"87cf96cd","dfnText":"source","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-source-source"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source"}, "8855a9aa": {"dfnID":"8855a9aa","dfnText":"DOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-DOMString"},{"id":"ref-for-idl-DOMString\u2460"},{"id":"ref-for-idl-DOMString\u2461"},{"id":"ref-for-idl-DOMString\u2462"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-idl-DOMString\u2463"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-idl-DOMString\u2464"},{"id":"ref-for-idl-DOMString\u2465"}],"title":"5.10.2. Modification to the *Keyframe dictionaries"},{"refs":[{"id":"ref-for-idl-DOMString\u2466"},{"id":"ref-for-idl-DOMString\u2467"},{"id":"ref-for-idl-DOMString\u2468"},{"id":"ref-for-idl-DOMString\u2460\u24ea"}],"title":"5.14. The Animatable interface mixin"},{"refs":[{"id":"ref-for-idl-DOMString\u2460\u2460"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://webidl.spec.whatwg.org/#idl-DOMString"}, "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-Exposed\u2460"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-Exposed\u2461"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-Exposed\u2462"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-Exposed\u2463"}],"title":"5.8. The AnimationNodeList interface"},{"refs":[{"id":"ref-for-Exposed\u2464"}],"title":"5.9. The SequenceEffect interfaces"},{"refs":[{"id":"ref-for-Exposed\u2465"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "8a8c473c": {"dfnID":"8a8c473c","dfnText":"Animation()","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-animation-animation"}],"title":"5.1. The AnimationTimeline interface"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-animation-animation"}, "8aeebb4b": {"dfnID":"8aeebb4b","dfnText":"html-processing-model-event-loops","external":true,"refSections":[{"refs":[{"id":"ref-for-html-processing-model-event-loops"}],"title":"3.3.3. Waiting for the associated effect"}],"url":"https://drafts.csswg.org/scroll-animations-1/#html-processing-model-event-loops"}, "8baec6ed": {"dfnID":"8baec6ed","dfnText":"timeline","external":true,"refSections":[{"refs":[{"id":"ref-for-timeline"},{"id":"ref-for-timeline\u2460"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-timeline\u2461"},{"id":"ref-for-timeline\u2462"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-timeline\u2463"},{"id":"ref-for-timeline\u2464"},{"id":"ref-for-timeline\u2465"},{"id":"ref-for-timeline\u2466"},{"id":"ref-for-timeline\u2467"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-timeline\u2468"},{"id":"ref-for-timeline\u2460\u24ea"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-timeline\u2460\u2460"},{"id":"ref-for-timeline\u2460\u2461"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-timeline\u2460\u2462"},{"id":"ref-for-timeline\u2460\u2463"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-timeline\u2460\u2464"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-timeline\u2460\u2465"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-timeline\u2460\u2466"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#timeline"}, "8c800cdf": {"dfnID":"8c800cdf","dfnText":"double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-double"},{"id":"ref-for-idl-double\u2460"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-idl-double\u2461"},{"id":"ref-for-idl-double\u2462"},{"id":"ref-for-idl-double\u2463"},{"id":"ref-for-idl-double\u2464"},{"id":"ref-for-idl-double\u2465"},{"id":"ref-for-idl-double\u2466"},{"id":"ref-for-idl-double\u2467"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-idl-double\u2468"}],"title":"5.12. The EffectCallback callback function"}],"url":"https://webidl.spec.whatwg.org/#idl-double"}, "8edc639c": {"dfnID":"8edc639c","dfnText":"KeyframeAnimationOptions","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-keyframeanimationoptions"},{"id":"ref-for-dictdef-keyframeanimationoptions\u2460"},{"id":"ref-for-dictdef-keyframeanimationoptions\u2461"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions"}, "8f8e9b1e": {"dfnID":"8f8e9b1e","dfnText":"current iteration","external":true,"refSections":[{"refs":[{"id":"ref-for-current-iteration"}],"title":"4.5. Custom effects"},{"refs":[{"id":"ref-for-current-iteration\u2460"}],"title":"4.5.1. Sampling custom effects"},{"refs":[{"id":"ref-for-current-iteration\u2461"}],"title":"5.11. The IterationCompositeOperation enumeration"}],"url":"https://drafts.csswg.org/web-animations-1/#current-iteration"}, "8fb03ed8": {"dfnID":"8fb03ed8","dfnText":"value","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-csskeywordvalue-value"},{"id":"ref-for-dom-csskeywordvalue-value\u2460"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#dom-csskeywordvalue-value"}, "9b8452ef": {"dfnID":"9b8452ef","dfnText":"iteration duration","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-duration"}],"title":"3.2. Timelines"},{"refs":[{"id":"ref-for-iteration-duration\u2460"},{"id":"ref-for-iteration-duration\u2461"},{"id":"ref-for-iteration-duration\u2462"},{"id":"ref-for-iteration-duration\u2463"},{"id":"ref-for-iteration-duration\u2464"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-iteration-duration\u2465"},{"id":"ref-for-iteration-duration\u2466"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-iteration-duration\u2467"},{"id":"ref-for-iteration-duration\u2468"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u24ea"},{"id":"ref-for-iteration-duration\u2460\u2460"}],"title":"3.7.2. Calculating the active duration"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2461"},{"id":"ref-for-iteration-duration\u2460\u2462"}],"title":"3.7.3.2. Calculating the overall progress"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2463"},{"id":"ref-for-iteration-duration\u2460\u2464"}],"title":"3.8.2. Calculating the transformed time"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2465"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2466"},{"id":"ref-for-iteration-duration\u2460\u2467"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2468"}],"title":"5.5. Updating the timing of an\nAnimationEffect"},{"refs":[{"id":"ref-for-iteration-duration\u2461\u24ea"}],"title":"5.7. The GroupEffect interface"}],"url":"https://drafts.csswg.org/web-animations-1/#iteration-duration"}, "9c9f2bfc": {"dfnID":"9c9f2bfc","dfnText":"effective playback rate","external":true,"refSections":[{"refs":[{"id":"ref-for-effective-playback-rate"},{"id":"ref-for-effective-playback-rate\u2460"},{"id":"ref-for-effective-playback-rate\u2461"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-effective-playback-rate\u2462"}],"title":"3.3.7.1. Auto-aligning the start time"}],"url":"https://drafts.csswg.org/web-animations-1/#effective-playback-rate"}, "9cce47fd": {"dfnID":"9cce47fd","dfnText":"sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-sequence"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-idl-sequence\u2460"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"https://webidl.spec.whatwg.org/#idl-sequence"}, "9da6489e": {"dfnID":"9da6489e","dfnText":"iterationStart","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-iterationstart"},{"id":"ref-for-dom-effecttiming-iterationstart\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterationstart"}, "a274817b": {"dfnID":"a274817b","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-direction"},{"id":"ref-for-dom-effecttiming-direction\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-direction"}, "a32ab8b8": {"dfnID":"a32ab8b8","dfnText":"active phase","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-effect-active-phase"},{"id":"ref-for-animation-effect-active-phase\u2460"},{"id":"ref-for-animation-effect-active-phase\u2461"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation-effect-active-phase\u2462"},{"id":"ref-for-animation-effect-active-phase\u2463"}],"title":"3.4.5. Fill modes"},{"refs":[{"id":"ref-for-animation-effect-active-phase\u2464"}],"title":"3.7.3.1. Calculating the active time"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase"}, "a4fb436f": {"dfnID":"a4fb436f","dfnText":"resolve a promise","external":true,"refSections":[{"refs":[{"id":"ref-for-resolve"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-resolve\u2460"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-resolve\u2461"}],"title":"3.3.7. Playing an animation"}],"url":"https://webidl.spec.whatwg.org/#resolve"}, "a5b996d7": {"dfnID":"a5b996d7","dfnText":"fill mode","external":true,"refSections":[{"refs":[{"id":"ref-for-fill-mode"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-fill-mode\u2460"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-fill-mode\u2461"},{"id":"ref-for-fill-mode\u2462"},{"id":"ref-for-fill-mode\u2463"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-fill-mode\u2464"},{"id":"ref-for-fill-mode\u2465"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#fill-mode"}, "active-duration": {"dfnID":"active-duration","dfnText":"active duration","external":false,"refSections":[{"refs":[{"id":"ref-for-active-duration"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-active-duration\u2460"},{"id":"ref-for-active-duration\u2461"},{"id":"ref-for-active-duration\u2462"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-active-duration\u2463"},{"id":"ref-for-active-duration\u2464"},{"id":"ref-for-active-duration\u2465"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-active-duration\u2466"}],"title":"3.7.2. Calculating the active duration"},{"refs":[{"id":"ref-for-active-duration\u2467"}],"title":"3.7.3.2. Calculating the overall progress"},{"refs":[{"id":"ref-for-active-duration\u2468"},{"id":"ref-for-active-duration\u2460\u24ea"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-active-duration\u2460\u2460"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#active-duration"}, "ae582220": {"dfnID":"ae582220","dfnText":"update the timing properties of an animation effect","external":true,"refSections":[{"refs":[{"id":"ref-for-update-the-timing-properties-of-an-animation-effect"}],"title":"5.7. The GroupEffect interface"}],"url":"https://drafts.csswg.org/web-animations-1/#update-the-timing-properties-of-an-animation-effect"}, "ancestor": {"dfnID":"ancestor","dfnText":"\nancestor","external":false,"refSections":[{"refs":[{"id":"ref-for-ancestor"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-ancestor\u2460"},{"id":"ref-for-ancestor\u2461"},{"id":"ref-for-ancestor\u2462"}],"title":"3.4.5. Fill modes"}],"url":"#ancestor"}, "animation-auto-aligned-start-time": {"dfnID":"animation-auto-aligned-start-time","dfnText":"auto-aligned start\ntime","external":false,"refSections":[],"url":"#animation-auto-aligned-start-time"}, "animation-calculating-an-auto-aligned-start-time": {"dfnID":"animation-calculating-an-auto-aligned-start-time","dfnText":"calculating an auto-aligned start time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-calculating-an-auto-aligned-start-time"}],"title":"3.3.8. Pausing an animation"}],"url":"#animation-calculating-an-auto-aligned-start-time"}, "animation-effect-playback-rate": {"dfnID":"animation-effect-playback-rate","dfnText":"playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-playback-rate"}],"title":"2. Changes since level 1"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2460"},{"id":"ref-for-animation-effect-playback-rate\u2461"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2462"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2463"},{"id":"ref-for-animation-effect-playback-rate\u2464"},{"id":"ref-for-animation-effect-playback-rate\u2465"},{"id":"ref-for-animation-effect-playback-rate\u2466"},{"id":"ref-for-animation-effect-playback-rate\u2467"},{"id":"ref-for-animation-effect-playback-rate\u2468"},{"id":"ref-for-animation-effect-playback-rate\u2460\u24ea"},{"id":"ref-for-animation-effect-playback-rate\u2460\u2460"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2460\u2461"},{"id":"ref-for-animation-effect-playback-rate\u2460\u2462"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2460\u2463"}],"title":"3.3.10. Speed control"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2460\u2464"},{"id":"ref-for-animation-effect-playback-rate\u2460\u2465"},{"id":"ref-for-animation-effect-playback-rate\u2460\u2466"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2460\u2467"},{"id":"ref-for-animation-effect-playback-rate\u2460\u2468"},{"id":"ref-for-animation-effect-playback-rate\u2461\u24ea"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2460"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2461"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2462"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2463"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2464"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2465"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2466"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2467"},{"id":"ref-for-animation-effect-playback-rate\u2461\u2468"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2462\u24ea"},{"id":"ref-for-animation-effect-playback-rate\u2462\u2460"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2462\u2461"},{"id":"ref-for-animation-effect-playback-rate\u2462\u2462"}],"title":"3.7.2. Calculating the active duration"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2462\u2463"},{"id":"ref-for-animation-effect-playback-rate\u2462\u2464"},{"id":"ref-for-animation-effect-playback-rate\u2462\u2465"},{"id":"ref-for-animation-effect-playback-rate\u2462\u2466"}],"title":"3.7.3.2. Calculating the overall progress"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2462\u2467"}],"title":"3.8.1. Calculating the transformed progress"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2462\u2468"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-animation-effect-playback-rate\u2463\u24ea"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#animation-effect-playback-rate"}, "animation-effect-start-time": {"dfnID":"animation-effect-start-time","dfnText":"start time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-start-time"},{"id":"ref-for-animation-effect-start-time\u2460"},{"id":"ref-for-animation-effect-start-time\u2461"},{"id":"ref-for-animation-effect-start-time\u2462"},{"id":"ref-for-animation-effect-start-time\u2463"},{"id":"ref-for-animation-effect-start-time\u2464"},{"id":"ref-for-animation-effect-start-time\u2465"},{"id":"ref-for-animation-effect-start-time\u2466"},{"id":"ref-for-animation-effect-start-time\u2467"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2468"},{"id":"ref-for-animation-effect-start-time\u2460\u24ea"},{"id":"ref-for-animation-effect-start-time\u2460\u2460"},{"id":"ref-for-animation-effect-start-time\u2460\u2461"},{"id":"ref-for-animation-effect-start-time\u2460\u2462"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2460\u2463"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2460\u2464"}],"title":"3.9.2. The start time of\n children of a group effect"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2460\u2465"}],"title":"3.9.4. Sequence effects"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2460\u2466"},{"id":"ref-for-animation-effect-start-time\u2460\u2467"},{"id":"ref-for-animation-effect-start-time\u2460\u2468"},{"id":"ref-for-animation-effect-start-time\u2461\u24ea"},{"id":"ref-for-animation-effect-start-time\u2461\u2460"},{"id":"ref-for-animation-effect-start-time\u2461\u2461"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2461\u2462"}],"title":"3.9.4.2. The intrinsic\n iteration duration of a sequence effect"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2461\u2463"},{"id":"ref-for-animation-effect-start-time\u2461\u2464"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-animation-effect-start-time\u2461\u2465"},{"id":"ref-for-animation-effect-start-time\u2461\u2466"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#animation-effect-start-time"}, "animation-overallprogress": {"dfnID":"animation-overallprogress","dfnText":"overallProgress","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-overallprogress"},{"id":"ref-for-animation-overallprogress\u2460"},{"id":"ref-for-animation-overallprogress\u2461"},{"id":"ref-for-animation-overallprogress\u2462"},{"id":"ref-for-animation-overallprogress\u2463"},{"id":"ref-for-animation-overallprogress\u2464"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-animation-overallprogress\u2465"}],"title":"5.2. The Animation interface"}],"url":"#animation-overallprogress"}, "animation-set-the-timeline-of-an-animation": {"dfnID":"animation-set-the-timeline-of-an-animation","dfnText":"set the timeline of an animation","external":false,"refSections":[],"url":"#animation-set-the-timeline-of-an-animation"}, "animationnodelist": {"dfnID":"animationnodelist","dfnText":"AnimationNodeList","external":false,"refSections":[{"refs":[{"id":"ref-for-animationnodelist"},{"id":"ref-for-animationnodelist\u2460"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-animationnodelist\u2461"}],"title":"5.8. The AnimationNodeList interface"}],"url":"#animationnodelist"}, "animationplaybackevent": {"dfnID":"animationplaybackevent","dfnText":"AnimationPlaybackEvent","external":false,"refSections":[],"url":"#animationplaybackevent"}, "associated-with-an-animation": {"dfnID":"associated-with-an-animation","dfnText":"associated with an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-associated-with-an-animation"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-associated-with-an-animation\u2460"}],"title":"4.3.1. The effect stack"},{"refs":[{"id":"ref-for-associated-with-an-animation\u2461"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#associated-with-an-animation"}, "at-progress-timeline-boundary": {"dfnID":"at-progress-timeline-boundary","dfnText":"at progress timeline boundary","external":false,"refSections":[{"refs":[{"id":"ref-for-at-progress-timeline-boundary"},{"id":"ref-for-at-progress-timeline-boundary\u2460"}],"title":"3.4.4. Animation effect phases and\nstates"}],"url":"#at-progress-timeline-boundary"}, "b0425d4a": {"dfnID":"b0425d4a","dfnText":"unresolved","external":true,"refSections":[{"refs":[{"id":"ref-for-unresolved"},{"id":"ref-for-unresolved\u2460"},{"id":"ref-for-unresolved\u2461"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-unresolved\u2462"},{"id":"ref-for-unresolved\u2463"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-unresolved\u2464"},{"id":"ref-for-unresolved\u2465"},{"id":"ref-for-unresolved\u2466"},{"id":"ref-for-unresolved\u2467"},{"id":"ref-for-unresolved\u2468"},{"id":"ref-for-unresolved\u2460\u24ea"},{"id":"ref-for-unresolved\u2460\u2460"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-unresolved\u2460\u2461"},{"id":"ref-for-unresolved\u2460\u2462"},{"id":"ref-for-unresolved\u2460\u2463"},{"id":"ref-for-unresolved\u2460\u2464"},{"id":"ref-for-unresolved\u2460\u2465"},{"id":"ref-for-unresolved\u2460\u2466"},{"id":"ref-for-unresolved\u2460\u2467"},{"id":"ref-for-unresolved\u2460\u2468"},{"id":"ref-for-unresolved\u2461\u24ea"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-unresolved\u2461\u2460"},{"id":"ref-for-unresolved\u2461\u2461"},{"id":"ref-for-unresolved\u2461\u2462"},{"id":"ref-for-unresolved\u2461\u2463"},{"id":"ref-for-unresolved\u2461\u2464"},{"id":"ref-for-unresolved\u2461\u2465"},{"id":"ref-for-unresolved\u2461\u2466"},{"id":"ref-for-unresolved\u2461\u2467"},{"id":"ref-for-unresolved\u2461\u2468"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-unresolved\u2462\u24ea"},{"id":"ref-for-unresolved\u2462\u2460"},{"id":"ref-for-unresolved\u2462\u2461"},{"id":"ref-for-unresolved\u2462\u2462"},{"id":"ref-for-unresolved\u2462\u2463"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-unresolved\u2462\u2464"}],"title":"3.3.9. Canceling an animation"},{"refs":[{"id":"ref-for-unresolved\u2462\u2465"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-unresolved\u2462\u2466"},{"id":"ref-for-unresolved\u2462\u2467"},{"id":"ref-for-unresolved\u2462\u2468"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-unresolved\u2463\u24ea"},{"id":"ref-for-unresolved\u2463\u2460"},{"id":"ref-for-unresolved\u2463\u2461"},{"id":"ref-for-unresolved\u2463\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-unresolved\u2463\u2463"},{"id":"ref-for-unresolved\u2463\u2464"},{"id":"ref-for-unresolved\u2463\u2465"},{"id":"ref-for-unresolved\u2463\u2466"},{"id":"ref-for-unresolved\u2463\u2467"},{"id":"ref-for-unresolved\u2463\u2468"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-unresolved\u2464\u24ea"},{"id":"ref-for-unresolved\u2464\u2460"}],"title":"3.8.2. Calculating the transformed time"},{"refs":[{"id":"ref-for-unresolved\u2464\u2461"},{"id":"ref-for-unresolved\u2464\u2462"}],"title":"4.5.1. Sampling custom effects"}],"url":"https://drafts.csswg.org/web-animations-1/#unresolved"}, "b0bd955b": {"dfnID":"b0bd955b","dfnText":"animation-range-start","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-range-start"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start"}, "b4cfa5ce": {"dfnID":"b4cfa5ce","dfnText":"throw","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-throw"},{"id":"ref-for-dfn-throw\u2460"}],"title":"3.3.4. Validating a CSSNumberish time"},{"refs":[{"id":"ref-for-dfn-throw\u2461"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-dfn-throw\u2462"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2463"},{"id":"ref-for-dfn-throw\u2464"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2465"},{"id":"ref-for-dfn-throw\u2466"},{"id":"ref-for-dfn-throw\u2467"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dfn-throw\u2468"},{"id":"ref-for-dfn-throw\u2460\u24ea"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-dfn-throw\u2460\u2460"}],"title":"5.10. The KeyframeEffect interfaces"},{"refs":[{"id":"ref-for-dfn-throw\u2460\u2461"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://webidl.spec.whatwg.org/#dfn-throw"}, "b516749f": {"dfnID":"b516749f","dfnText":"Animation","external":true,"refSections":[{"refs":[{"id":"ref-for-animation"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-animation\u2460"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-animation\u2461"}],"title":"3.3.11. Calculating the overall progress of an animation"},{"refs":[{"id":"ref-for-animation\u2462"},{"id":"ref-for-animation\u2463"},{"id":"ref-for-animation\u2464"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-animation\u2465"},{"id":"ref-for-animation\u2466"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-animation\u2467"},{"id":"ref-for-animation\u2468"},{"id":"ref-for-animation\u2460\u24ea"},{"id":"ref-for-animation\u2460\u2460"},{"id":"ref-for-animation\u2460\u2461"},{"id":"ref-for-animation\u2460\u2462"},{"id":"ref-for-animation\u2460\u2463"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation\u2460\u2464"},{"id":"ref-for-animation\u2460\u2465"},{"id":"ref-for-animation\u2460\u2466"},{"id":"ref-for-animation\u2460\u2467"},{"id":"ref-for-animation\u2460\u2468"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-animation\u2461\u24ea"},{"id":"ref-for-animation\u2461\u2460"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-animation\u2461\u2461"}],"title":"4.1.1. Not animatable"},{"refs":[{"id":"ref-for-animation\u2461\u2462"}],"title":"4.3.1. The effect stack"},{"refs":[{"id":"ref-for-animation\u2461\u2463"},{"id":"ref-for-animation\u2461\u2464"},{"id":"ref-for-animation\u2461\u2465"},{"id":"ref-for-animation\u2461\u2466"},{"id":"ref-for-animation\u2461\u2467"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-animation\u2461\u2468"},{"id":"ref-for-animation\u2462\u24ea"},{"id":"ref-for-animation\u2462\u2460"},{"id":"ref-for-animation\u2462\u2461"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-animation\u2462\u2462"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-animation\u2462\u2463"},{"id":"ref-for-animation\u2462\u2464"}],"title":"5.7.2. Definitions for manipulating hierarchies"},{"refs":[{"id":"ref-for-animation\u2462\u2465"},{"id":"ref-for-animation\u2462\u2466"}],"title":"5.12. The EffectCallback callback function"},{"refs":[{"id":"ref-for-animation\u2462\u2467"},{"id":"ref-for-animation\u2462\u2468"}],"title":"5.13. The Animatable interface"},{"refs":[{"id":"ref-for-animation\u2463\u24ea"},{"id":"ref-for-animation\u2463\u2460"}],"title":"5.14. The Animatable interface mixin"},{"refs":[{"id":"ref-for-animation\u2463\u2461"},{"id":"ref-for-animation\u2463\u2462"},{"id":"ref-for-animation\u2463\u2463"},{"id":"ref-for-animation\u2463\u2464"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.csswg.org/web-animations-1/#animation"}, "b90caf9a": {"dfnID":"b90caf9a","dfnText":"update animations and send events","external":true,"refSections":[{"refs":[{"id":"ref-for-update-animations-and-send-events"}],"title":"4.5. Custom effects"},{"refs":[{"id":"ref-for-update-animations-and-send-events\u2460"}],"title":"4.5.1. Sampling custom effects"}],"url":"https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events"}, "b9ed110e": {"dfnID":"b9ed110e","dfnText":"active time","external":true,"refSections":[{"refs":[{"id":"ref-for-active-time"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-active-time\u2460"},{"id":"ref-for-active-time\u2461"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-active-time\u2462"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-active-time\u2463"},{"id":"ref-for-active-time\u2464"}],"title":"3.7.3.2. Calculating the overall progress"}],"url":"https://drafts.csswg.org/web-animations-1/#active-time"}, "bc87e84b": {"dfnID":"bc87e84b","dfnText":"before phase","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-effect-before-phase"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2460"},{"id":"ref-for-animation-effect-before-phase\u2461"},{"id":"ref-for-animation-effect-before-phase\u2462"}],"title":"3.4.5. Fill modes"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2463"},{"id":"ref-for-animation-effect-before-phase\u2464"},{"id":"ref-for-animation-effect-before-phase\u2465"}],"title":"3.7.3.1. Calculating the active time"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase"}, "bdd4e1fc": {"dfnID":"bdd4e1fc","dfnText":"animation effect","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-effect"}],"title":"2. Changes since level 1"},{"refs":[{"id":"ref-for-animation-effect\u2460"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-animation-effect\u2461"}],"title":"3.3.10. Speed control"},{"refs":[{"id":"ref-for-animation-effect\u2462"},{"id":"ref-for-animation-effect\u2463"},{"id":"ref-for-animation-effect\u2464"},{"id":"ref-for-animation-effect\u2465"},{"id":"ref-for-animation-effect\u2466"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-animation-effect\u2467"}],"title":"3.4.1. Types of animation effects"},{"refs":[{"id":"ref-for-animation-effect\u2468"},{"id":"ref-for-animation-effect\u2460\u24ea"},{"id":"ref-for-animation-effect\u2460\u2460"},{"id":"ref-for-animation-effect\u2460\u2461"},{"id":"ref-for-animation-effect\u2460\u2462"},{"id":"ref-for-animation-effect\u2460\u2463"},{"id":"ref-for-animation-effect\u2460\u2464"},{"id":"ref-for-animation-effect\u2460\u2465"},{"id":"ref-for-animation-effect\u2460\u2466"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2467"},{"id":"ref-for-animation-effect\u2460\u2468"},{"id":"ref-for-animation-effect\u2461\u24ea"},{"id":"ref-for-animation-effect\u2461\u2460"},{"id":"ref-for-animation-effect\u2461\u2461"},{"id":"ref-for-animation-effect\u2461\u2462"},{"id":"ref-for-animation-effect\u2461\u2463"},{"id":"ref-for-animation-effect\u2461\u2464"},{"id":"ref-for-animation-effect\u2461\u2465"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-animation-effect\u2461\u2466"},{"id":"ref-for-animation-effect\u2461\u2467"},{"id":"ref-for-animation-effect\u2461\u2468"},{"id":"ref-for-animation-effect\u2462\u24ea"},{"id":"ref-for-animation-effect\u2462\u2460"},{"id":"ref-for-animation-effect\u2462\u2461"},{"id":"ref-for-animation-effect\u2462\u2462"},{"id":"ref-for-animation-effect\u2462\u2463"},{"id":"ref-for-animation-effect\u2462\u2464"},{"id":"ref-for-animation-effect\u2462\u2465"},{"id":"ref-for-animation-effect\u2462\u2466"},{"id":"ref-for-animation-effect\u2462\u2467"},{"id":"ref-for-animation-effect\u2462\u2468"},{"id":"ref-for-animation-effect\u2463\u24ea"},{"id":"ref-for-animation-effect\u2463\u2460"},{"id":"ref-for-animation-effect\u2463\u2461"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-animation-effect\u2463\u2462"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-animation-effect\u2463\u2463"},{"id":"ref-for-animation-effect\u2463\u2464"},{"id":"ref-for-animation-effect\u2463\u2465"},{"id":"ref-for-animation-effect\u2463\u2466"},{"id":"ref-for-animation-effect\u2463\u2467"},{"id":"ref-for-animation-effect\u2463\u2468"},{"id":"ref-for-animation-effect\u2464\u24ea"},{"id":"ref-for-animation-effect\u2464\u2460"},{"id":"ref-for-animation-effect\u2464\u2461"},{"id":"ref-for-animation-effect\u2464\u2462"},{"id":"ref-for-animation-effect\u2464\u2463"},{"id":"ref-for-animation-effect\u2464\u2464"},{"id":"ref-for-animation-effect\u2464\u2465"},{"id":"ref-for-animation-effect\u2464\u2466"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-animation-effect\u2464\u2467"},{"id":"ref-for-animation-effect\u2464\u2468"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-animation-effect\u2465\u24ea"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2460"},{"id":"ref-for-animation-effect\u2465\u2461"},{"id":"ref-for-animation-effect\u2465\u2462"},{"id":"ref-for-animation-effect\u2465\u2463"},{"id":"ref-for-animation-effect\u2465\u2464"},{"id":"ref-for-animation-effect\u2465\u2465"},{"id":"ref-for-animation-effect\u2465\u2466"},{"id":"ref-for-animation-effect\u2465\u2467"},{"id":"ref-for-animation-effect\u2465\u2468"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-animation-effect\u2466\u24ea"},{"id":"ref-for-animation-effect\u2466\u2460"},{"id":"ref-for-animation-effect\u2466\u2461"},{"id":"ref-for-animation-effect\u2466\u2462"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2463"},{"id":"ref-for-animation-effect\u2466\u2464"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2465"},{"id":"ref-for-animation-effect\u2466\u2466"}],"title":"4.1.1. Not animatable"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2467"},{"id":"ref-for-animation-effect\u2466\u2468"},{"id":"ref-for-animation-effect\u2467\u24ea"},{"id":"ref-for-animation-effect\u2467\u2460"}],"title":"4.5. Custom effects"},{"refs":[{"id":"ref-for-animation-effect\u2467\u2461"},{"id":"ref-for-animation-effect\u2467\u2462"},{"id":"ref-for-animation-effect\u2467\u2463"},{"id":"ref-for-animation-effect\u2467\u2464"},{"id":"ref-for-animation-effect\u2467\u2465"}],"title":"4.5.1. Sampling custom effects"},{"refs":[{"id":"ref-for-animation-effect\u2467\u2466"},{"id":"ref-for-animation-effect\u2467\u2467"},{"id":"ref-for-animation-effect\u2467\u2468"},{"id":"ref-for-animation-effect\u2468\u24ea"}],"title":"4.5.2. Execution order of custom effects"},{"refs":[{"id":"ref-for-animation-effect\u2468\u2460"},{"id":"ref-for-animation-effect\u2468\u2461"},{"id":"ref-for-animation-effect\u2468\u2462"},{"id":"ref-for-animation-effect\u2468\u2463"},{"id":"ref-for-animation-effect\u2468\u2464"},{"id":"ref-for-animation-effect\u2468\u2465"},{"id":"ref-for-animation-effect\u2468\u2466"},{"id":"ref-for-animation-effect\u2468\u2467"},{"id":"ref-for-animation-effect\u2468\u2468"},{"id":"ref-for-animation-effect\u2460\u24ea\u24ea"},{"id":"ref-for-animation-effect\u2460\u24ea\u2460"},{"id":"ref-for-animation-effect\u2460\u24ea\u2461"},{"id":"ref-for-animation-effect\u2460\u24ea\u2462"},{"id":"ref-for-animation-effect\u2460\u24ea\u2463"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-animation-effect\u2460\u24ea\u2464"},{"id":"ref-for-animation-effect\u2460\u24ea\u2465"},{"id":"ref-for-animation-effect\u2460\u24ea\u2466"},{"id":"ref-for-animation-effect\u2460\u24ea\u2467"},{"id":"ref-for-animation-effect\u2460\u24ea\u2468"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2460\u24ea"},{"id":"ref-for-animation-effect\u2460\u2460\u2460"},{"id":"ref-for-animation-effect\u2460\u2460\u2461"},{"id":"ref-for-animation-effect\u2460\u2460\u2462"},{"id":"ref-for-animation-effect\u2460\u2460\u2463"},{"id":"ref-for-animation-effect\u2460\u2460\u2464"}],"title":"5.6. The\n ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2460\u2465"},{"id":"ref-for-animation-effect\u2460\u2460\u2466"},{"id":"ref-for-animation-effect\u2460\u2460\u2467"},{"id":"ref-for-animation-effect\u2460\u2460\u2468"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461\u24ea"}],"title":"5.7.1. Processing a timing argument"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461\u2460"},{"id":"ref-for-animation-effect\u2460\u2461\u2461"}],"title":"5.7.2. Definitions for manipulating hierarchies"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461\u2462"},{"id":"ref-for-animation-effect\u2460\u2461\u2463"},{"id":"ref-for-animation-effect\u2460\u2461\u2464"}],"title":"5.8. The AnimationNodeList interface"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461\u2465"}],"title":"5.10. The KeyframeEffect interfaces"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461\u2466"}],"title":"5.10.1. Creating a new KeyframeEffect object"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461\u2467"},{"id":"ref-for-animation-effect\u2460\u2461\u2468"}],"title":"5.11. The IterationCompositeOperation enumeration"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2462\u24ea"}],"title":"5.13. The Animatable interface"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-effect"}, "c2cf7c95": {"dfnID":"c2cf7c95","dfnText":"before flag","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function-before-flag"}],"title":"3.8.1. Calculating the transformed progress"}],"url":"https://drafts.csswg.org/css-easing-2/#easing-function-before-flag"}, "c35d7b6e": {"dfnID":"c35d7b6e","dfnText":"transformed progress","external":true,"refSections":[{"refs":[{"id":"ref-for-transformed-progress"},{"id":"ref-for-transformed-progress\u2460"},{"id":"ref-for-transformed-progress\u2461"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-transformed-progress\u2462"},{"id":"ref-for-transformed-progress\u2463"},{"id":"ref-for-transformed-progress\u2464"}],"title":"3.8.2. Calculating the transformed time"}],"url":"https://drafts.csswg.org/web-animations-1/#transformed-progress"}, "c5c89fde": {"dfnID":"c5c89fde","dfnText":"<keyframe-selector>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-keyframe-selector"},{"id":"ref-for-typedef-keyframe-selector\u2460"}],"title":"5.10.2. Modification to the *Keyframe dictionaries"}],"url":"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-selector"}, "c6d180e8": {"dfnID":"c6d180e8","dfnText":"directed progress","external":true,"refSections":[{"refs":[{"id":"ref-for-directed-progress"},{"id":"ref-for-directed-progress\u2460"}],"title":"3.7.1. Overview"}],"url":"https://drafts.csswg.org/web-animations-1/#directed-progress"}, "ca02e7d7": {"dfnID":"ca02e7d7","dfnText":"end delay","external":true,"refSections":[{"refs":[{"id":"ref-for-end-delay"},{"id":"ref-for-end-delay\u2460"},{"id":"ref-for-end-delay\u2461"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-end-delay\u2462"},{"id":"ref-for-end-delay\u2463"},{"id":"ref-for-end-delay\u2464"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-end-delay\u2465"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-end-delay\u2466"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-end-delay\u2467"}],"title":"5.5. Updating the timing of an\nAnimationEffect"},{"refs":[{"id":"ref-for-end-delay\u2468"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"https://drafts.csswg.org/web-animations-1/#end-delay"}, "callbackdef-effectcallback": {"dfnID":"callbackdef-effectcallback","dfnText":"EffectCallback","external":false,"refSections":[{"refs":[{"id":"ref-for-callbackdef-effectcallback"},{"id":"ref-for-callbackdef-effectcallback\u2460"}],"title":"5.12. The EffectCallback callback function"},{"refs":[{"id":"ref-for-callbackdef-effectcallback\u2461"}],"title":"5.16. Model liveness"}],"url":"#callbackdef-effectcallback"}, "cec2c2b7": {"dfnID":"cec2c2b7","dfnText":"animation direction","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-direction"},{"id":"ref-for-animation-direction\u2460"},{"id":"ref-for-animation-direction\u2461"},{"id":"ref-for-animation-direction\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-direction"}, "child-effect": {"dfnID":"child-effect","dfnText":"child effects","external":false,"refSections":[{"refs":[{"id":"ref-for-child-effect"},{"id":"ref-for-child-effect\u2460"},{"id":"ref-for-child-effect\u2461"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-child-effect\u2462"}],"title":"3.9.2. The start time of\n children of a group effect"},{"refs":[{"id":"ref-for-child-effect\u2463"},{"id":"ref-for-child-effect\u2464"},{"id":"ref-for-child-effect\u2465"},{"id":"ref-for-child-effect\u2466"}],"title":"3.9.3. The intrinsic\n iteration duration of a group effect"},{"refs":[{"id":"ref-for-child-effect\u2467"},{"id":"ref-for-child-effect\u2468"}],"title":"3.9.4. Sequence effects"},{"refs":[{"id":"ref-for-child-effect\u2460\u24ea"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-child-effect\u2460\u2460"},{"id":"ref-for-child-effect\u2460\u2461"}],"title":"3.9.4.2. The intrinsic\n iteration duration of a sequence effect"},{"refs":[{"id":"ref-for-child-effect\u2460\u2462"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-child-effect\u2460\u2463"},{"id":"ref-for-child-effect\u2460\u2464"},{"id":"ref-for-child-effect\u2460\u2465"}],"title":"5.7.2. Definitions for manipulating hierarchies"}],"url":"#child-effect"}, "current": {"dfnID":"current","dfnText":"current","external":false,"refSections":[{"refs":[{"id":"ref-for-current"},{"id":"ref-for-current\u2460"}],"title":"3.4.4. Animation effect phases and\nstates"}],"url":"#current"}, "custom-effect": {"dfnID":"custom-effect","dfnText":"custom effect","external":false,"refSections":[{"refs":[{"id":"ref-for-custom-effect"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-custom-effect\u2460"},{"id":"ref-for-custom-effect\u2461"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-custom-effect\u2462"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-custom-effect\u2463"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-custom-effect\u2464"}],"title":"3.3.8. Pausing an animation"},{"refs":[{"id":"ref-for-custom-effect\u2465"}],"title":"3.3.9. Canceling an animation"},{"refs":[{"id":"ref-for-custom-effect\u2466"},{"id":"ref-for-custom-effect\u2467"}],"title":"4.5. Custom effects"},{"refs":[{"id":"ref-for-custom-effect\u2468"},{"id":"ref-for-custom-effect\u2460\u24ea"},{"id":"ref-for-custom-effect\u2460\u2460"}],"title":"4.5.1. Sampling custom effects"},{"refs":[{"id":"ref-for-custom-effect\u2460\u2461"},{"id":"ref-for-custom-effect\u2460\u2462"},{"id":"ref-for-custom-effect\u2460\u2463"}],"title":"4.5.2. Execution order of custom effects"},{"refs":[{"id":"ref-for-custom-effect\u2460\u2464"}],"title":"5.12. The EffectCallback callback function"}],"url":"#custom-effect"}, "d1f18b95": {"dfnID":"d1f18b95","dfnText":"before-active boundary time","external":true,"refSections":[{"refs":[{"id":"ref-for-before-active-boundary-time"},{"id":"ref-for-before-active-boundary-time\u2460"},{"id":"ref-for-before-active-boundary-time\u2461"},{"id":"ref-for-before-active-boundary-time\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"}],"url":"https://drafts.csswg.org/web-animations-1/#before-active-boundary-time"}, "d3902c40": {"dfnID":"d3902c40","dfnText":"pause an animation","external":true,"refSections":[{"refs":[{"id":"ref-for-pause-an-animation"},{"id":"ref-for-pause-an-animation\u2460"}],"title":"3.3.8. Pausing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#pause-an-animation"}, "d69cafc9": {"dfnID":"d69cafc9","dfnText":"active interval","external":true,"refSections":[{"refs":[{"id":"ref-for-active-interval"},{"id":"ref-for-active-interval\u2460"},{"id":"ref-for-active-interval\u2461"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-active-interval\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-active-interval\u2463"},{"id":"ref-for-active-interval\u2464"},{"id":"ref-for-active-interval\u2465"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-active-interval\u2466"},{"id":"ref-for-active-interval\u2467"},{"id":"ref-for-active-interval\u2468"},{"id":"ref-for-active-interval\u2460\u24ea"},{"id":"ref-for-active-interval\u2460\u2460"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-active-interval\u2460\u2461"}],"title":"3.9.3. The intrinsic\n iteration duration of a group effect"},{"refs":[{"id":"ref-for-active-interval\u2460\u2462"},{"id":"ref-for-active-interval\u2460\u2463"},{"id":"ref-for-active-interval\u2460\u2464"},{"id":"ref-for-active-interval\u2460\u2465"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-active-interval\u2460\u2466"},{"id":"ref-for-active-interval\u2460\u2467"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-active-interval\u2460\u2468"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"https://drafts.csswg.org/web-animations-1/#active-interval"}, "dacde8b5": {"dfnID":"dacde8b5","dfnText":"a new promise","external":true,"refSections":[{"refs":[{"id":"ref-for-a-new-promise"}],"title":"3.3.7. Playing an animation"}],"url":"https://webidl.spec.whatwg.org/#a-new-promise"}, "dca2de17": {"dfnID":"dca2de17","dfnText":"DOMException","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-DOMException"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-idl-DOMException\u2460"},{"id":"ref-for-idl-DOMException\u2461"}],"title":"3.3.8. Pausing an animation"}],"url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, "dd130a0f": {"dfnID":"dd130a0f","dfnText":"AnimationEffect","external":true,"refSections":[{"refs":[{"id":"ref-for-animationeffect"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-animationeffect\u2460"},{"id":"ref-for-animationeffect\u2461"},{"id":"ref-for-animationeffect\u2462"},{"id":"ref-for-animationeffect\u2463"},{"id":"ref-for-animationeffect\u2464"},{"id":"ref-for-animationeffect\u2465"},{"id":"ref-for-animationeffect\u2466"},{"id":"ref-for-animationeffect\u2467"},{"id":"ref-for-animationeffect\u2468"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-animationeffect\u2460\u24ea"},{"id":"ref-for-animationeffect\u2460\u2460"},{"id":"ref-for-animationeffect\u2460\u2461"},{"id":"ref-for-animationeffect\u2460\u2462"},{"id":"ref-for-animationeffect\u2460\u2463"},{"id":"ref-for-animationeffect\u2460\u2464"},{"id":"ref-for-animationeffect\u2460\u2465"},{"id":"ref-for-animationeffect\u2460\u2466"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-animationeffect\u2460\u2467"}],"title":"5.8. The AnimationNodeList interface"},{"refs":[{"id":"ref-for-animationeffect\u2460\u2468"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"https://drafts.csswg.org/web-animations-1/#animationeffect"}, "de290699": {"dfnID":"de290699","dfnText":"animation-range-end","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-range-end"},{"id":"ref-for-propdef-animation-range-end\u2460"},{"id":"ref-for-propdef-animation-range-end\u2461"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end"}, "descendant": {"dfnID":"descendant","dfnText":"\ndescendant","external":false,"refSections":[{"refs":[{"id":"ref-for-descendant"}],"title":"3.1.1. Hierarchical"}],"url":"#descendant"}, "dfa8580c": {"dfnID":"dfa8580c","dfnText":"animation attachment range","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-attachment-range"},{"id":"ref-for-animation-attachment-range\u2460"}],"title":"3.3.7.1. Auto-aligning the start time"},{"refs":[{"id":"ref-for-animation-attachment-range\u2461"},{"id":"ref-for-animation-attachment-range\u2462"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-animation-attachment-range\u2463"},{"id":"ref-for-animation-attachment-range\u2464"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range"}, "dictdef-animationplaybackeventinit": {"dfnID":"dictdef-animationplaybackeventinit","dfnText":"AnimationPlaybackEventInit","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-animationplaybackeventinit"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"#dictdef-animationplaybackeventinit"}, "dictdef-timelinerangeoffset": {"dfnID":"dictdef-timelinerangeoffset","dfnText":"TimelineRangeOffset","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-timelinerangeoffset"},{"id":"ref-for-dictdef-timelinerangeoffset\u2460"},{"id":"ref-for-dictdef-timelinerangeoffset\u2461"},{"id":"ref-for-dictdef-timelinerangeoffset\u2462"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-dictdef-timelinerangeoffset\u2463"},{"id":"ref-for-dictdef-timelinerangeoffset\u2464"}],"title":"5.10.2. Modification to the *Keyframe dictionaries"},{"refs":[{"id":"ref-for-dictdef-timelinerangeoffset\u2465"},{"id":"ref-for-dictdef-timelinerangeoffset\u2466"},{"id":"ref-for-dictdef-timelinerangeoffset\u2467"},{"id":"ref-for-dictdef-timelinerangeoffset\u2468"},{"id":"ref-for-dictdef-timelinerangeoffset\u2460\u24ea"},{"id":"ref-for-dictdef-timelinerangeoffset\u2460\u2460"}],"title":"5.14. The Animatable interface mixin"}],"url":"#dictdef-timelinerangeoffset"}, "directly-associated-with-an-animation": {"dfnID":"directly-associated-with-an-animation","dfnText":"directly associated","external":false,"refSections":[{"refs":[{"id":"ref-for-directly-associated-with-an-animation"},{"id":"ref-for-directly-associated-with-an-animation\u2460"},{"id":"ref-for-directly-associated-with-an-animation\u2461"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-directly-associated-with-an-animation\u2462"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-directly-associated-with-an-animation\u2463"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-directly-associated-with-an-animation\u2464"},{"id":"ref-for-directly-associated-with-an-animation\u2465"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-directly-associated-with-an-animation\u2466"}],"title":"5.7.2. Definitions for manipulating hierarchies"}],"url":"#directly-associated-with-an-animation"}, "dom-animatable-getanimations": {"dfnID":"dom-animatable-getanimations","dfnText":"\nsequence<Animation> getAnimations()","external":false,"refSections":[],"url":"#dom-animatable-getanimations"}, "dom-animation-currenttime": {"dfnID":"dom-animation-currenttime","dfnText":"currentTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-currenttime"}],"title":"5.2. The Animation interface"}],"url":"#dom-animation-currenttime"}, "dom-animation-overallprogress": {"dfnID":"dom-animation-overallprogress","dfnText":"overallProgress","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-overallprogress"}],"title":"5.2. The Animation interface"}],"url":"#dom-animation-overallprogress"}, "dom-animation-rangeend": {"dfnID":"dom-animation-rangeend","dfnText":"rangeEnd","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-rangeend"}],"title":"5.2. The Animation interface"}],"url":"#dom-animation-rangeend"}, "dom-animation-rangestart": {"dfnID":"dom-animation-rangestart","dfnText":"rangeStart","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-rangestart"}],"title":"5.2. The Animation interface"}],"url":"#dom-animation-rangestart"}, "dom-animation-starttime": {"dfnID":"dom-animation-starttime","dfnText":"startTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-starttime"}],"title":"5.2. The Animation interface"}],"url":"#dom-animation-starttime"}, "dom-animationeffect-after": {"dfnID":"dom-animationeffect-after","dfnText":"\nundefined after(AnimationEffect... effects)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-after"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-after"}, "dom-animationeffect-after-effects-effects": {"dfnID":"dom-animationeffect-after-effects-effects","dfnText":"effects","external":false,"refSections":[],"url":"#dom-animationeffect-after-effects-effects"}, "dom-animationeffect-before": {"dfnID":"dom-animationeffect-before","dfnText":"\nundefined before (AnimationEffect... effects)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-before"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-before"}, "dom-animationeffect-before-effects-effects": {"dfnID":"dom-animationeffect-before-effects-effects","dfnText":"effects","external":false,"refSections":[],"url":"#dom-animationeffect-before-effects-effects"}, "dom-animationeffect-getcomputedtiming": {"dfnID":"dom-animationeffect-getcomputedtiming","dfnText":"getComputedTiming()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-getcomputedtiming"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#dom-animationeffect-getcomputedtiming"}, "dom-animationeffect-nextsibling": {"dfnID":"dom-animationeffect-nextsibling","dfnText":"nextSibling","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-nextsibling"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-nextsibling"}, "dom-animationeffect-parent": {"dfnID":"dom-animationeffect-parent","dfnText":"parent","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-parent"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-parent"}, "dom-animationeffect-previoussibling": {"dfnID":"dom-animationeffect-previoussibling","dfnText":"previousSibling","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-previoussibling"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-previoussibling"}, "dom-animationeffect-remove": {"dfnID":"dom-animationeffect-remove","dfnText":"undefined remove()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-remove"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-remove"}, "dom-animationeffect-replace": {"dfnID":"dom-animationeffect-replace","dfnText":"\nundefined replace(AnimationEffect... effects)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-replace"}],"title":"5.3. The AnimationEffect interface"}],"url":"#dom-animationeffect-replace"}, "dom-animationeffect-replace-effects-effects": {"dfnID":"dom-animationeffect-replace-effects-effects","dfnText":"effects","external":false,"refSections":[],"url":"#dom-animationeffect-replace-effects-effects"}, "dom-animationnodelist-item": {"dfnID":"dom-animationnodelist-item","dfnText":"\ngetter AnimationEffect? item(unsigned long index)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationnodelist-item"}],"title":"5.8. The AnimationNodeList interface"}],"url":"#dom-animationnodelist-item"}, "dom-animationnodelist-item-index-index": {"dfnID":"dom-animationnodelist-item-index-index","dfnText":"index","external":false,"refSections":[],"url":"#dom-animationnodelist-item-index-index"}, "dom-animationnodelist-length": {"dfnID":"dom-animationnodelist-length","dfnText":"length","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationnodelist-length"}],"title":"5.8. The AnimationNodeList interface"}],"url":"#dom-animationnodelist-length"}, "dom-animationplaybackevent-animationplaybackevent": {"dfnID":"dom-animationplaybackevent-animationplaybackevent","dfnText":"constructor","external":false,"refSections":[],"url":"#dom-animationplaybackevent-animationplaybackevent"}, "dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict": {"dfnID":"dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict","dfnText":"eventInitDict","external":false,"refSections":[],"url":"#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict"}, "dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type": {"dfnID":"dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type","dfnText":"type","external":false,"refSections":[],"url":"#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type"}, "dom-animationplaybackevent-currenttime": {"dfnID":"dom-animationplaybackevent-currenttime","dfnText":"currentTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaybackevent-currenttime"},{"id":"ref-for-dom-animationplaybackevent-currenttime\u2460"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"#dom-animationplaybackevent-currenttime"}, "dom-animationplaybackevent-timelinetime": {"dfnID":"dom-animationplaybackevent-timelinetime","dfnText":"timelineTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaybackevent-timelinetime"},{"id":"ref-for-dom-animationplaybackevent-timelinetime\u2460"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"#dom-animationplaybackevent-timelinetime"}, "dom-animationplaybackeventinit-currenttime": {"dfnID":"dom-animationplaybackeventinit-currenttime","dfnText":"currentTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaybackeventinit-currenttime"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"#dom-animationplaybackeventinit-currenttime"}, "dom-animationplaybackeventinit-timelinetime": {"dfnID":"dom-animationplaybackeventinit-timelinetime","dfnText":"timelineTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaybackeventinit-timelinetime"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"#dom-animationplaybackeventinit-timelinetime"}, "dom-animationtimeline-currenttime": {"dfnID":"dom-animationtimeline-currenttime","dfnText":"currentTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationtimeline-currenttime"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#dom-animationtimeline-currenttime"}, "dom-animationtimeline-duration": {"dfnID":"dom-animationtimeline-duration","dfnText":"duration","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationtimeline-duration"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#dom-animationtimeline-duration"}, "dom-animationtimeline-play": {"dfnID":"dom-animationtimeline-play","dfnText":"\nAnimation play(optional AnimationEffect? effect = null)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationtimeline-play"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#dom-animationtimeline-play"}, "dom-animationtimeline-play-effect-effect": {"dfnID":"dom-animationtimeline-play-effect-effect","dfnText":"effect","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationtimeline-play-effect-effect"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#dom-animationtimeline-play-effect-effect"}, "dom-computedeffecttiming-activeduration": {"dfnID":"dom-computedeffecttiming-activeduration","dfnText":"activeDuration","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-activeduration"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-activeduration"}, "dom-computedeffecttiming-endtime": {"dfnID":"dom-computedeffecttiming-endtime","dfnText":"endTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-endtime"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-endtime"}, "dom-computedeffecttiming-localtime": {"dfnID":"dom-computedeffecttiming-localtime","dfnText":"localTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-localtime"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-localtime"}, "dom-computedeffecttiming-starttime": {"dfnID":"dom-computedeffecttiming-starttime","dfnText":"startTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-starttime"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-starttime"}, "dom-effectcallback-animation": {"dfnID":"dom-effectcallback-animation","dfnText":"animation","external":false,"refSections":[],"url":"#dom-effectcallback-animation"}, "dom-effectcallback-currenttarget": {"dfnID":"dom-effectcallback-currenttarget","dfnText":"currentTarget","external":false,"refSections":[],"url":"#dom-effectcallback-currenttarget"}, "dom-effectcallback-progress": {"dfnID":"dom-effectcallback-progress","dfnText":"progress","external":false,"refSections":[],"url":"#dom-effectcallback-progress"}, "dom-effecttiming-delay": {"dfnID":"dom-effecttiming-delay","dfnText":"delay","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-delay"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-delay\u2460"},{"id":"ref-for-dom-effecttiming-delay\u2461"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"#dom-effecttiming-delay"}, "dom-effecttiming-duration": {"dfnID":"dom-effecttiming-duration","dfnText":"duration","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-duration"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-duration\u2460"},{"id":"ref-for-dom-effecttiming-duration\u2461"}],"title":"5.5. Updating the timing of an\nAnimationEffect"},{"refs":[{"id":"ref-for-dom-effecttiming-duration\u2462"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-dom-effecttiming-duration\u2463"}],"title":"5.7.1. Processing a timing argument"}],"url":"#dom-effecttiming-duration"}, "dom-effecttiming-enddelay": {"dfnID":"dom-effecttiming-enddelay","dfnText":"endDelay","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-enddelay"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-enddelay\u2460"},{"id":"ref-for-dom-effecttiming-enddelay\u2461"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"#dom-effecttiming-enddelay"}, "dom-effecttiming-playbackrate": {"dfnID":"dom-effecttiming-playbackrate","dfnText":"playbackRate","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-playbackrate"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#dom-effecttiming-playbackrate"}, "dom-fillmode-auto": {"dfnID":"dom-fillmode-auto","dfnText":"\"auto\"","external":false,"refSections":[],"url":"#dom-fillmode-auto"}, "dom-fillmode-backwards": {"dfnID":"dom-fillmode-backwards","dfnText":"\"backwards\"","external":false,"refSections":[],"url":"#dom-fillmode-backwards"}, "dom-fillmode-both": {"dfnID":"dom-fillmode-both","dfnText":"\"both\"","external":false,"refSections":[],"url":"#dom-fillmode-both"}, "dom-fillmode-forwards": {"dfnID":"dom-fillmode-forwards","dfnText":"\"forwards\"","external":false,"refSections":[],"url":"#dom-fillmode-forwards"}, "dom-fillmode-none": {"dfnID":"dom-fillmode-none","dfnText":"\"none\"","external":false,"refSections":[],"url":"#dom-fillmode-none"}, "dom-groupeffect-append": {"dfnID":"dom-groupeffect-append","dfnText":"\nundefined append (AnimationEffect... effects)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-append"},{"id":"ref-for-dom-groupeffect-append\u2460"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-append"}, "dom-groupeffect-append-effects-effects": {"dfnID":"dom-groupeffect-append-effects-effects","dfnText":"effects","external":false,"refSections":[],"url":"#dom-groupeffect-append-effects-effects"}, "dom-groupeffect-children": {"dfnID":"dom-groupeffect-children","dfnText":"children","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-children"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-children"}, "dom-groupeffect-clone": {"dfnID":"dom-groupeffect-clone","dfnText":"\nGroupEffect clone ()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-clone"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-dom-groupeffect-clone\u2460"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"#dom-groupeffect-clone"}, "dom-groupeffect-firstchild": {"dfnID":"dom-groupeffect-firstchild","dfnText":"firstChild","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-firstchild"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-firstchild"}, "dom-groupeffect-groupeffect": {"dfnID":"dom-groupeffect-groupeffect","dfnText":"GroupEffect ()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-groupeffect"},{"id":"ref-for-dom-groupeffect-groupeffect\u2460"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-dom-groupeffect-groupeffect\u2461"}],"title":"5.7.1. Processing a timing argument"},{"refs":[{"id":"ref-for-dom-groupeffect-groupeffect\u2462"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"#dom-groupeffect-groupeffect"}, "dom-groupeffect-groupeffect-children-timing-children": {"dfnID":"dom-groupeffect-groupeffect-children-timing-children","dfnText":"children","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-groupeffect-children-timing-children"},{"id":"ref-for-dom-groupeffect-groupeffect-children-timing-children\u2460"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-groupeffect-children-timing-children"}, "dom-groupeffect-groupeffect-children-timing-timing": {"dfnID":"dom-groupeffect-groupeffect-children-timing-timing","dfnText":"timing","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-groupeffect-children-timing-timing"},{"id":"ref-for-dom-groupeffect-groupeffect-children-timing-timing\u2460"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-groupeffect-children-timing-timing"}, "dom-groupeffect-lastchild": {"dfnID":"dom-groupeffect-lastchild","dfnText":"lastChild","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-lastchild"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-lastchild"}, "dom-groupeffect-prepend": {"dfnID":"dom-groupeffect-prepend","dfnText":"","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-groupeffect-prepend"}],"title":"5.7. The GroupEffect interface"}],"url":"#dom-groupeffect-prepend"}, "dom-groupeffect-prepend-effects-effects": {"dfnID":"dom-groupeffect-prepend-effects-effects","dfnText":"effects","external":false,"refSections":[],"url":"#dom-groupeffect-prepend-effects-effects"}, "dom-iterationcompositeoperation-accumulate": {"dfnID":"dom-iterationcompositeoperation-accumulate","dfnText":"\"accumulate\"","external":false,"refSections":[],"url":"#dom-iterationcompositeoperation-accumulate"}, "dom-iterationcompositeoperation-replace": {"dfnID":"dom-iterationcompositeoperation-replace","dfnText":"\"replace\"","external":false,"refSections":[],"url":"#dom-iterationcompositeoperation-replace"}, "dom-keyframeanimationoptions-rangeend": {"dfnID":"dom-keyframeanimationoptions-rangeend","dfnText":"rangeEnd","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeanimationoptions-rangeend"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-dom-keyframeanimationoptions-rangeend"},{"id":"ref-for-dom-keyframeanimationoptions-rangeend\u2460"},{"id":"ref-for-dom-keyframeanimationoptions-rangeend\u2461"}],"title":"5.14. The Animatable interface mixin"}],"url":"#dom-keyframeanimationoptions-rangeend"}, "dom-keyframeanimationoptions-rangestart": {"dfnID":"dom-keyframeanimationoptions-rangestart","dfnText":"rangeStart","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeanimationoptions-rangestart"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-dom-keyframeanimationoptions-rangestart"},{"id":"ref-for-dom-keyframeanimationoptions-rangestart\u2460"},{"id":"ref-for-dom-keyframeanimationoptions-rangestart\u2461"}],"title":"5.14. The Animatable interface mixin"}],"url":"#dom-keyframeanimationoptions-rangestart"}, "dom-keyframeeffect-iterationcomposite": {"dfnID":"dom-keyframeeffect-iterationcomposite","dfnText":"iterationComposite","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-iterationcomposite"},{"id":"ref-for-dom-keyframeeffect-iterationcomposite\u2460"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"#dom-keyframeeffect-iterationcomposite"}, "dom-keyframeeffect-keyframeeffect": {"dfnID":"dom-keyframeeffect-keyframeeffect","dfnText":"\nKeyframeEffect (target, keyframes, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect"},{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2460"}],"title":"5.10. The KeyframeEffect interfaces"},{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2461"}],"title":"5.12. The EffectCallback callback function"}],"url":"#dom-keyframeeffect-keyframeeffect"}, "dom-keyframeeffect-keyframeeffect-source": {"dfnID":"dom-keyframeeffect-keyframeeffect-source","dfnText":"KeyframeEffect (source)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-source"}],"title":"5.6.1. The FillMode enumeration"},{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-source\u2460"},{"id":"ref-for-dom-keyframeeffect-keyframeeffect-source\u2461"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"#dom-keyframeeffect-keyframeeffect-source"}, "dom-keyframeeffectoptions-iterationcomposite": {"dfnID":"dom-keyframeeffectoptions-iterationcomposite","dfnText":"iterationComposite","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffectoptions-iterationcomposite"}],"title":"5.10.3. The KeyframeEffectOptions dictionary"}],"url":"#dom-keyframeeffectoptions-iterationcomposite"}, "dom-optionaleffecttiming-delay": {"dfnID":"dom-optionaleffecttiming-delay","dfnText":"","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-delay"}, "dom-optionaleffecttiming-duration": {"dfnID":"dom-optionaleffecttiming-duration","dfnText":"","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-duration"}, "dom-optionaleffecttiming-enddelay": {"dfnID":"dom-optionaleffecttiming-enddelay","dfnText":"","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-enddelay"}, "dom-optionaleffecttiming-playbackrate": {"dfnID":"dom-optionaleffecttiming-playbackrate","dfnText":"playbackRate","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-playbackrate"}, "dom-sequenceeffect-clone": {"dfnID":"dom-sequenceeffect-clone","dfnText":"\nSequenceEffect clone ()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-sequenceeffect-clone"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"#dom-sequenceeffect-clone"}, "dom-sequenceeffect-sequenceeffect": {"dfnID":"dom-sequenceeffect-sequenceeffect","dfnText":"constructor (sequence<AnimationEffect>? children,\noptional (unrestricted double or EffectTiming) timing)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-sequenceeffect-sequenceeffect"}],"title":"5.7.1. Processing a timing argument"},{"refs":[{"id":"ref-for-dom-sequenceeffect-sequenceeffect\u2460"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"#dom-sequenceeffect-sequenceeffect"}, "dom-sequenceeffect-sequenceeffect-children-timing-children": {"dfnID":"dom-sequenceeffect-sequenceeffect-children-timing-children","dfnText":"children","external":false,"refSections":[],"url":"#dom-sequenceeffect-sequenceeffect-children-timing-children"}, "dom-sequenceeffect-sequenceeffect-children-timing-timing": {"dfnID":"dom-sequenceeffect-sequenceeffect-children-timing-timing","dfnText":"timing","external":false,"refSections":[],"url":"#dom-sequenceeffect-sequenceeffect-children-timing-timing"}, "dom-timelinerangeoffset-offset": {"dfnID":"dom-timelinerangeoffset-offset","dfnText":"offset","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-timelinerangeoffset-offset"},{"id":"ref-for-dom-timelinerangeoffset-offset\u2460"},{"id":"ref-for-dom-timelinerangeoffset-offset\u2461"},{"id":"ref-for-dom-timelinerangeoffset-offset\u2462"},{"id":"ref-for-dom-timelinerangeoffset-offset\u2463"}],"title":"5.14. The Animatable interface mixin"}],"url":"#dom-timelinerangeoffset-offset"}, "dom-timelinerangeoffset-rangename": {"dfnID":"dom-timelinerangeoffset-rangename","dfnText":"rangeName","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-timelinerangeoffset-rangename"},{"id":"ref-for-dom-timelinerangeoffset-rangename\u2460"},{"id":"ref-for-dom-timelinerangeoffset-rangename\u2461"},{"id":"ref-for-dom-timelinerangeoffset-rangename\u2462"},{"id":"ref-for-dom-timelinerangeoffset-rangename\u2463"}],"title":"5.14. The Animatable interface mixin"}],"url":"#dom-timelinerangeoffset-rangename"}, "e6e9e803": {"dfnID":"e6e9e803","dfnText":"composite","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-composite"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite"}, "e9264d53": {"dfnID":"e9264d53","dfnText":"iteration count","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-count"},{"id":"ref-for-iteration-count\u2460"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-iteration-count\u2461"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-count\u2462"},{"id":"ref-for-iteration-count\u2463"}],"title":"3.7.2. Calculating the active duration"},{"refs":[{"id":"ref-for-iteration-count\u2464"},{"id":"ref-for-iteration-count\u2465"},{"id":"ref-for-iteration-count\u2466"},{"id":"ref-for-iteration-count\u2467"},{"id":"ref-for-iteration-count\u2468"},{"id":"ref-for-iteration-count\u2460\u24ea"},{"id":"ref-for-iteration-count\u2460\u2460"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2461"},{"id":"ref-for-iteration-count\u2460\u2462"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"https://drafts.csswg.org/web-animations-1/#iteration-count"}, "e97a9688": {"dfnID":"e97a9688","dfnText":"unsigned long","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-unsigned-long"},{"id":"ref-for-idl-unsigned-long\u2460"},{"id":"ref-for-idl-unsigned-long\u2461"}],"title":"5.8. The AnimationNodeList interface"}],"url":"https://webidl.spec.whatwg.org/#idl-unsigned-long"}, "ee594e1c": {"dfnID":"ee594e1c","dfnText":"CSSKeywordValue","external":true,"refSections":[{"refs":[{"id":"ref-for-csskeywordvalue"},{"id":"ref-for-csskeywordvalue\u2460"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-csskeywordvalue\u2461"},{"id":"ref-for-csskeywordvalue\u2462"},{"id":"ref-for-csskeywordvalue\u2463"},{"id":"ref-for-csskeywordvalue\u2464"}],"title":"5.14. The Animatable interface mixin"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue"}, "ef58f3a4": {"dfnID":"ef58f3a4","dfnText":"CSSNumberish","external":true,"refSections":[{"refs":[{"id":"ref-for-typedefdef-cssnumberish"},{"id":"ref-for-typedefdef-cssnumberish\u2460"},{"id":"ref-for-typedefdef-cssnumberish\u2461"},{"id":"ref-for-typedefdef-cssnumberish\u2462"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-typedefdef-cssnumberish\u2463"},{"id":"ref-for-typedefdef-cssnumberish\u2464"},{"id":"ref-for-typedefdef-cssnumberish\u2465"},{"id":"ref-for-typedefdef-cssnumberish\u2466"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-typedefdef-cssnumberish\u2467"},{"id":"ref-for-typedefdef-cssnumberish\u2468"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u24ea"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2460"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2461"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2462"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2463"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2464"}],"title":"5.6. The\n ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-typedefdef-cssnumberish\u2460\u2465"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2466"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2467"},{"id":"ref-for-typedefdef-cssnumberish\u2460\u2468"},{"id":"ref-for-typedefdef-cssnumberish\u2461\u24ea"},{"id":"ref-for-typedefdef-cssnumberish\u2461\u2460"},{"id":"ref-for-typedefdef-cssnumberish\u2461\u2461"},{"id":"ref-for-typedefdef-cssnumberish\u2461\u2462"}],"title":"5.15. The AnimationPlaybackEvent interface "}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"}, "end-time": {"dfnID":"end-time","dfnText":"end time","external":false,"refSections":[{"refs":[{"id":"ref-for-end-time"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-end-time\u2460"},{"id":"ref-for-end-time\u2461"},{"id":"ref-for-end-time\u2462"},{"id":"ref-for-end-time\u2463"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-end-time\u2464"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-end-time\u2465"},{"id":"ref-for-end-time\u2466"},{"id":"ref-for-end-time\u2467"}],"title":"3.9.3. The intrinsic\n iteration duration of a group effect"},{"refs":[{"id":"ref-for-end-time\u2468"},{"id":"ref-for-end-time\u2460\u24ea"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-end-time\u2460\u2460"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#end-time"}, "enumdef-fillmode": {"dfnID":"enumdef-fillmode","dfnText":"FillMode","external":false,"refSections":[],"url":"#enumdef-fillmode"}, "enumdef-iterationcompositeoperation": {"dfnID":"enumdef-iterationcompositeoperation","dfnText":"IterationCompositeOperation","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-iterationcompositeoperation"},{"id":"ref-for-enumdef-iterationcompositeoperation\u2460"}],"title":"5.10. The KeyframeEffect interfaces"},{"refs":[{"id":"ref-for-enumdef-iterationcompositeoperation\u2461"},{"id":"ref-for-enumdef-iterationcompositeoperation\u2462"}],"title":"5.10.3. The KeyframeEffectOptions dictionary"}],"url":"#enumdef-iterationcompositeoperation"}, "f06e6d7b": {"dfnID":"f06e6d7b","dfnText":"overall progress","external":true,"refSections":[{"refs":[{"id":"ref-for-overall-progress"},{"id":"ref-for-overall-progress\u2460"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-overall-progress\u2461"}],"title":"3.7.3.2. Calculating the overall progress"}],"url":"https://drafts.csswg.org/web-animations-1/#overall-progress"}, "fa0bbc48": {"dfnID":"fa0bbc48","dfnText":"pending playback rate","external":true,"refSections":[{"refs":[{"id":"ref-for-pending-playback-rate"},{"id":"ref-for-pending-playback-rate\u2460"}],"title":"3.3.7. Playing an animation"}],"url":"https://drafts.csswg.org/web-animations-1/#pending-playback-rate"}, "fa19c68e": {"dfnID":"fa19c68e","dfnText":"@keyframes","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-keyframes"}],"title":"5.10.2. Modification to the *Keyframe dictionaries"}],"url":"https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes"}, "ff46fefd": {"dfnID":"ff46fefd","dfnText":"effect value","external":true,"refSections":[{"refs":[{"id":"ref-for-effect-value"}],"title":"4.2.1. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-effect-value\u2460"},{"id":"ref-for-effect-value\u2461"}],"title":"4.4. Effect accumulation"},{"refs":[{"id":"ref-for-effect-value\u2462"}],"title":"5.11. The IterationCompositeOperation enumeration"}],"url":"https://drafts.csswg.org/web-animations-1/#effect-value"}, "first-child": {"dfnID":"first-child","dfnText":"\nfirst child","external":false,"refSections":[{"refs":[{"id":"ref-for-first-child"},{"id":"ref-for-first-child\u2460"}],"title":"5.7. The GroupEffect interface"}],"url":"#first-child"}, "group-effect": {"dfnID":"group-effect","dfnText":"group effect","external":false,"refSections":[{"refs":[{"id":"ref-for-group-effect"}],"title":"2. Changes since level 1"},{"refs":[{"id":"ref-for-group-effect\u2460"},{"id":"ref-for-group-effect\u2461"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-group-effect\u2462"}],"title":"3.4.1. Types of animation effects"},{"refs":[{"id":"ref-for-group-effect\u2463"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-group-effect\u2464"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-group-effect\u2465"}],"title":"3.8. Time transformations"},{"refs":[{"id":"ref-for-group-effect\u2466"},{"id":"ref-for-group-effect\u2467"},{"id":"ref-for-group-effect\u2468"},{"id":"ref-for-group-effect\u2460\u24ea"},{"id":"ref-for-group-effect\u2460\u2460"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-group-effect\u2460\u2461"},{"id":"ref-for-group-effect\u2460\u2462"},{"id":"ref-for-group-effect\u2460\u2463"},{"id":"ref-for-group-effect\u2460\u2464"},{"id":"ref-for-group-effect\u2460\u2465"},{"id":"ref-for-group-effect\u2460\u2466"},{"id":"ref-for-group-effect\u2460\u2467"},{"id":"ref-for-group-effect\u2460\u2468"},{"id":"ref-for-group-effect\u2461\u24ea"},{"id":"ref-for-group-effect\u2461\u2460"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-group-effect\u2461\u2461"},{"id":"ref-for-group-effect\u2461\u2462"}],"title":"3.9.2. The start time of\n children of a group effect"},{"refs":[{"id":"ref-for-group-effect\u2461\u2463"},{"id":"ref-for-group-effect\u2461\u2464"}],"title":"3.9.3. The intrinsic\n iteration duration of a group effect"},{"refs":[{"id":"ref-for-group-effect\u2461\u2465"},{"id":"ref-for-group-effect\u2461\u2466"},{"id":"ref-for-group-effect\u2461\u2467"},{"id":"ref-for-group-effect\u2461\u2468"},{"id":"ref-for-group-effect\u2462\u24ea"},{"id":"ref-for-group-effect\u2462\u2460"},{"id":"ref-for-group-effect\u2462\u2461"},{"id":"ref-for-group-effect\u2462\u2462"},{"id":"ref-for-group-effect\u2462\u2463"}],"title":"3.9.4. Sequence effects"},{"refs":[{"id":"ref-for-group-effect\u2462\u2464"},{"id":"ref-for-group-effect\u2462\u2465"},{"id":"ref-for-group-effect\u2462\u2466"}],"title":"5.7. The GroupEffect interface"}],"url":"#group-effect"}, "groupeffect": {"dfnID":"groupeffect","dfnText":"GroupEffect","external":false,"refSections":[{"refs":[{"id":"ref-for-groupeffect"},{"id":"ref-for-groupeffect\u2460"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-groupeffect\u2461"}],"title":"5.6.1. The FillMode enumeration"},{"refs":[{"id":"ref-for-groupeffect\u2462"},{"id":"ref-for-groupeffect\u2463"},{"id":"ref-for-groupeffect\u2464"},{"id":"ref-for-groupeffect\u2465"},{"id":"ref-for-groupeffect\u2466"},{"id":"ref-for-groupeffect\u2467"},{"id":"ref-for-groupeffect\u2468"},{"id":"ref-for-groupeffect\u2460\u24ea"}],"title":"5.7. The GroupEffect interface"},{"refs":[{"id":"ref-for-groupeffect\u2460\u2460"},{"id":"ref-for-groupeffect\u2460\u2461"}],"title":"5.9. The SequenceEffect interfaces"},{"refs":[{"id":"ref-for-groupeffect\u2460\u2462"}],"title":"5.16. Model liveness"}],"url":"#groupeffect"}, "in-play": {"dfnID":"in-play","dfnText":"in play","external":false,"refSections":[{"refs":[{"id":"ref-for-in-play"},{"id":"ref-for-in-play\u2460"},{"id":"ref-for-in-play\u2461"},{"id":"ref-for-in-play\u2462"},{"id":"ref-for-in-play\u2463"},{"id":"ref-for-in-play\u2464"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-in-play\u2465"}],"title":"3.5.3. Interval timing"}],"url":"#in-play"}, "inclusive-ancestor": {"dfnID":"inclusive-ancestor","dfnText":"\ninclusive ancestor","external":false,"refSections":[{"refs":[{"id":"ref-for-inclusive-ancestor"},{"id":"ref-for-inclusive-ancestor\u2460"},{"id":"ref-for-inclusive-ancestor\u2461"},{"id":"ref-for-inclusive-ancestor\u2462"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-inclusive-ancestor\u2463"},{"id":"ref-for-inclusive-ancestor\u2464"}],"title":"5.7. The GroupEffect interface"}],"url":"#inclusive-ancestor"}, "inclusive-descendant": {"dfnID":"inclusive-descendant","dfnText":"\ninclusive descendant","external":false,"refSections":[{"refs":[{"id":"ref-for-inclusive-descendant"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-inclusive-descendant\u2460"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-inclusive-descendant\u2461"}],"title":"3.3.9. Canceling an animation"}],"url":"#inclusive-descendant"}, "inherited-time": {"dfnID":"inherited-time","dfnText":"inherited time","external":false,"refSections":[{"refs":[{"id":"ref-for-inherited-time"},{"id":"ref-for-inherited-time\u2460"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-inherited-time\u2461"},{"id":"ref-for-inherited-time\u2462"},{"id":"ref-for-inherited-time\u2463"},{"id":"ref-for-inherited-time\u2464"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-inherited-time\u2465"}],"title":"3.5.2. Iteration time space"},{"refs":[{"id":"ref-for-inherited-time\u2466"},{"id":"ref-for-inherited-time\u2467"},{"id":"ref-for-inherited-time\u2468"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-inherited-time\u2460\u24ea"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-inherited-time\u2460\u2460"},{"id":"ref-for-inherited-time\u2460\u2461"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#inherited-time"}, "insert-children": {"dfnID":"insert-children","dfnText":"insert","external":false,"refSections":[{"refs":[{"id":"ref-for-insert-children"},{"id":"ref-for-insert-children\u2460"},{"id":"ref-for-insert-children\u2461"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-insert-children\u2462"},{"id":"ref-for-insert-children\u2463"},{"id":"ref-for-insert-children\u2464"}],"title":"5.7. The GroupEffect interface"}],"url":"#insert-children"}, "intrinsic-iteration-duration": {"dfnID":"intrinsic-iteration-duration","dfnText":"intrinsic iteration duration","external":false,"refSections":[{"refs":[{"id":"ref-for-intrinsic-iteration-duration"}],"title":"3.2. Timelines"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2460"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2461"},{"id":"ref-for-intrinsic-iteration-duration\u2462"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2463"},{"id":"ref-for-intrinsic-iteration-duration\u2464"},{"id":"ref-for-intrinsic-iteration-duration\u2465"},{"id":"ref-for-intrinsic-iteration-duration\u2466"}],"title":"3.9.3. The intrinsic\n iteration duration of a group effect"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2467"},{"id":"ref-for-intrinsic-iteration-duration\u2468"},{"id":"ref-for-intrinsic-iteration-duration\u2460\u24ea"}],"title":"3.9.4.2. The intrinsic\n iteration duration of a sequence effect"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2460\u2460"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2460\u2461"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-intrinsic-iteration-duration\u2460\u2462"}],"title":"5.10.1. Creating a new KeyframeEffect object"}],"url":"#intrinsic-iteration-duration"}, "iteration-composite-operation": {"dfnID":"iteration-composite-operation","dfnText":"iteration composite operation","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-composite-operation"}],"title":"4.2.1. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-iteration-composite-operation\u2460"},{"id":"ref-for-iteration-composite-operation\u2461"}],"title":"4.4. Effect accumulation"},{"refs":[{"id":"ref-for-iteration-composite-operation\u2462"},{"id":"ref-for-iteration-composite-operation\u2463"},{"id":"ref-for-iteration-composite-operation\u2464"}],"title":"5.10. The KeyframeEffect interfaces"},{"refs":[{"id":"ref-for-iteration-composite-operation\u2465"}],"title":"5.10.3. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-iteration-composite-operation\u2466"},{"id":"ref-for-iteration-composite-operation\u2467"}],"title":"5.11. The IterationCompositeOperation enumeration"}],"url":"#iteration-composite-operation"}, "iteration-composite-operation-accumulate": {"dfnID":"iteration-composite-operation-accumulate","dfnText":"accumulate","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-composite-operation-accumulate"}],"title":"4.2.1. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-iteration-composite-operation-accumulate\u2460"}],"title":"5.11. The IterationCompositeOperation enumeration"}],"url":"#iteration-composite-operation-accumulate"}, "iteration-composite-operation-replace": {"dfnID":"iteration-composite-operation-replace","dfnText":"replace","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-composite-operation-replace"}],"title":"5.11. The IterationCompositeOperation enumeration"}],"url":"#iteration-composite-operation-replace"}, "iterationcompositeoperation": {"dfnID":"iterationcompositeoperation","dfnText":"IterationCompositeOperation","external":false,"refSections":[{"refs":[{"id":"ref-for-iterationcompositeoperation"}],"title":"5.10. The KeyframeEffect interfaces"}],"url":"#iterationcompositeoperation"}, "last-child": {"dfnID":"last-child","dfnText":"\nlast child","external":false,"refSections":[{"refs":[{"id":"ref-for-last-child"}],"title":"5.7. The GroupEffect interface"}],"url":"#last-child"}, "local-time": {"dfnID":"local-time","dfnText":"local time","external":false,"refSections":[{"refs":[{"id":"ref-for-local-time"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-local-time\u2460"},{"id":"ref-for-local-time\u2461"},{"id":"ref-for-local-time\u2462"},{"id":"ref-for-local-time\u2463"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-local-time\u2464"},{"id":"ref-for-local-time\u2465"},{"id":"ref-for-local-time\u2466"},{"id":"ref-for-local-time\u2467"},{"id":"ref-for-local-time\u2468"},{"id":"ref-for-local-time\u2460\u24ea"},{"id":"ref-for-local-time\u2460\u2460"},{"id":"ref-for-local-time\u2460\u2461"},{"id":"ref-for-local-time\u2460\u2462"},{"id":"ref-for-local-time\u2460\u2463"},{"id":"ref-for-local-time\u2460\u2464"},{"id":"ref-for-local-time\u2460\u2465"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-local-time\u2460\u2466"}],"title":"3.5.2. Iteration time space"},{"refs":[{"id":"ref-for-local-time\u2460\u2467"},{"id":"ref-for-local-time\u2460\u2468"},{"id":"ref-for-local-time\u2461\u24ea"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-local-time\u2461\u2460"},{"id":"ref-for-local-time\u2461\u2461"},{"id":"ref-for-local-time\u2461\u2462"},{"id":"ref-for-local-time\u2461\u2463"},{"id":"ref-for-local-time\u2461\u2464"},{"id":"ref-for-local-time\u2461\u2465"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-local-time\u2461\u2466"},{"id":"ref-for-local-time\u2461\u2467"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-local-time\u2461\u2468"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#local-time"}, "next-sibling": {"dfnID":"next-sibling","dfnText":"\nnext sibling","external":false,"refSections":[{"refs":[{"id":"ref-for-next-sibling"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-next-sibling\u2460"},{"id":"ref-for-next-sibling\u2461"}],"title":"5.7.2. Definitions for manipulating hierarchies"}],"url":"#next-sibling"}, "next-sibling-not-included": {"dfnID":"next-sibling-not-included","dfnText":"next sibling of\neffect not included","external":false,"refSections":[{"refs":[{"id":"ref-for-next-sibling-not-included"},{"id":"ref-for-next-sibling-not-included\u2460"}],"title":"5.3. The AnimationEffect interface"}],"url":"#next-sibling-not-included"}, "normalize-specified-timing": {"dfnID":"normalize-specified-timing","dfnText":"normalize specified timing","external":false,"refSections":[{"refs":[{"id":"ref-for-normalize-specified-timing"},{"id":"ref-for-normalize-specified-timing\u2460"},{"id":"ref-for-normalize-specified-timing\u2461"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-normalize-specified-timing\u2462"},{"id":"ref-for-normalize-specified-timing\u2463"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"#normalize-specified-timing"}, "parent-group": {"dfnID":"parent-group","dfnText":"parent group","external":false,"refSections":[{"refs":[{"id":"ref-for-parent-group"},{"id":"ref-for-parent-group\u2460"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-parent-group\u2461"},{"id":"ref-for-parent-group\u2462"}],"title":"3.4. Animation effects"},{"refs":[{"id":"ref-for-parent-group\u2463"},{"id":"ref-for-parent-group\u2464"},{"id":"ref-for-parent-group\u2465"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-parent-group\u2466"},{"id":"ref-for-parent-group\u2467"},{"id":"ref-for-parent-group\u2468"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-parent-group\u2460\u24ea"},{"id":"ref-for-parent-group\u2460\u2460"},{"id":"ref-for-parent-group\u2460\u2461"},{"id":"ref-for-parent-group\u2460\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-parent-group\u2460\u2463"},{"id":"ref-for-parent-group\u2460\u2464"},{"id":"ref-for-parent-group\u2460\u2465"},{"id":"ref-for-parent-group\u2460\u2466"},{"id":"ref-for-parent-group\u2460\u2467"},{"id":"ref-for-parent-group\u2460\u2468"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-parent-group\u2461\u24ea"},{"id":"ref-for-parent-group\u2461\u2460"},{"id":"ref-for-parent-group\u2461\u2461"}],"title":"3.9. Grouping and synchronization"},{"refs":[{"id":"ref-for-parent-group\u2461\u2462"},{"id":"ref-for-parent-group\u2461\u2463"},{"id":"ref-for-parent-group\u2461\u2464"},{"id":"ref-for-parent-group\u2461\u2465"},{"id":"ref-for-parent-group\u2461\u2466"},{"id":"ref-for-parent-group\u2461\u2467"},{"id":"ref-for-parent-group\u2461\u2468"},{"id":"ref-for-parent-group\u2462\u24ea"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-parent-group\u2462\u2460"},{"id":"ref-for-parent-group\u2462\u2461"}],"title":"5.6. The\n ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-parent-group\u2462\u2462"},{"id":"ref-for-parent-group\u2462\u2463"},{"id":"ref-for-parent-group\u2462\u2464"}],"title":"5.7.2. Definitions for manipulating hierarchies"}],"url":"#parent-group"}, "pending-play-task": {"dfnID":"pending-play-task","dfnText":"pending play task","external":false,"refSections":[{"refs":[{"id":"ref-for-pending-play-task"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2460"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-pending-play-task\u2461"}],"title":"3.3.6. Setting the start time of an\nAnimation"},{"refs":[{"id":"ref-for-pending-play-task\u2462"},{"id":"ref-for-pending-play-task\u2463"},{"id":"ref-for-pending-play-task\u2464"},{"id":"ref-for-pending-play-task\u2465"}],"title":"3.3.7. Playing an animation"}],"url":"#pending-play-task"}, "play-an-animation": {"dfnID":"play-an-animation","dfnText":"play an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-play-an-animation"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-play-an-animation\u2460"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#play-an-animation"}, "previous-sibling": {"dfnID":"previous-sibling","dfnText":"\nprevious sibling","external":false,"refSections":[{"refs":[{"id":"ref-for-previous-sibling"},{"id":"ref-for-previous-sibling\u2460"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-previous-sibling\u2461"}],"title":"5.3. The AnimationEffect interface"}],"url":"#previous-sibling"}, "process-a-timing-argument": {"dfnID":"process-a-timing-argument","dfnText":"process a timing argument","external":false,"refSections":[{"refs":[{"id":"ref-for-process-a-timing-argument"}],"title":"5.7. The GroupEffect interface"}],"url":"#process-a-timing-argument"}, "progress-based-timeline": {"dfnID":"progress-based-timeline","dfnText":"progress-based\ntimeline","external":false,"refSections":[{"refs":[{"id":"ref-for-progress-based-timeline"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-progress-based-timeline\u2460"},{"id":"ref-for-progress-based-timeline\u2461"}],"title":"3.3.4. Validating a CSSNumberish time"},{"refs":[{"id":"ref-for-progress-based-timeline\u2462"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-progress-based-timeline\u2463"}],"title":"3.9.3. The intrinsic\n iteration duration of a group effect"},{"refs":[{"id":"ref-for-progress-based-timeline\u2464"}],"title":"5.1. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-progress-based-timeline\u2465"},{"id":"ref-for-progress-based-timeline\u2466"}],"title":"5.2. The Animation interface"},{"refs":[{"id":"ref-for-progress-based-timeline\u2467"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-progress-based-timeline\u2468"},{"id":"ref-for-progress-based-timeline\u2460\u24ea"},{"id":"ref-for-progress-based-timeline\u2460\u2460"},{"id":"ref-for-progress-based-timeline\u2460\u2461"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#progress-based-timeline"}, "ready": {"dfnID":"ready","dfnText":"ready","external":false,"refSections":[{"refs":[{"id":"ref-for-ready"}],"title":"3.3.3. Waiting for the associated effect"},{"refs":[{"id":"ref-for-ready\u2460"},{"id":"ref-for-ready\u2461"},{"id":"ref-for-ready\u2462"}],"title":"3.3.7. Playing an animation"},{"refs":[{"id":"ref-for-ready\u2463"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#ready"}, "remove-an-animation-effect": {"dfnID":"remove-an-animation-effect","dfnText":"remove","external":false,"refSections":[{"refs":[{"id":"ref-for-remove-an-animation-effect"}],"title":"3.3.2. Setting the target effect of an\n animation"},{"refs":[{"id":"ref-for-remove-an-animation-effect\u2460"},{"id":"ref-for-remove-an-animation-effect\u2461"}],"title":"5.3. The AnimationEffect interface"},{"refs":[{"id":"ref-for-remove-an-animation-effect\u2462"}],"title":"5.7.2. Definitions for manipulating hierarchies"}],"url":"#remove-an-animation-effect"}, "repeated-duration": {"dfnID":"repeated-duration","dfnText":"repeated duration","external":false,"refSections":[{"refs":[{"id":"ref-for-repeated-duration"},{"id":"ref-for-repeated-duration\u2460"},{"id":"ref-for-repeated-duration\u2461"}],"title":"3.7.2. Calculating the active duration"}],"url":"#repeated-duration"}, "root": {"dfnID":"root","dfnText":"\nroot","external":false,"refSections":[{"refs":[{"id":"ref-for-root"}],"title":"3.4. Animation effects"}],"url":"#root"}, "sequence-effect": {"dfnID":"sequence-effect","dfnText":"sequence effect","external":false,"refSections":[{"refs":[{"id":"ref-for-sequence-effect"}],"title":"2. Changes since level 1"},{"refs":[{"id":"ref-for-sequence-effect\u2460"},{"id":"ref-for-sequence-effect\u2461"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-sequence-effect\u2462"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-sequence-effect\u2463"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-sequence-effect\u2464"},{"id":"ref-for-sequence-effect\u2465"},{"id":"ref-for-sequence-effect\u2466"},{"id":"ref-for-sequence-effect\u2467"},{"id":"ref-for-sequence-effect\u2468"},{"id":"ref-for-sequence-effect\u2460\u24ea"}],"title":"3.9.4. Sequence effects"},{"refs":[{"id":"ref-for-sequence-effect\u2460\u2460"},{"id":"ref-for-sequence-effect\u2460\u2461"},{"id":"ref-for-sequence-effect\u2460\u2462"},{"id":"ref-for-sequence-effect\u2460\u2463"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-sequence-effect\u2460\u2464"},{"id":"ref-for-sequence-effect\u2460\u2465"}],"title":"3.9.4.2. The intrinsic\n iteration duration of a sequence effect"},{"refs":[{"id":"ref-for-sequence-effect\u2460\u2466"}],"title":"4.1.1. Not animatable"},{"refs":[{"id":"ref-for-sequence-effect\u2460\u2467"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-sequence-effect\u2460\u2468"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"#sequence-effect"}, "sequenceeffect": {"dfnID":"sequenceeffect","dfnText":"SequenceEffect","external":false,"refSections":[{"refs":[{"id":"ref-for-sequenceeffect"},{"id":"ref-for-sequenceeffect\u2460"},{"id":"ref-for-sequenceeffect\u2461"},{"id":"ref-for-sequenceeffect\u2462"}],"title":"5.9. The SequenceEffect interfaces"}],"url":"#sequenceeffect"}, "set-the-current-time": {"dfnID":"set-the-current-time","dfnText":"set the current time","external":false,"refSections":[{"refs":[{"id":"ref-for-set-the-current-time"}],"title":"3.3.1. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-set-the-current-time\u2460"}],"title":"5.2. The Animation interface"}],"url":"#set-the-current-time"}, "set-the-start-time": {"dfnID":"set-the-start-time","dfnText":"set the start time","external":false,"refSections":[{"refs":[{"id":"ref-for-set-the-start-time"}],"title":"5.2. The Animation interface"}],"url":"#set-the-start-time"}, "silently-set-the-current-time": {"dfnID":"silently-set-the-current-time","dfnText":"silently set the current time","external":false,"refSections":[{"refs":[{"id":"ref-for-silently-set-the-current-time"}],"title":"3.3.5. Setting the current time of an\nAnimation"}],"url":"#silently-set-the-current-time"}, "specified-end-delay": {"dfnID":"specified-end-delay","dfnText":"specified end delay","external":false,"refSections":[{"refs":[{"id":"ref-for-specified-end-delay"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"#specified-end-delay"}, "specified-iteration-duration": {"dfnID":"specified-iteration-duration","dfnText":"specified iteration duration","external":false,"refSections":[{"refs":[{"id":"ref-for-specified-iteration-duration"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"#specified-iteration-duration"}, "specified-start-delay": {"dfnID":"specified-start-delay","dfnText":"specified start delay","external":false,"refSections":[{"refs":[{"id":"ref-for-specified-start-delay"}],"title":"5.5. Updating the timing of an\nAnimationEffect"}],"url":"#specified-start-delay"}, "start-delay": {"dfnID":"start-delay","dfnText":"start delay","external":false,"refSections":[{"refs":[{"id":"ref-for-start-delay"},{"id":"ref-for-start-delay\u2460"},{"id":"ref-for-start-delay\u2461"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-start-delay\u2462"},{"id":"ref-for-start-delay\u2463"},{"id":"ref-for-start-delay\u2464"},{"id":"ref-for-start-delay\u2465"},{"id":"ref-for-start-delay\u2466"}],"title":"3.4.2. The active interval"},{"refs":[{"id":"ref-for-start-delay\u2467"},{"id":"ref-for-start-delay\u2468"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-start-delay\u2460\u24ea"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-start-delay\u2460\u2460"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-start-delay\u2460\u2461"}],"title":"3.7.1. Overview"},{"refs":[{"id":"ref-for-start-delay\u2460\u2462"}],"title":"3.7.3.1. Calculating the active time"},{"refs":[{"id":"ref-for-start-delay\u2460\u2463"},{"id":"ref-for-start-delay\u2460\u2464"},{"id":"ref-for-start-delay\u2460\u2465"},{"id":"ref-for-start-delay\u2460\u2466"},{"id":"ref-for-start-delay\u2460\u2467"},{"id":"ref-for-start-delay\u2460\u2468"}],"title":"3.9.4.1. The start time of\n children of a sequence effect"},{"refs":[{"id":"ref-for-start-delay\u2461\u24ea"}],"title":"5.4. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-start-delay\u2461\u2460"}],"title":"5.5. Updating the timing of an\nAnimationEffect"},{"refs":[{"id":"ref-for-start-delay\u2461\u2461"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#start-delay"}, "time-based-animation-to-a-proportional-animation": {"dfnID":"time-based-animation-to-a-proportional-animation","dfnText":"","external":false,"refSections":[{"refs":[{"id":"ref-for-time-based-animation-to-a-proportional-animation"}],"title":"3.3. Animations"}],"url":"#time-based-animation-to-a-proportional-animation"}, "timeline-duration": {"dfnID":"timeline-duration","dfnText":"duration","external":false,"refSections":[{"refs":[{"id":"ref-for-timeline-duration"},{"id":"ref-for-timeline-duration\u2460"}],"title":"3.2. Timelines"},{"refs":[{"id":"ref-for-timeline-duration\u2461"}],"title":"3.3. Animations"},{"refs":[{"id":"ref-for-timeline-duration\u2462"},{"id":"ref-for-timeline-duration\u2463"}],"title":"3.4.4. Animation effect phases and\nstates"},{"refs":[{"id":"ref-for-timeline-duration\u2464"}],"title":"3.5.1. Iteration intervals"},{"refs":[{"id":"ref-for-timeline-duration\u2465"}],"title":"5.1. The AnimationTimeline interface"}],"url":"#timeline-duration"}, "transformed-time": {"dfnID":"transformed-time","dfnText":"transformed time","external":false,"refSections":[{"refs":[{"id":"ref-for-transformed-time"}],"title":"3.4.3. Local time and inherited time"},{"refs":[{"id":"ref-for-transformed-time\u2460"}],"title":"3.6. Animation effect speed control"},{"refs":[{"id":"ref-for-transformed-time\u2461"},{"id":"ref-for-transformed-time\u2462"}],"title":"3.8.2. Calculating the transformed time"},{"refs":[{"id":"ref-for-transformed-time\u2463"},{"id":"ref-for-transformed-time\u2464"},{"id":"ref-for-transformed-time\u2465"},{"id":"ref-for-transformed-time\u2466"},{"id":"ref-for-transformed-time\u2467"}],"title":"3.9.1. Relationship of group time to child time"},{"refs":[{"id":"ref-for-transformed-time\u2468"}],"title":"5.6. The\n ComputedEffectTiming dictionary"}],"url":"#transformed-time"}, "tree-order": {"dfnID":"tree-order","dfnText":"\ntree order","external":false,"refSections":[{"refs":[{"id":"ref-for-tree-order"}],"title":"4.3.1. The effect stack"}],"url":"#tree-order"}, "validate-a-cssnumberish-time": {"dfnID":"validate-a-cssnumberish-time","dfnText":"validate a CSSNumberish time","external":false,"refSections":[{"refs":[{"id":"ref-for-validate-a-cssnumberish-time"}],"title":"3.3.5. Setting the current time of an\nAnimation"},{"refs":[{"id":"ref-for-validate-a-cssnumberish-time\u2460"}],"title":"3.3.6. Setting the start time of an\nAnimation"}],"url":"#validate-a-cssnumberish-time"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-values-4/#time-value": "Expands to: ms | s", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#active-duration": {"displayText":"active duration","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"active duration","type":"dfn","url":"#active-duration"}, "#ancestor": {"displayText":"ancestor","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"ancestor","type":"dfn","url":"#ancestor"}, "#animation-calculating-an-auto-aligned-start-time": {"displayText":"calculating an auto-aligned start time","export":true,"for_":["animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"calculating an auto-aligned start time","type":"dfn","url":"#animation-calculating-an-auto-aligned-start-time"}, "#animation-effect-playback-rate": {"displayText":"playback rate","export":true,"for_":["animation effect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"playback rate","type":"dfn","url":"#animation-effect-playback-rate"}, "#animation-effect-start-time": {"displayText":"animation effect start time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"animation effect start time","type":"dfn","url":"#animation-effect-start-time"}, "#animation-overallprogress": {"displayText":"overallprogress","export":true,"for_":["animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"overallprogress","type":"dfn","url":"#animation-overallprogress"}, "#animationnodelist": {"displayText":"AnimationNodeList","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"AnimationNodeList","type":"interface","url":"#animationnodelist"}, "#associated-with-an-animation": {"displayText":"associated with an animation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"associated with an animation","type":"dfn","url":"#associated-with-an-animation"}, "#at-progress-timeline-boundary": {"displayText":"at progress timeline boundary","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"at progress timeline boundary","type":"dfn","url":"#at-progress-timeline-boundary"}, "#callbackdef-effectcallback": {"displayText":"EffectCallback","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"EffectCallback","type":"callback","url":"#callbackdef-effectcallback"}, "#child-effect": {"displayText":"child effect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"child effect","type":"dfn","url":"#child-effect"}, "#current": {"displayText":"current","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"current","type":"dfn","url":"#current"}, "#custom-effect": {"displayText":"custom effect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"custom effect","type":"dfn","url":"#custom-effect"}, "#descendant": {"displayText":"descendant","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"descendant","type":"dfn","url":"#descendant"}, "#dictdef-animationplaybackeventinit": {"displayText":"AnimationPlaybackEventInit","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"AnimationPlaybackEventInit","type":"dictionary","url":"#dictdef-animationplaybackeventinit"}, "#dictdef-timelinerangeoffset": {"displayText":"TimelineRangeOffset","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"TimelineRangeOffset","type":"dictionary","url":"#dictdef-timelinerangeoffset"}, "#directly-associated-with-an-animation": {"displayText":"directly associated with an animation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"directly associated with an animation","type":"dfn","url":"#directly-associated-with-an-animation"}, "#dom-animation-currenttime": {"displayText":"currentTime","export":true,"for_":["Animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"currentTime","type":"attribute","url":"#dom-animation-currenttime"}, "#dom-animation-overallprogress": {"displayText":"overallProgress","export":true,"for_":["Animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"overallProgress","type":"attribute","url":"#dom-animation-overallprogress"}, "#dom-animation-rangeend": {"displayText":"rangeEnd","export":true,"for_":["Animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"rangeEnd","type":"attribute","url":"#dom-animation-rangeend"}, "#dom-animation-rangestart": {"displayText":"rangeStart","export":true,"for_":["Animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"rangeStart","type":"attribute","url":"#dom-animation-rangestart"}, "#dom-animation-starttime": {"displayText":"startTime","export":true,"for_":["Animation"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"startTime","type":"attribute","url":"#dom-animation-starttime"}, "#dom-animationeffect-after": {"displayText":"after()","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"after()","type":"method","url":"#dom-animationeffect-after"}, "#dom-animationeffect-before": {"displayText":"before()","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"before()","type":"method","url":"#dom-animationeffect-before"}, "#dom-animationeffect-getcomputedtiming": {"displayText":"getComputedTiming()","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"getComputedTiming()","type":"method","url":"#dom-animationeffect-getcomputedtiming"}, "#dom-animationeffect-nextsibling": {"displayText":"nextSibling","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"nextSibling","type":"attribute","url":"#dom-animationeffect-nextsibling"}, "#dom-animationeffect-parent": {"displayText":"parent","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"parent","type":"attribute","url":"#dom-animationeffect-parent"}, "#dom-animationeffect-previoussibling": {"displayText":"previousSibling","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"previousSibling","type":"attribute","url":"#dom-animationeffect-previoussibling"}, "#dom-animationeffect-remove": {"displayText":"remove()","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"remove()","type":"method","url":"#dom-animationeffect-remove"}, "#dom-animationeffect-replace": {"displayText":"replace()","export":true,"for_":["AnimationEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"replace()","type":"method","url":"#dom-animationeffect-replace"}, "#dom-animationnodelist-item": {"displayText":"item(index)","export":true,"for_":["AnimationNodeList"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"item(index)","type":"method","url":"#dom-animationnodelist-item"}, "#dom-animationnodelist-length": {"displayText":"length","export":true,"for_":["AnimationNodeList"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"length","type":"attribute","url":"#dom-animationnodelist-length"}, "#dom-animationplaybackevent-currenttime": {"displayText":"currentTime","export":true,"for_":["AnimationPlaybackEvent"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"currentTime","type":"attribute","url":"#dom-animationplaybackevent-currenttime"}, "#dom-animationplaybackevent-timelinetime": {"displayText":"timelineTime","export":true,"for_":["AnimationPlaybackEvent"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"timelineTime","type":"attribute","url":"#dom-animationplaybackevent-timelinetime"}, "#dom-animationplaybackeventinit-currenttime": {"displayText":"currentTime","export":true,"for_":["AnimationPlaybackEventInit"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"currentTime","type":"dict-member","url":"#dom-animationplaybackeventinit-currenttime"}, "#dom-animationplaybackeventinit-timelinetime": {"displayText":"timelineTime","export":true,"for_":["AnimationPlaybackEventInit"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"timelineTime","type":"dict-member","url":"#dom-animationplaybackeventinit-timelinetime"}, "#dom-animationtimeline-currenttime": {"displayText":"currentTime","export":true,"for_":["AnimationTimeline"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"currentTime","type":"attribute","url":"#dom-animationtimeline-currenttime"}, "#dom-animationtimeline-duration": {"displayText":"duration","export":true,"for_":["AnimationTimeline"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"duration","type":"attribute","url":"#dom-animationtimeline-duration"}, "#dom-animationtimeline-play": {"displayText":"play()","export":true,"for_":["AnimationTimeline"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"play()","type":"method","url":"#dom-animationtimeline-play"}, "#dom-animationtimeline-play-effect-effect": {"displayText":"effect","export":true,"for_":["AnimationTimeline/play(effect)"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"effect","type":"argument","url":"#dom-animationtimeline-play-effect-effect"}, "#dom-computedeffecttiming-activeduration": {"displayText":"activeDuration","export":true,"for_":["ComputedEffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"activeDuration","type":"dict-member","url":"#dom-computedeffecttiming-activeduration"}, "#dom-computedeffecttiming-endtime": {"displayText":"endTime","export":true,"for_":["ComputedEffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"endTime","type":"dict-member","url":"#dom-computedeffecttiming-endtime"}, "#dom-computedeffecttiming-localtime": {"displayText":"localTime","export":true,"for_":["ComputedEffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"localTime","type":"dict-member","url":"#dom-computedeffecttiming-localtime"}, "#dom-computedeffecttiming-starttime": {"displayText":"startTime","export":true,"for_":["ComputedEffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"startTime","type":"dict-member","url":"#dom-computedeffecttiming-starttime"}, "#dom-effecttiming-delay": {"displayText":"delay","export":true,"for_":["EffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"delay","type":"dict-member","url":"#dom-effecttiming-delay"}, "#dom-effecttiming-duration": {"displayText":"duration","export":true,"for_":["EffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"duration","type":"dict-member","url":"#dom-effecttiming-duration"}, "#dom-effecttiming-enddelay": {"displayText":"endDelay","export":true,"for_":["EffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"endDelay","type":"dict-member","url":"#dom-effecttiming-enddelay"}, "#dom-effecttiming-playbackrate": {"displayText":"playbackRate","export":true,"for_":["EffectTiming"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"playbackRate","type":"dict-member","url":"#dom-effecttiming-playbackrate"}, "#dom-groupeffect-append": {"displayText":"append()","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"append()","type":"method","url":"#dom-groupeffect-append"}, "#dom-groupeffect-children": {"displayText":"children","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"children","type":"attribute","url":"#dom-groupeffect-children"}, "#dom-groupeffect-clone": {"displayText":"clone()","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"clone()","type":"method","url":"#dom-groupeffect-clone"}, "#dom-groupeffect-firstchild": {"displayText":"firstChild","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"firstChild","type":"attribute","url":"#dom-groupeffect-firstchild"}, "#dom-groupeffect-groupeffect": {"displayText":"GroupEffect(children, timing)","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"GroupEffect(children, timing)","type":"constructor","url":"#dom-groupeffect-groupeffect"}, "#dom-groupeffect-groupeffect-children-timing-children": {"displayText":"children","export":true,"for_":["GroupEffect/GroupEffect(children, timing)"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"children","type":"argument","url":"#dom-groupeffect-groupeffect-children-timing-children"}, "#dom-groupeffect-groupeffect-children-timing-timing": {"displayText":"timing","export":true,"for_":["GroupEffect/GroupEffect(children, timing)"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"timing","type":"argument","url":"#dom-groupeffect-groupeffect-children-timing-timing"}, "#dom-groupeffect-lastchild": {"displayText":"lastChild","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"lastChild","type":"attribute","url":"#dom-groupeffect-lastchild"}, "#dom-groupeffect-prepend": {"displayText":"prepend()","export":true,"for_":["GroupEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"prepend()","type":"method","url":"#dom-groupeffect-prepend"}, "#dom-keyframeanimationoptions-rangeend": {"displayText":"rangeEnd","export":true,"for_":["KeyframeAnimationOptions"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"rangeEnd","type":"dict-member","url":"#dom-keyframeanimationoptions-rangeend"}, "#dom-keyframeanimationoptions-rangestart": {"displayText":"rangeStart","export":true,"for_":["KeyframeAnimationOptions"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"rangeStart","type":"dict-member","url":"#dom-keyframeanimationoptions-rangestart"}, "#dom-keyframeeffect-iterationcomposite": {"displayText":"iterationComposite","export":true,"for_":["KeyframeEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"iterationComposite","type":"attribute","url":"#dom-keyframeeffect-iterationcomposite"}, "#dom-keyframeeffect-keyframeeffect": {"displayText":"KeyframeEffect(target, keyframes, options)","export":true,"for_":["KeyframeEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"KeyframeEffect(target, keyframes, options)","type":"constructor","url":"#dom-keyframeeffect-keyframeeffect"}, "#dom-keyframeeffect-keyframeeffect-source": {"displayText":"KeyframeEffect(source)","export":true,"for_":["KeyframeEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"KeyframeEffect(source)","type":"constructor","url":"#dom-keyframeeffect-keyframeeffect-source"}, "#dom-keyframeeffectoptions-iterationcomposite": {"displayText":"iterationComposite","export":true,"for_":["KeyframeEffectOptions"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"iterationComposite","type":"dict-member","url":"#dom-keyframeeffectoptions-iterationcomposite"}, "#dom-sequenceeffect-clone": {"displayText":"clone()","export":true,"for_":["SequenceEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"clone()","type":"method","url":"#dom-sequenceeffect-clone"}, "#dom-sequenceeffect-sequenceeffect": {"displayText":"SequenceEffect(children)","export":true,"for_":["SequenceEffect"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"SequenceEffect(children)","type":"constructor","url":"#dom-sequenceeffect-sequenceeffect"}, "#dom-timelinerangeoffset-offset": {"displayText":"offset","export":true,"for_":["TimelineRangeOffset"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"offset","type":"dict-member","url":"#dom-timelinerangeoffset-offset"}, "#dom-timelinerangeoffset-rangename": {"displayText":"rangeName","export":true,"for_":["TimelineRangeOffset"],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"rangeName","type":"dict-member","url":"#dom-timelinerangeoffset-rangename"}, "#end-time": {"displayText":"end time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"end time","type":"dfn","url":"#end-time"}, "#enumdef-iterationcompositeoperation": {"displayText":"IterationCompositeOperation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"IterationCompositeOperation","type":"enum","url":"#enumdef-iterationcompositeoperation"}, "#first-child": {"displayText":"first child","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"first child","type":"dfn","url":"#first-child"}, "#group-effect": {"displayText":"group effect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"group effect","type":"dfn","url":"#group-effect"}, "#groupeffect": {"displayText":"GroupEffect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"GroupEffect","type":"interface","url":"#groupeffect"}, "#in-play": {"displayText":"in play","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"in play","type":"dfn","url":"#in-play"}, "#inclusive-ancestor": {"displayText":"inclusive ancestor","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"inclusive ancestor","type":"dfn","url":"#inclusive-ancestor"}, "#inclusive-descendant": {"displayText":"inclusive descendant","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"inclusive descendant","type":"dfn","url":"#inclusive-descendant"}, "#inherited-time": {"displayText":"inherited time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"inherited time","type":"dfn","url":"#inherited-time"}, "#insert-children": {"displayText":"insert children","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"insert children","type":"dfn","url":"#insert-children"}, "#intrinsic-iteration-duration": {"displayText":"intrinsic iteration duration","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"intrinsic iteration duration","type":"dfn","url":"#intrinsic-iteration-duration"}, "#iteration-composite-operation": {"displayText":"iteration composite operation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"iteration composite operation","type":"dfn","url":"#iteration-composite-operation"}, "#iteration-composite-operation-accumulate": {"displayText":"iteration composite operation accumulate","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"iteration composite operation accumulate","type":"dfn","url":"#iteration-composite-operation-accumulate"}, "#iteration-composite-operation-replace": {"displayText":"iteration composite operation replace","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"iteration composite operation replace","type":"dfn","url":"#iteration-composite-operation-replace"}, "#iterationcompositeoperation": {"displayText":"iterationcompositeoperation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"iterationcompositeoperation","type":"dfn","url":"#iterationcompositeoperation"}, "#last-child": {"displayText":"last child","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"last child","type":"dfn","url":"#last-child"}, "#local-time": {"displayText":"local time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"local time","type":"dfn","url":"#local-time"}, "#next-sibling": {"displayText":"next sibling","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"next sibling","type":"dfn","url":"#next-sibling"}, "#next-sibling-not-included": {"displayText":"next sibling not included","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"next sibling not included","type":"dfn","url":"#next-sibling-not-included"}, "#normalize-specified-timing": {"displayText":"normalize specified timing","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"normalize specified timing","type":"dfn","url":"#normalize-specified-timing"}, "#parent-group": {"displayText":"parent group","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"parent group","type":"dfn","url":"#parent-group"}, "#pending-play-task": {"displayText":"pending play task","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"pending play task","type":"dfn","url":"#pending-play-task"}, "#play-an-animation": {"displayText":"play an animation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"play an animation","type":"dfn","url":"#play-an-animation"}, "#previous-sibling": {"displayText":"previous sibling","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"previous sibling","type":"dfn","url":"#previous-sibling"}, "#process-a-timing-argument": {"displayText":"process a timing argument","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"process a timing argument","type":"dfn","url":"#process-a-timing-argument"}, "#progress-based-timeline": {"displayText":"progress-based timeline","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"progress-based timeline","type":"dfn","url":"#progress-based-timeline"}, "#ready": {"displayText":"ready","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"ready","type":"dfn","url":"#ready"}, "#remove-an-animation-effect": {"displayText":"remove an animation effect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"remove an animation effect","type":"dfn","url":"#remove-an-animation-effect"}, "#repeated-duration": {"displayText":"repeated duration","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"repeated duration","type":"dfn","url":"#repeated-duration"}, "#root": {"displayText":"root","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"root","type":"dfn","url":"#root"}, "#sequence-effect": {"displayText":"sequence effect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"sequence effect","type":"dfn","url":"#sequence-effect"}, "#sequenceeffect": {"displayText":"SequenceEffect","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"SequenceEffect","type":"interface","url":"#sequenceeffect"}, "#set-the-current-time": {"displayText":"set the current time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"set the current time","type":"dfn","url":"#set-the-current-time"}, "#set-the-start-time": {"displayText":"set the start time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"set the start time","type":"dfn","url":"#set-the-start-time"}, "#silently-set-the-current-time": {"displayText":"silently set the current time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"silently set the current time","type":"dfn","url":"#silently-set-the-current-time"}, "#specified-end-delay": {"displayText":"specified end delay","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"specified end delay","type":"dfn","url":"#specified-end-delay"}, "#specified-iteration-duration": {"displayText":"specified iteration duration","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"specified iteration duration","type":"dfn","url":"#specified-iteration-duration"}, "#specified-start-delay": {"displayText":"specified start delay","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"specified start delay","type":"dfn","url":"#specified-start-delay"}, "#start-delay": {"displayText":"start delay","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"start delay","type":"dfn","url":"#start-delay"}, "#time-based-animation-to-a-proportional-animation": {"displayText":"time-based animation to a proportional animation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"time-based animation to a proportional animation","type":"dfn","url":"#time-based-animation-to-a-proportional-animation"}, "#timeline-duration": {"displayText":"timeline duration","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"timeline duration","type":"dfn","url":"#timeline-duration"}, "#transformed-time": {"displayText":"transformed time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"transformed time","type":"dfn","url":"#transformed-time"}, "#tree-order": {"displayText":"tree order","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"tree order","type":"dfn","url":"#tree-order"}, "#validate-a-cssnumberish-time": {"displayText":"validate a cssnumberish time","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"local","text":"validate a cssnumberish time","type":"dfn","url":"#validate-a-cssnumberish-time"}, "https://dom.spec.whatwg.org/#dictdef-eventinit": {"displayText":"EventInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"EventInit","type":"dictionary","url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "https://dom.spec.whatwg.org/#element": {"displayText":"Element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Element","type":"interface","url":"https://dom.spec.whatwg.org/#element"}, "https://dom.spec.whatwg.org/#event": {"displayText":"Event","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Event","type":"interface","url":"https://dom.spec.whatwg.org/#event"}, "https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue": {"displayText":"CSSKeywordValue","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"CSSKeywordValue","type":"interface","url":"https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue": {"displayText":"CSSNumericValue","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"CSSNumericValue","type":"interface","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue"}, "https://drafts.css-houdini.org/css-typed-om-1/#dom-csskeywordvalue-value": {"displayText":"value","export":true,"for_":["CSSKeywordValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"value","type":"attribute","url":"https://drafts.css-houdini.org/css-typed-om-1/#dom-csskeywordvalue-value"}, "https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish": {"displayText":"CSSNumberish","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"CSSNumberish","type":"typedef","url":"https://drafts.css-houdini.org/css-typed-om-1/#typedefdef-cssnumberish"}, "https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes": {"displayText":"@keyframes","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"@keyframes","type":"at-rule","url":"https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes"}, "https://drafts.csswg.org/css-animations-1/#typedef-keyframe-selector": {"displayText":"<keyframe-selector>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"<keyframe-selector>","type":"type","url":"https://drafts.csswg.org/css-animations-1/#typedef-keyframe-selector"}, "https://drafts.csswg.org/css-display-4/#propdef-visibility": {"displayText":"visibility","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visibility","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "https://drafts.csswg.org/css-easing-2/#easing-function": {"displayText":"timing function","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"current","text":"timing function","type":"dfn","url":"https://drafts.csswg.org/css-easing-2/#easing-function"}, "https://drafts.csswg.org/css-easing-2/#easing-function-before-flag": {"displayText":"before flag","export":true,"for_":["easing function"],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"current","text":"before flag","type":"dfn","url":"https://drafts.csswg.org/css-easing-2/#easing-function-before-flag"}, "https://drafts.csswg.org/css-pseudo-4/#csspseudoelement": {"displayText":"CSSPseudoElement","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"CSSPseudoElement","type":"interface","url":"https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"}, "https://drafts.csswg.org/css-transitions-1/#transition-start-time": {"displayText":"start time","export":true,"for_":["transition"],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"current","text":"start time","type":"dfn","url":"https://drafts.csswg.org/css-transitions-1/#transition-start-time"}, "https://drafts.csswg.org/css-values-4/#accumulation": {"displayText":"value accumulation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"value accumulation","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#accumulation"}, "https://drafts.csswg.org/css-values-4/#time-value": {"displayText":"<time>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<time>","type":"type","url":"https://drafts.csswg.org/css-values-4/#time-value"}, "https://drafts.csswg.org/cssom-1/#cssomstring": {"displayText":"CSSOMString","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"CSSOMString","type":"interface","url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range": {"displayText":"animation attachment range","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"current","text":"animation attachment range","type":"dfn","url":"https://drafts.csswg.org/scroll-animations-1/#animation-attachment-range"}, "https://drafts.csswg.org/scroll-animations-1/#html-processing-model-event-loops": {"displayText":"html-processing-model-event-loops","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"anchor-block","text":"html-processing-model-event-loops","type":"dfn","url":"https://drafts.csswg.org/scroll-animations-1/#html-processing-model-event-loops"}, "https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end": {"displayText":"animation-range-end","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"current","text":"animation-range-end","type":"property","url":"https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end"}, "https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start": {"displayText":"animation-range-start","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"current","text":"animation-range-start","type":"property","url":"https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start"}, "https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations": {"displayText":"scroll-driven animations","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"current","text":"scroll-driven animations","type":"dfn","url":"https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations"}, "https://drafts.csswg.org/web-animations-1/#active-after-boundary-time": {"displayText":"active-after boundary time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"active-after boundary time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#active-after-boundary-time"}, "https://drafts.csswg.org/web-animations-1/#active-interval": {"displayText":"active interval","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"active interval","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#active-interval"}, "https://drafts.csswg.org/web-animations-1/#active-time": {"displayText":"active time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"active time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#active-time"}, "https://drafts.csswg.org/web-animations-1/#animation": {"displayText":"animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"animation","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation"}, "https://drafts.csswg.org/web-animations-1/#animation-associated-effect": {"displayText":"associated effect","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"associated effect","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-associated-effect"}, "https://drafts.csswg.org/web-animations-1/#animation-current-time": {"displayText":"current time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"current time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-current-time"}, "https://drafts.csswg.org/web-animations-1/#animation-direction": {"displayText":"animation direction","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"animation direction","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-direction"}, "https://drafts.csswg.org/web-animations-1/#animation-effect": {"displayText":"animation effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"animation effect","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-effect"}, "https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase": {"displayText":"active phase","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"active phase","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-effect-active-phase"}, "https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase": {"displayText":"after phase","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"after phase","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-effect-after-phase"}, "https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase": {"displayText":"before phase","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"before phase","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-effect-before-phase"}, "https://drafts.csswg.org/web-animations-1/#animation-hold-time": {"displayText":"hold time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"hold time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-hold-time"}, "https://drafts.csswg.org/web-animations-1/#animation-play-state": {"displayText":"play state","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"play state","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-play-state"}, "https://drafts.csswg.org/web-animations-1/#animation-start-time": {"displayText":"start time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"start time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-start-time"}, "https://drafts.csswg.org/web-animations-1/#animationeffect": {"displayText":"AnimationEffect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"AnimationEffect","type":"interface","url":"https://drafts.csswg.org/web-animations-1/#animationeffect"}, "https://drafts.csswg.org/web-animations-1/#animationtimeline": {"displayText":"AnimationTimeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"AnimationTimeline","type":"interface","url":"https://drafts.csswg.org/web-animations-1/#animationtimeline"}, "https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate": {"displayText":"Apply any pending playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"apply any pending playback rate","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#apply-any-pending-playback-rate"}, "https://drafts.csswg.org/web-animations-1/#associated-effect-end": {"displayText":"associated effect end","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"associated effect end","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#associated-effect-end"}, "https://drafts.csswg.org/web-animations-1/#before-active-boundary-time": {"displayText":"before-active boundary time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"before-active boundary time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#before-active-boundary-time"}, "https://drafts.csswg.org/web-animations-1/#current-finished-promise": {"displayText":"current finished promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"current finished promise","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#current-finished-promise"}, "https://drafts.csswg.org/web-animations-1/#current-iteration": {"displayText":"current iteration","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"current iteration","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#current-iteration"}, "https://drafts.csswg.org/web-animations-1/#current-ready-promise": {"displayText":"current ready promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"current ready promise","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#current-ready-promise"}, "https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming": {"displayText":"ComputedEffectTiming","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"ComputedEffectTiming","type":"dictionary","url":"https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming"}, "https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming": {"displayText":"EffectTiming","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"EffectTiming","type":"dictionary","url":"https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming"}, "https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions": {"displayText":"KeyframeAnimationOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"KeyframeAnimationOptions","type":"dictionary","url":"https://drafts.csswg.org/web-animations-1/#dictdef-keyframeanimationoptions"}, "https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions": {"displayText":"KeyframeEffectOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"KeyframeEffectOptions","type":"dictionary","url":"https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions"}, "https://drafts.csswg.org/web-animations-1/#dictdef-optionaleffecttiming": {"displayText":"OptionalEffectTiming","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"OptionalEffectTiming","type":"dictionary","url":"https://drafts.csswg.org/web-animations-1/#dictdef-optionaleffecttiming"}, "https://drafts.csswg.org/web-animations-1/#directed-progress": {"displayText":"directed progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"directed progress","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#directed-progress"}, "https://drafts.csswg.org/web-animations-1/#dom-animation-animation": {"displayText":"Animation()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"Animation()","type":"constructor","url":"https://drafts.csswg.org/web-animations-1/#dom-animation-animation"}, "https://drafts.csswg.org/web-animations-1/#dom-effecttiming-direction": {"displayText":"direction","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"direction","type":"dict-member","url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-direction"}, "https://drafts.csswg.org/web-animations-1/#dom-effecttiming-easing": {"displayText":"easing","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"easing","type":"dict-member","url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-easing"}, "https://drafts.csswg.org/web-animations-1/#dom-effecttiming-fill": {"displayText":"fill","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"fill","type":"dict-member","url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-fill"}, "https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterations": {"displayText":"iterations","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"iterations","type":"dict-member","url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterations"}, "https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterationstart": {"displayText":"iterationStart","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"iterationStart","type":"dict-member","url":"https://drafts.csswg.org/web-animations-1/#dom-effecttiming-iterationstart"}, "https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite": {"displayText":"composite","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"composite","type":"attribute","url":"https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite"}, "https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source": {"displayText":"source","export":true,"for_":["KeyframeEffect/KeyframeEffect(source)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"source","type":"argument","url":"https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source"}, "https://drafts.csswg.org/web-animations-1/#effect-target-target-element": {"displayText":"target element","export":true,"for_":["effect target"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"target element","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#effect-target-target-element"}, "https://drafts.csswg.org/web-animations-1/#effect-value": {"displayText":"effect value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"effect value","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#effect-value"}, "https://drafts.csswg.org/web-animations-1/#effective-playback-rate": {"displayText":"effective playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"effective playback rate","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#effective-playback-rate"}, "https://drafts.csswg.org/web-animations-1/#end-delay": {"displayText":"end delay","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"end delay","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#end-delay"}, "https://drafts.csswg.org/web-animations-1/#fill-mode": {"displayText":"fill mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"fill mode","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#fill-mode"}, "https://drafts.csswg.org/web-animations-1/#in-effect": {"displayText":"in effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"in effect","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#in-effect"}, "https://drafts.csswg.org/web-animations-1/#inactive-timeline": {"displayText":"inactive timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"inactive timeline","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#inactive-timeline"}, "https://drafts.csswg.org/web-animations-1/#iteration-count": {"displayText":"iteration count","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"iteration count","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#iteration-count"}, "https://drafts.csswg.org/web-animations-1/#iteration-duration": {"displayText":"iteration duration","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"iteration duration","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#iteration-duration"}, "https://drafts.csswg.org/web-animations-1/#iteration-progress": {"displayText":"iteration progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"iteration progress","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#iteration-progress"}, "https://drafts.csswg.org/web-animations-1/#iteration-start": {"displayText":"iteration start","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"iteration start","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#iteration-start"}, "https://drafts.csswg.org/web-animations-1/#keyframe-effect": {"displayText":"keyframe effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"keyframe effect","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#keyframe-effect"}, "https://drafts.csswg.org/web-animations-1/#keyframeeffect": {"displayText":"KeyframeEffect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"KeyframeEffect","type":"interface","url":"https://drafts.csswg.org/web-animations-1/#keyframeeffect"}, "https://drafts.csswg.org/web-animations-1/#monotonically-increasing-timeline": {"displayText":"monotonically increasing timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"monotonically increasing timeline","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#monotonically-increasing-timeline"}, "https://drafts.csswg.org/web-animations-1/#not-animatable": {"displayText":"not animatable","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"not animatable","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#not-animatable"}, "https://drafts.csswg.org/web-animations-1/#overall-progress": {"displayText":"overall progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"overall progress","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#overall-progress"}, "https://drafts.csswg.org/web-animations-1/#pause-an-animation": {"displayText":"pause an animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"pause an animation","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#pause-an-animation"}, "https://drafts.csswg.org/web-animations-1/#pending-pause-task": {"displayText":"pending pause task","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"pending pause task","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#pending-pause-task"}, "https://drafts.csswg.org/web-animations-1/#pending-playback-rate": {"displayText":"pending playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"pending playback rate","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#pending-playback-rate"}, "https://drafts.csswg.org/web-animations-1/#play-state-finished": {"displayText":"finished","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"finished","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#play-state-finished"}, "https://drafts.csswg.org/web-animations-1/#play-state-idle": {"displayText":"idle","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"idle","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#play-state-idle"}, "https://drafts.csswg.org/web-animations-1/#playback-direction": {"displayText":"playback direction","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"playback direction","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#playback-direction"}, "https://drafts.csswg.org/web-animations-1/#simple-iteration-progress": {"displayText":"simple iteration progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"simple iteration progress","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#simple-iteration-progress"}, "https://drafts.csswg.org/web-animations-1/#target-property": {"displayText":"target property","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"target property","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#target-property"}, "https://drafts.csswg.org/web-animations-1/#time-value": {"displayText":"time value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"time value","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#time-value"}, "https://drafts.csswg.org/web-animations-1/#timeline": {"displayText":"timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"timeline","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#timeline"}, "https://drafts.csswg.org/web-animations-1/#timeline-current-time": {"displayText":"current time","export":true,"for_":["timeline"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"current time","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#timeline-current-time"}, "https://drafts.csswg.org/web-animations-1/#transformed-progress": {"displayText":"transformed progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"transformed progress","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#transformed-progress"}, "https://drafts.csswg.org/web-animations-1/#unresolved": {"displayText":"unresolved","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"unresolved","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#unresolved"}, "https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state": {"displayText":"update an animation's finished state","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"update an animation's finished state","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state"}, "https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events": {"displayText":"update animations and send events","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"update animations and send events","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events"}, "https://drafts.csswg.org/web-animations-1/#update-the-timing-properties-of-an-animation-effect": {"displayText":"update the timing properties of an animation effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"anchor-block","text":"update the timing properties of an animation effect","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#update-the-timing-properties-of-an-animation-effect"}, "https://html.spec.whatwg.org/multipage/canvas.html#canvas": {"displayText":"canvas","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"canvas","type":"element","url":"https://html.spec.whatwg.org/multipage/canvas.html#canvas"}, "https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm": {"displayText":"relevant realm","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"relevant realm","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm"}, "https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint": {"displayText":"perform a microtask checkpoint","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"perform a microtask checkpoint","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint"}, "https://infra.spec.whatwg.org/#map-exists": {"displayText":"exist","export":true,"for_":["map"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"exist","type":"dfn","url":"https://infra.spec.whatwg.org/#map-exists"}, "https://webidl.spec.whatwg.org/#Exposed": {"displayText":"Exposed","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Exposed","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Exposed"}, "https://webidl.spec.whatwg.org/#a-new-promise": {"displayText":"a new promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"a new promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#a-new-promise"}, "https://webidl.spec.whatwg.org/#dfn-throw": {"displayText":"throw","export":true,"for_":["exception"],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"throw","type":"dfn","url":"https://webidl.spec.whatwg.org/#dfn-throw"}, "https://webidl.spec.whatwg.org/#idl-DOMException": {"displayText":"DOMException","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"DOMException","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, "https://webidl.spec.whatwg.org/#idl-DOMString": {"displayText":"DOMString","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"DOMString","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-DOMString"}, "https://webidl.spec.whatwg.org/#idl-double": {"displayText":"double","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"double","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-double"}, "https://webidl.spec.whatwg.org/#idl-sequence": {"displayText":"sequence","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"sequence","type":"dfn","url":"https://webidl.spec.whatwg.org/#idl-sequence"}, "https://webidl.spec.whatwg.org/#idl-undefined": {"displayText":"undefined","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"undefined","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-undefined"}, "https://webidl.spec.whatwg.org/#idl-unrestricted-double": {"displayText":"unrestricted double","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"unrestricted double","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-unrestricted-double"}, "https://webidl.spec.whatwg.org/#idl-unsigned-long": {"displayText":"unsigned long","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"unsigned long","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-unsigned-long"}, "https://webidl.spec.whatwg.org/#invalidstateerror": {"displayText":"InvalidStateError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"InvalidStateError","type":"exception","url":"https://webidl.spec.whatwg.org/#invalidstateerror"}, "https://webidl.spec.whatwg.org/#resolve": {"displayText":"resolve a promise","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"resolve a promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#resolve"}, "https://www.w3.org/TR/css-easing-1/#linear-easing-function": {"displayText":"linear timing function","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-easing","spec":"css-easing-1","status":"snapshot","text":"linear timing function","type":"dfn","url":"https://www.w3.org/TR/css-easing-1/#linear-easing-function"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <script>/* Boilerplate: script-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script>