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</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 47d87adb7, updated Tue Feb 18 17:18:43 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/web-animations-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="f170bb8cdac94fe7dc0d67b84b2c8be6e9891640" 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; } .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' } .param, .exceptionname, .estype, .esvalue { font-weight: bold; } .formula { display: block; margin: .5em 2em; } </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-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</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2025-01-31">31 January 2025</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-1/">https://drafts.csswg.org/web-animations-1/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2023/WD-web-animations-1-20230605/" rel="prev">https://www.w3.org/TR/2023/WD-web-animations-1-20230605/</a> <dd><a href="https://www.w3.org/TR/2021/WD-web-animations-1-20220908/" rel="prev">https://www.w3.org/TR/2021/WD-web-animations-1-20220908/</a> <dd><a href="https://www.w3.org/TR/2021/WD-web-animations-1-20210518/" rel="prev">https://www.w3.org/TR/2021/WD-web-animations-1-20210518/</a> <dd><a href="https://www.w3.org/TR/2018/WD-web-animations-1-20181011/" rel="prev">https://www.w3.org/TR/2018/WD-web-animations-1-20181011/</a> <dd><a href="https://www.w3.org/TR/2016/WD-web-animations-1-20160913/" rel="prev">https://www.w3.org/TR/2016/WD-web-animations-1-20160913/</a> <dd><a href="https://www.w3.org/TR/2015/WD-web-animations-1-20150707/" rel="prev">https://www.w3.org/TR/2015/WD-web-animations-1-20150707/</a> <dd><a href="https://www.w3.org/TR/2014/WD-web-animations-20140605/" rel="prev">https://www.w3.org/TR/2014/WD-web-animations-20140605/</a> <dd><a href="https://www.w3.org/TR/2013/WD-web-animations-20130625/" rel="prev">https://www.w3.org/TR/2013/WD-web-animations-20130625/</a> <dt>Version History: <dd><a href="https://github.com/w3c/csswg-drafts/commits/main/web-animations-1">https://github.com/w3c/csswg-drafts/commits/main/web-animations-1</a> <dt>Test Suite: <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/web-animations">https://github.com/web-platform-tests/wpt/tree/master/web-animations</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations-1">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) <dd class="editor p-author h-card vcard" data-editor-id="96463"><a class="p-name fn u-email email" href="mailto:smcgruer@google.com">Stephen McGruer</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="51377"><a class="p-name fn u-email email" href="mailto:graouts@apple.com">Antoine Quint</a> (Apple Inc) <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) <dd class="editor p-author h-card vcard" data-editor-id="31960"><a class="p-name fn u-email email" href="mailto:adanilo@google.com">Alex Danilo</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-email email" href="mailto:jackalmage@gmail.com">Tab Atkins</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/web-animations-1/Overview.bs">GitHub Editor</a> <dt>Participate: <dd><a href="https://github.com/w3c/csswg-drafts/tree/main/web-animations-1">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 </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2025 <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. It also defines an application programming interface (API) for interacting with this model and it is expected that other 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="#introduction">1 Introduction</a> <ol class="toc"> <li><a href="#use-cases">1.1 Use cases</a> <li><a href="#relationship-to-other-specifications">1.2 Relationship to other specifications</a> <li><a href="#overview-of-this-specification">1.3 Overview of this specification</a> </ol> <li><a href="#spec-conventions">2 Specification conventions</a> <li><a href="#web-animations-model-overview">3 Web Animations model overview</a> <li> <a href="#timing-model">4 Timing model</a> <ol class="toc"> <li> <a href="#timing-model-overview">4.1 Timing model characteristics</a> <ol class="toc"> <li><a href="#stateless">4.1.1 Stateless</a> <li><a href="#hierarchical">4.1.2 Hierarchical</a> </ol> <li><a href="#time-value-section">4.2 Time values</a> <li> <a href="#timelines">4.3 Timelines</a> <ol class="toc"> <li> <a href="#document-timelines">4.3.1 Document timelines</a> <ol class="toc"> <li><a href="#the-documents-default-timeline">4.3.1.1 The default document timeline</a> <li><a href="#document-wallclock-time">4.3.1.2 Relationship to wall-clock time</a> </ol> </ol> <li><a href="#animation-frame-loop">4.4 Animation Frames</a> <li> <a href="#animations">4.5 Animations</a> <ol class="toc"> <li><a href="#the-current-time-of-an-animation">4.5.1 Calculating the current time of an animation</a> <li><a href="#setting-the-timeline">4.5.2 Setting the timeline of an animation</a> <li><a href="#setting-the-associated-effect">4.5.3 Setting the associated effect of an animation</a> <li><a href="#setting-the-current-time-of-an-animation">4.5.4 Setting the current time of an animation</a> <li><a href="#setting-the-start-time-of-an-animation">4.5.5 Setting the start time of an animation</a> <li><a href="#waiting-for-the-associated-effect">4.5.6 Waiting for the associated effect</a> <li><a href="#the-current-ready-promise">4.5.7 The current ready promise</a> <li><a href="#playing-an-animation-section">4.5.8 Playing an animation</a> <li><a href="#pausing-an-animation-section">4.5.9 Pausing an animation</a> <li><a href="#reaching-the-end">4.5.10 Reaching the end</a> <li><a href="#the-current-finished-promise">4.5.11 The current finished promise</a> <li><a href="#updating-the-finished-state">4.5.12 Updating the finished state</a> <li><a href="#finishing-an-animation-section">4.5.13 Finishing an animation</a> <li><a href="#canceling-an-animation-section">4.5.14 Canceling an animation</a> <li> <a href="#speed-control">4.5.15 Speed control</a> <ol class="toc"> <li><a href="#setting-the-playback-rate-of-an-animation">4.5.15.1 Setting the playback rate of an animation</a> <li><a href="#seamlessly-updating-the-playback-rate-of-an-animation">4.5.15.2 Seamlessly updating the playback rate of an animation</a> </ol> <li><a href="#reversing-an-animation-section">4.5.16 Reversing an animation</a> <li><a href="#play-states">4.5.17 Play states</a> <li> <a href="#animation-events-section">4.5.18 Animation events</a> <ol class="toc"> <li><a href="#sorting-animation-events">4.5.18.1 Sorting animation events</a> <li><a href="#animation-playback-events-section">4.5.18.2 Animation playback events</a> <li><a href="#animation-playback-event-types">4.5.18.3 Types of animation playback events</a> </ol> </ol> <li> <a href="#animation-effects">4.6 Animation effects</a> <ol class="toc"> <li><a href="#types-of-animation-effects">4.6.1 Types of animation effects</a> <li><a href="#animation-effects-and-animations">4.6.2 Associated animation and timeline</a> <li><a href="#local-time-section">4.6.3 Local time</a> <li><a href="#effect-time-spaces">4.6.4 Time spaces</a> <li> <a href="#the-active-interval">4.6.5 The active interval</a> <ol class="toc"> <li><a href="#the-start-delay">4.6.5.1 The start delay</a> <li><a href="#the-active-duration">4.6.5.2 The active duration</a> <li><a href="#the-end-delay">4.6.5.3 The end delay and animation effect end time</a> </ol> <li><a href="#animation-effect-phases-and-states">4.6.6 Animation effect phases and states</a> <li><a href="#relevant-animations-section">4.6.7 Relevant animations</a> <li><a href="#fill-behavior">4.6.8 Fill behavior and fill modes</a> <li> <a href="#repeating">4.6.9 Repeating</a> <ol class="toc"> <li><a href="#iteration-intervals">4.6.9.1 Iteration intervals</a> <li><a href="#controlling-iteration">4.6.9.2 Controlling iteration</a> <li><a href="#interval-timing">4.6.9.3 Interval timing</a> </ol> <li><a href="#direction-control">4.6.10 Direction control</a> <li><a href="#time-transformations">4.6.11 Easing (effect timing transformations)</a> </ol> <li> <a href="#core-animation-effect-calculations">4.7 Calculating progress</a> <ol class="toc"> <li><a href="#animation-effect-calculations-overview">4.7.1 Overview</a> <li><a href="#calculating-the-active-time">4.7.2 Calculating the active time</a> <li><a href="#calculating-the-overall-progress">4.7.3 Calculating the overall progress</a> <li><a href="#calculating-the-simple-iteration-progress">4.7.4 Calculating the simple iteration progress</a> <li><a href="#calculating-the-current-iteration">4.7.5 Calculating the current iteration index</a> <li><a href="#calculating-the-directed-progress">4.7.6 Calculating the directed progress</a> <li><a href="#calculating-the-transformed-progress">4.7.7 Calculating the transformed progress</a> <li><a href="#the-iteration-progress">4.7.8 Yielding the iteration progress</a> </ol> </ol> <li> <a href="#animation-model">5 Animation model</a> <ol class="toc"> <li><a href="#introduction-to-the-animation-model">5.1 Introduction</a> <li> <a href="#animating-properties">5.2 Animating properties</a> <ol class="toc"> <li><a href="#custom-properties">5.2.1 Custom Properties</a> </ol> <li> <a href="#keyframe-effects">5.3 Keyframe effects</a> <ol class="toc"> <li><a href="#keyframes-section">5.3.1 Keyframes</a> <li><a href="#computing-property-values">5.3.2 Computing property values</a> <li><a href="#calculating-computed-keyframes">5.3.3 Calculating computed keyframes</a> <li><a href="#the-effect-value-of-a-keyframe-animation-effect">5.3.4 The effect value of a keyframe effect</a> </ol> <li> <a href="#combining-effects">5.4 Combining effects</a> <ol class="toc"> <li><a href="#animation-classes">5.4.1 Animation classes</a> <li><a href="#the-effect-stack">5.4.2 The effect stack</a> <li><a href="#calculating-the-result-of-an-effect-stack">5.4.3 Calculating the result of an effect stack</a> <li><a href="#effect-composition">5.4.4 Effect composition</a> <li><a href="#applying-the-composited-result">5.4.5 Applying the composited result</a> </ol> <li> <a href="#replacing-animations">5.5 Replacing animations</a> <ol class="toc"> <li><a href="#animation-replace-state">5.5.1 Replace state</a> <li><a href="#removing-replaced-animations">5.5.2 Removing replaced animations</a> </ol> <li><a href="#side-effects-section">5.6 Side effects of animation</a> </ol> <li> <a href="#programming-interface">6 Programming interface</a> <ol class="toc"> <li><a href="#time-values-in-the-programming-interface">6.1 Time values in the programming interface</a> <li><a href="#the-animationtimeline-interface">6.2 The <code class="idl">AnimationTimeline</code> interface</a> <li><a href="#the-documenttimeline-interface">6.3 The <code class="idl">DocumentTimeline</code> interface</a> <li> <a href="#the-animation-interface">6.4 The <code class="idl">Animation</code> interface</a> <ol class="toc"> <li><a href="#the-animationplaystate-enumeration">6.4.1 The <code class="idl">AnimationPlayState</code> enumeration</a> <li><a href="#the-animationreplacestate-enumeration">6.4.2 The <code class="idl">AnimationReplaceState</code> enumeration</a> </ol> <li> <a href="#the-animationeffect-interface">6.5 The <code class="idl">AnimationEffect</code> interface</a> <ol class="toc"> <li><a href="#the-effecttiming-dictionaries">6.5.1 The <code class="idl">EffectTiming</code> and <code class="idl">OptionalEffectTiming</code> dictionaries</a> <li><a href="#the-fillmode-enumeration">6.5.2 The <code class="idl">FillMode</code> enumeration</a> <li><a href="#the-playbackdirection-enumeration">6.5.3 The <code class="idl">PlaybackDirection</code> enumeration</a> <li><a href="#updating-animationeffect-timing">6.5.4 Updating the timing of an <code class="idl">AnimationEffect</code></a> <li><a href="#the-computedeffecttiming-dictionary">6.5.5 The <code>ComputedEffectTiming</code> dictionary</a> </ol> <li> <a href="#the-keyframeeffect-interface">6.6 The <code class="idl">KeyframeEffect</code> interface</a> <ol class="toc"> <li><a href="#creating-a-new-keyframeeffect-object">6.6.1 Creating a new <code>KeyframeEffect</code> object</a> <li><a href="#property-name-conversion">6.6.2 Property names and IDL names</a> <li><a href="#processing-a-keyframes-argument">6.6.3 Processing a <code>keyframes</code> argument</a> <li><a href="#the-keyframeeffectoptions-dictionary">6.6.4 The <code class="idl">KeyframeEffectOptions</code> dictionary</a> </ol> <li><a href="#the-compositeoperation-enumeration">6.7 The <code class="idl">CompositeOperation</code> and <code class="idl">CompositeOperationOrAuto</code> enumerations</a> <li><a href="#the-animatable-interface-mixin">6.8 The <code>Animatable</code> interface mixin</a> <li><a href="#extensions-to-the-document-interface">6.9 Extensions to the <code class="idl">Document</code> interface</a> <li><a href="#extensions-to-the-documentorshadowroot-interface-mixin">6.10 Extensions to the <code class="idl">DocumentOrShadowRoot</code> interface mixin</a> <li><a href="#extensions-to-the-element-interface">6.11 Extensions to the <code class="idl">Element</code> interface</a> <li><a href="#the-animationplaybackevent-interface">6.12 The <code class="idl">AnimationPlaybackEvent</code> interface</a> <li><a href="#model-liveness">6.13 Model liveness</a> </ol> <li><a href="#integration-with-media-fragments">7 Integration with Media Fragments</a> <li><a href="#interaction-with-page-display">8 Interaction with page display</a> <li> <a href="#implementation-requirements">9 Implementation requirements</a> <ol class="toc"> <li><a href="#precision-of-time-values">9.1 Precision of time values</a> <li><a href="#conformance-criteria">9.2 Conformance criteria</a> </ol> <li><a href="#acknowledgements">10 Acknowledgements</a> <li><a href="#changes-since-last-publication">11 Changes since last publication</a> <li> <a href="#animation-types"> Appendix A: Animation types of existing properties</a> <ol class="toc"> <li><a href="#animating-font-weight"> Animation of font-weight</a> <li><a href="#animating-visibility"> Animation of visibility</a> <li><a href="#animating-shadow-lists"> Animation of box-shadow and text-shadow</a> </ol> <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> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <script type="text/x-mathjax-config"> MathJax.Hub.Config({showMathMenu: false}); </script> <script src="https://www.w3.org/scripts/MathJax/2/MathJax.js?config=MML_SVG"></script> <h2 class="heading settled" data-level="1" id="introduction">1. Introduction<a class="self-link" href="#introduction"></a></h2> <div class="informative-bg"> This section is non-normative This specification defines a model (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="web-animations-model">Web Animations model</dfn>) for supporting animation and synchronization on the Web platform. It is intended that other specifications will build on this model and expose its features through declarative means. In addition, this specification also defines a programming interface to the model (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="web-animations-api">Web Animations <abbr title="Application Programming Interface">API</abbr></dfn>, defined in <a href="#programming-interface">§ 6 Programming interface</a>) that may be implemented by user agents that provide support for scripting. <h3 class="heading settled" data-level="1.1" id="use-cases">1.1. Use cases<a class="self-link" href="#use-cases"></a></h3> The <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model">Web Animations model</a> is intended to provide the features necessary for expressing CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1" title="CSS Transitions">[CSS-TRANSITIONS-1]</a>, CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a>, and SVG <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>. As such, the use cases of the Web Animations model are the union of use cases for those three specifications. The use cases for the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api">Web Animations API</a> include the following: <dl> <dt data-md>Inspecting running animations <dd data-md> Often Web applications need to wait for certain animated effects to complete before updating some state. The <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api①">Web Animations API</a> allows such applications to wait for all currently running animation to complete, regardless of whether they are defined by CSS Transitions, CSS Animations, SVG animations, or created directly using the Web Animations API. <div class="example" id="example-e8eccc9e"> <a class="self-link" href="#example-e8eccc9e"></a> <pre class="highlight"><c- c1>// Wait until all animations have finished before removing the element</c-> Promise<c- p>.</c->all<c- p>(</c-> elem<c- p>.</c->getAnimations<c- p>().</c->map<c- p>(</c->animation <c- p>=></c-> animation<c- p>.</c->finished<c- p>)</c-> <c- p>).</c->then<c- p>(()</c-> <c- p>=></c-> elem<c- p>.</c->remove<c- p>());</c-> </pre> </div> Alternatively, applications can query the playback state of animations without waiting. <div class="example" id="example-9a95d87d"> <a class="self-link" href="#example-9a95d87d"></a> <pre class="highlight"><c- a>const</c-> isAnimating <c- o>=</c-> elem<c- p>.</c->getAnimations<c- p>().</c->some<c- p>(</c-> animation <c- p>=></c-> animation<c- p>.</c->playState <c- o>===</c-> <c- t>'running'</c-> <c- p>);</c-> </pre> </div> <dt data-md>Controlling running animations <dd data-md> It is sometimes useful to perform <a data-link-type="dfn" href="#playback-control" id="ref-for-playback-control">playback control</a> on animations so that they can respond to external inputs. For example, it might be necessary to pause all existing animations before displaying a modal dialog so that they do not distract the user’s attention. <div class="example" id="example-e7bbf635"> <a class="self-link" href="#example-e7bbf635"></a> <pre class="highlight"><c- c1>// Pause all existing animations in the document</c-> <c- k>for</c-> <c- p>(</c-><c- a>const</c-> animation <c- k>of</c-> document<c- p>.</c->getAnimations<c- p>())</c-> <c- p>{</c-> animation<c- p>.</c->pause<c- p>()</c-> <c- p>}</c-> </pre> </div> <dt data-md>Creating animations from script <dd data-md> While it is possible to use ECMAScript to perform animation using <code>requestAnimationFrame</code> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>, such animations behave differently to declarative animation in terms of how they are represented in the CSS cascade and the performance optimizations that are possible, such as performing the animation on a separate thread. Using the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api③">Web Animations API</a>, it is possible to create animations from script that have the same behavior and performance characteristics as declarative animations. <div class="example" id="example-824e8c83"> <a class="self-link" href="#example-824e8c83"></a> <pre class="highlight"><c- c1>// Fade out quickly</c-> elem<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'scale(0)'</c-><c- p>,</c-> opacity<c- o>:</c-> <c- mf>0</c-> <c- p>},</c-> <c- mf>300</c-><c- p>);</c-> </pre> </div> <dt data-md>Animation debugging <dd data-md> In a complex application, it can be difficult to determine how an element arrived in its present state. The <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api④">Web Animations API</a> can be used to inspect running animations to answer questions such as, “Why is the opacity of this element changing?” <div class="example" id="example-6c6854a7"> <a class="self-link" href="#example-6c6854a7"></a> <pre class="highlight"><c- c1>// Print the id of any opacity animations on elem</c-> <c- k>for</c-> <c- p>(</c-><c- a>const</c-> animation <c- k>of</c-> elem<c- p>.</c->getAnimations<c- p>())</c-> <c- p>{</c-> <c- k>if</c-> <c- p>(</c-> animation<c- p>.</c->effect <c- ow>instanceof</c-> KeyframeEffect <c- o>&&</c-> animation<c- p>.</c->effect <c- p>.</c->getKeyframes<c- p>()</c-> <c- p>.</c->some<c- p>(</c->frame <c- p>=></c-> frame<c- p>.</c->hasOwnProperty<c- p>(</c-><c- t>'opacity'</c-><c- p>))</c-> <c- p>)</c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c->animation<c- p>.</c->id<c- p>);</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> Likewise, in order to fine tune animations, it is often necessary to reduce their playback rate and replay them. <div class="example" id="example-06eda695"> <a class="self-link" href="#example-06eda695"></a> <pre class="highlight"><c- c1>// Slow down and replay any transform animations</c-> <c- a>const</c-> transformAnimations <c- o>=</c-> elem<c- p>.</c->getAnimations<c- p>().</c->filter<c- p>(</c-> animation <c- p>=></c-> animation<c- p>.</c->effect <c- ow>instanceof</c-> KeyframeEffect <c- o>&&</c-> animation<c- p>.</c->effect<c- p>.</c->getKeyframes<c- p>().</c->some<c- p>(</c-> frame <c- p>=></c-> frame<c- p>.</c->hasOwnProperty<c- p>(</c-><c- t>'transform'</c-><c- p>)</c-> <c- p>)</c-> <c- p>);</c-> <c- k>for</c-> <c- p>(</c-><c- a>const</c-> animation <c- k>of</c-> transformAnimations<c- p>)</c-> <c- p>{</c-> animation<c- p>.</c->currentTime <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> animation<c- p>.</c->updatePlaybackRate<c- p>(</c-><c- mf>0.5</c-><c- p>);</c-> <c- p>}</c-> </pre> </div> <dt data-md>Testing animations <dd data-md> In order to test applications that make use of animations it is often impractical to wait for such animations to run to completion. Rather, it is desirable to seek the animations to specific times. <div class="example" id="example-d0c0c637"> <a class="self-link" href="#example-d0c0c637"></a> <pre class="highlight"><c- c1>// Seek to the half-way point of an animation and check that the opacity is 50%</c-> <c- k>for</c-> <c- p>(</c-><c- a>const</c-> animation <c- k>of</c-> elem<c- p>.</c->getAnimations<c- p>())</c-> <c- p>{</c-> <c- a>const</c-> <c- p>{</c-> delay<c- p>,</c-> activeDuration <c- p>}</c-> <c- o>=</c-> animation<c- p>.</c->effect<c- p>.</c->getComputedTiming<c- p>();</c-> animation<c- p>.</c->currentTime <c- o>=</c-> delay <c- o>+</c-> activeDuration <c- o>/</c-> <c- mf>2</c-><c- p>;</c-> <c- p>}</c-> assert<c- p>.</c->strictEqual<c- p>(</c->getComputedStyle<c- p>(</c->elem<c- p>).</c->opacity<c- p>,</c-> <c- t>'0.5'</c-><c- p>);</c-> <c- c1>// Check that the loading screen is hidden after the animations finish</c-> <c- k>for</c-> <c- p>(</c-><c- a>const</c-> animation <c- k>of</c-> elem<c- p>.</c->getAnimations<c- p>())</c-> <c- p>{</c-> animation<c- p>.</c->finish<c- p>();</c-> <c- p>}</c-> <c- c1>// Wait one frame so that event handlers have a chance to run</c-> requestAnimationFrame<c- p>(()</c-> <c- p>=></c-> <c- p>{</c-> assert<c- p>.</c->strictEqual<c- p>(</c-> getComputedStyle<c- p>(</c->document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#loading'</c-><c- p>)).</c->display<c- p>,</c-> <c- t>'none'</c-><c- p>);</c-> <c- p>});</c-> </pre> </div> </dl> <h3 class="heading settled" data-level="1.2" id="relationship-to-other-specifications">1.2. Relationship to other specifications<a class="self-link" href="#relationship-to-other-specifications"></a></h3> CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1" title="CSS Transitions">[CSS-TRANSITIONS-1]</a>, CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a>, and SVG <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a> all provide mechanisms that generate animated content on a Web page. Although the three specifications provide many similar features, they are described in different terms. This specification proposes an abstract animation model that encompasses the common features of all three specifications. This <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model②">Web Animations model</a> is backwards-compatible with the current behavior of these specifications such that they can be defined in terms of this model without any observable change. The animation features in SVG 1.1 are defined in terms of SMIL Animation <a data-link-type="biblio" href="#biblio-smil-animation" title="SMIL Animation">[SMIL-ANIMATION]</a>. It is intended that by defining SVG’s animation features in terms of the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model③">Web Animations model</a>, the dependency between SVG and SMIL Animation can be removed. As with <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames" id="ref-for-animation-frames">animation frame callbacks</a> (commonly referred to as "requestAnimationFrame") <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>, the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api⑤">Web Animations API</a> allows animations to be created from script. The animations created using the Web Animations API, however, once created, are executed entirely by the user agent, meaning they share the same performance characteristics as animations defined declaratively. Using this interface it is possible to create animations from script in a simpler and more performant manner. The time values used within the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api⑦">Web Animations API</a> correspond with those used in <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames" id="ref-for-animation-frames①">animation frame callbacks</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> and their execution order is defined such that the two interfaces can be used simultaneously without conflict. The <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api⑧">Web Animations API</a> component of this specification makes some additions to interfaces defined in HTML <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>. <h3 class="heading settled" data-level="1.3" id="overview-of-this-specification">1.3. Overview of this specification<a class="self-link" href="#overview-of-this-specification"></a></h3> This specification begins by defining an abstract model for animation, the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model④">Web Animations model</a>. This is followed by a programming interface, <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api⑨">Web Animations API</a>, defined in terms of the abstract model. The programming interface is only relevant to user agents that provide scripting support. </div> <h2 class="heading settled" data-level="2" id="spec-conventions">2. Specification conventions<a class="self-link" href="#spec-conventions"></a></h2> This specification begins by describing abstract concepts—such as <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation">animations</a> and <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect">animation effects</a>—and properties that belong to them, such as their <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate">playback rate</a> or <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration">iteration duration</a>. In addition to these properties, there are often specific procedures for updating these properties, such as the procedure to <a data-link-type="dfn" href="#set-the-playback-rate" id="ref-for-set-the-playback-rate">set the playback rate</a> or 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 an animation. Where this specification does not specifically link to a procedure, text that requires the user agent to update a property, such as “make <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved">unresolved</a>”, should be understood to refer to updating the property directly without invoking any related procedure. Further conventions not specific to this specification are described in <a href="#w3c-conventions">Document conventions</a>. <h2 class="heading settled" data-level="3" id="web-animations-model-overview">3. Web Animations model overview<a class="self-link" href="#web-animations-model-overview"></a></h2> At a glance, the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model⑤">Web Animations model</a> consists of two largely independent pieces: a <a data-link-type="dfn" href="#timing-model-dfn" id="ref-for-timing-model-dfn">timing model</a> and an <a data-link-type="dfn" href="#animation-model-dfn" id="ref-for-animation-model-dfn">animation model</a>. The roles of these pieces are as follows: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="timing-model-dfn">timing model</dfn> <dd data-md> Takes a moment in time and converts it to a proportional distance within a single iteration of an animation, called the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress">iteration progress</a>. The current <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index">iteration index</a> is also recorded since some animations vary each time they repeat. The <a data-link-type="dfn" href="#web-animations-timing-model" id="ref-for-web-animations-timing-model">Web Animations timing model</a> is defined in <a href="#timing-model">§ 4 Timing model</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-model-dfn">animation model</dfn>. <dd data-md> Takes the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①">iteration progress</a> and <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index①">iteration index</a> values produced by the <a data-link-type="dfn" href="#timing-model-dfn" id="ref-for-timing-model-dfn①">timing model</a> and converts them into a series of corresponding values to apply to the <a data-link-type="dfn" href="#target-property" id="ref-for-target-property">target properties</a>. The <a data-link-type="dfn" href="#web-animations-animation-model" id="ref-for-web-animations-animation-model">Web Animations animation model</a> is defined in <a href="#animation-model">§ 5 Animation model</a>. </dl> <div class="informative-bg"> This section is non-normative Graphically, this flow can be represented as follows: <figure> <img alt="Overview of the operation of the Web Animations model." src="images/timing-and-animation-models.svg" width="600"> <figcaption> Overview of the operation of the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model⑥">Web Animations model</a>. The current time is input to the <a data-link-type="dfn" href="#timing-model-dfn" id="ref-for-timing-model-dfn②">timing model</a> which produces an <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress②">iteration progress</a> value and an <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index②">iteration index</a>. These parameters are used as input to the <a data-link-type="dfn" href="#animation-model-dfn" id="ref-for-animation-model-dfn①">animation model</a> which produces the <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①">target property</a> values to apply. </figcaption> </figure> For example, consider an animation that: <ul> <li data-md> starts after 3 seconds, <li data-md> runs twice, <li data-md> takes 2 seconds every time, and <li data-md> changes the width of a rectangle from 50 pixels to 100 pixels. </ul> The first three points describe the <a data-link-type="dfn" href="#timing-model-dfn" id="ref-for-timing-model-dfn③">timing model</a>: at a time of 6 seconds, it calculates that the animation should be half-way through its second iteration and produces the result 0.5. The animation model then uses that information to calculate a width. This specification begins with the <a href="#timing-model">timing model</a> and then proceeds to the <a href="#animation-model">animation model</a>. </div> <h2 class="heading settled" data-level="4" id="timing-model">4. Timing model<a class="self-link" href="#timing-model"></a></h2> This section describes and defines the behavior of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="web-animations-timing-model">Web Animations <a data-link-type="dfn" href="#timing-model-dfn" id="ref-for-timing-model-dfn④">timing model</a></dfn>. Timing in the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model⑦">Web Animations model</a> is represented through a hierarchy of relationships between <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="timing-nodes">timing nodes</dfn>, in which parent nodes provide timing information to their child nodes in the form of <a data-link-type="dfn" href="#time-value" id="ref-for-time-value">time values</a>, ultimately resulting in an <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress③">iteration progress</a> and <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index③">iteration index</a> supplied to the <a data-link-type="dfn" href="#animation-model-dfn" id="ref-for-animation-model-dfn②">animations model</a> <h3 class="heading settled" data-level="4.1" id="timing-model-overview">4.1. Timing model characteristics<a class="self-link" href="#timing-model-overview"></a></h3> <div class="informative-bg"> This section is non-normative Two features characterize the Web Animations timing model: it is stateless and it is hierarchical. <h4 class="heading settled" data-level="4.1.1" id="stateless">4.1.1. Stateless<a class="self-link" href="#stateless"></a></h4> The Web Animations <a data-link-type="dfn" href="#timing-model-dfn" id="ref-for-timing-model-dfn⑤">timing model</a> operates by taking an input <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①">time value</a> and producing an output <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress④">iteration progress</a>. Since the output is based solely on the input time and is independent of previous inputs, the model can be described as stateless. This gives the model the following properties: <dl> <dt data-md>Frame-rate independent <dd data-md> Since the output is independent of previous inputs, the rate at which the model is updated will not affect its progress. Provided the input times are proportional to the progress of real-world time, animations will progress at an identical rate regardless of the capabilities of the device running them. <dt data-md>Direction-agnostic <dd data-md> Since the sequence of inputs is insignificant, the model is directionless. This means that the model can be updated to an arbitrary moment without requiring any specialized handling. <dt data-md>Constant-time seeking <dd data-md> Since each input is independent of the previous input, the processing required to perform a seek operation, even far into the future, is at least potentially constant. </dl> There are a few exceptions to the stateless behavior of the timing model. Firstly, a number of methods defined in the <a href="#programming-interface">programming interface</a> to the model provide play control such as pausing an animation. These methods are defined in terms of the time at which they are called and are therefore stative. These methods are provided primarily for convenience and are not part of the core timing model, but are layered on top. Similarly, the <a href="#reaching-the-end">finishing behavior</a> of animations means that dynamic changes to the end time of the media (<a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect">associated effect</a>) of an animation can produce a different result depending on when the change occurs. This behavior is somewhat unfortunate but has been deemed intuitive and consistent with HTML. As a result, the model can only truly be described as stateless in the absence of dynamic changes to its timing properties. Finally, each time the model is updated, it can be considered to establish a temporary state. While this temporary state affects the values returned from the <a href="#programming-interface">programming interface</a>, it has no influence on the subsequent updates and hence does not conflict with the stateless qualities described above. <h4 class="heading settled" data-level="4.1.2" id="hierarchical">4.1.2. Hierarchical<a class="self-link" href="#hierarchical"></a></h4> The other characteristic feature of the timing model is that time is inherited. Time begins at a timeline and cascades down a number of steps to each animation effect. At each step, time can be shifted backwards or forwards, scaled, reversed, paused, and repeated. <figure> <img alt="A hierarchy of timing nodes" src="images/time-hierarchy.svg" width="350"> <figcaption> A hierarchy of timing nodes. Each node in the tree derives its time from its parent node. </figcaption> </figure> In this level of the specification the hierarchy is shallow. A subsequent level of this specification will introduce the concept of group effects which allows for deeper timing hierarchies. </div> <h3 class="heading settled" data-level="4.2" id="time-value-section">4.2. Time values<a class="self-link" href="#time-value-section"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="time-value">time value</dfn> in the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model⑧">Web Animations model</a> is a value that serves the purpose of synchronization. <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②">Time values</a> are real numbers that nominally represent a number of milliseconds from some moment. However, the connection between time values and wall-clock milliseconds can be obscured by any number of transformations applied to the value as it passes through the time hierarchy. Note: In the future there could be timelines that are based on scroll position or UI gestures in which case the connection between time values and milliseconds will be weakened even further. A <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④">time value</a> can be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="unresolved">unresolved</dfn>, i.e. represent the absence of a meaningful time value. This can happen if a <a data-link-type="dfn" href="#timing-nodes" id="ref-for-timing-nodes">timing node</a> is not in a state to produce a time value. <h3 class="heading settled" data-level="4.3" id="timelines">4.3. Timelines<a class="self-link" href="#timelines"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="timeline">timeline</dfn> is a <a data-link-type="dfn" href="#timing-nodes" id="ref-for-timing-nodes①">timing node</a> that provides a source of <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑦">time values</a>. At any given moment, a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline">timeline</a> has a single current time value known simply as the timeline’s <dfn class="dfn-paneled" data-dfn-for="timeline" data-dfn-type="dfn" data-export id="timeline-current-time">current time</dfn>. Changes in a timeline’s <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time">current time</a> are ultimately what drive <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①">animations</a> in the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model⑨">Web Animations model</a>. A <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②">timeline</a> might not always be able to return a meaningful <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑨">time value</a>, but only an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①">unresolved</a> time value. For example, its <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①">current time</a> might be defined relative to a moment that has yet to occur, such as the firing of a document’s load event. A timeline is considered to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inactive timeline" id="inactive-timeline">inactive</dfn> when its time value is unresolved, and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="active timeline" id="active-timeline">active</dfn> otherwise. A <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④">timeline</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="monotonically increasing" data-lt="monotonically increasing timeline" id="monotonically-increasing-timeline">monotonically increasing</dfn> if its reported <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time②">current time</a> is always greater than or equal to its previously reported current time. Specific types of <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤">timelines</a> may define a procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="timeline time to origin-relative time" id="timeline-time-to-origin-relative-time">convert a timeline time to an origin-relative time</dfn> for <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①①">time value</a> <var>time</var>, so that the time values produced by wallclock-based timelines can be compared. A <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑥">timeline</a> can be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="timeline associated with a document" data-noexport id="timeline-associated-with-a-document">associated with a document</dfn>. <h4 class="heading settled" data-level="4.3.1" id="document-timelines">4.3.1. Document timelines<a class="self-link" href="#document-timelines"></a></h4> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="document-timeline">document timeline</dfn> is a type of <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑦">timeline</a> that is <a data-link-type="dfn" href="#timeline-associated-with-a-document" id="ref-for-timeline-associated-with-a-document">associated with a document</a> and whose <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time④">current time</a> is calculated as a fixed offset from the <var>now</var> timestamp provided each time the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events">update animations and send events</a> procedure is run. This fixed offset is equal to the current time of the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline">default document timeline</a> when this timeline’s current time was zero, and is thus referred to as the document timeline’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="origin-time">origin time</dfn>. <a class="self-link" href="#issue-9fa706cb"></a> There must be a better term than "origin time"— it’s too similar to "time origin". <a href="https://github.com/w3c/csswg-drafts/issues/2079">[Issue #2079]</a> Prior to establishing the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-time-origin" id="ref-for-concept-settings-object-time-origin">time origin</a> for its associated document, a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline">document timeline</a> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline">inactive</a>. After a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline①">document timeline</a> becomes <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline">active</a>, it is <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline">monotonically increasing</a>. A <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline②">document timeline</a> that is associated with a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> that is not an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document">active document</a> is also considered to be <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①">inactive</a>. To <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time">convert a timeline time, <var>timeline time</var>, to an origin-relative time</a> for a document timeline, <var>timeline</var>, return the sum of the <var>timeline time</var> and <var>timeline</var>’s <a data-link-type="dfn" href="#origin-time" id="ref-for-origin-time">origin time</a>. If <var>timeline</var> is inactive, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①③">time value</a>. <h5 class="heading settled" data-level="4.3.1.1" id="the-documents-default-timeline">4.3.1.1. The default document timeline<a class="self-link" href="#the-documents-default-timeline"></a></h5> Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> has a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline③">document timeline</a> called the <dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-export id="document-default-document-timeline">default document timeline</dfn>. The <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline①">default document timeline</a> is unique to each document and persists for the lifetime of the document, including calls to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open" id="ref-for-dom-document-open">document.open()</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>. The <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline②">default document timeline</a> has an <a data-link-type="dfn" href="#origin-time" id="ref-for-origin-time①">origin time</a> of zero. <h5 class="heading settled" data-level="4.3.1.2" id="document-wallclock-time">4.3.1.2. Relationship to wall-clock time<a class="self-link" href="#document-wallclock-time"></a></h5> <div class="informative-bg"> This section is non-normative Since no scaling is applied to the <var>now</var> timestamp values provided to a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline④">document timeline</a>, the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①④">time values</a> it produces will be proportional to wall-clock milliseconds. Furthermore, since the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑤">time values</a> of the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline③">default document timeline</a> have a zero offset from the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-time-origin" id="ref-for-concept-settings-object-time-origin①">time origin</a>, <code>document.timeline.currentTime</code> will roughly correspond to <a href="https://www.w3.org/TR/hr-time/#dom-performance-now"><code>Performance.now()</code></a> <a data-link-type="biblio" href="#biblio-hr-time" title="High Resolution Time">[HR-TIME]</a> with the exception that <code>document.timeline.currentTime</code> does not change in between calls to the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events①">update animations and send events</a> procedure. </div> <h3 class="heading settled" data-level="4.4" id="animation-frame-loop">4.4. Animation Frames<a class="self-link" href="#animation-frame-loop"></a></h3> <div class="algorithm" data-algorithm="update animations and send events"> When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="update-animations-and-send-events">update animations and send events</dfn> for a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> <var>doc</var> at timestamp <var>now</var>, run these steps: <ol> <li data-md> Update the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑦">current time</a> of all timelines <a data-link-type="dfn" href="#timeline-associated-with-a-document" id="ref-for-timeline-associated-with-a-document①">associated with <var>doc</var></a> passing <var>now</var> as the timestamp. <div class="note" role="note"> Due to the hierarchical nature of the timing model, updating the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑧">current time</a> of a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑧">timeline</a> also involves: <ul> <li data-md> Updating the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time">current time</a> of any <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②">animations</a> <a data-link-type="dfn" href="#associated-with-a-timeline" id="ref-for-associated-with-a-timeline">associated with</a> the timeline. <li data-md> Running the <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state">update an animation’s finished state</a> procedure for any animations whose <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time①">current time</a> has been updated. <li data-md> Queueing <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events">animation events</a> for any such animations. </ul> </div> <li data-md> <a data-link-type="dfn" href="#remove-replaced-animations" id="ref-for-remove-replaced-animations">Remove replaced animations</a> for <var>doc</var>. <li data-md> <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">Perform a microtask checkpoint</a>. Note: This is to ensure that any microtasks queued up as a result of resolving or rejecting Promise objects as part of updating timelines in the previous step, run their callbacks prior to dispatching animation events. <li data-md> Let <var>events to dispatch</var> be a copy of <var>doc</var>’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue">pending animation event queue</a>. <li data-md> Clear <var>doc</var>’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue①">pending animation event queue</a>. <li data-md> Perform a stable sort of the <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events①">animation events</a> in <var>events to dispatch</var> as follows: <ol> <li data-md> Sort the events by their <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time">scheduled event time</a> such that events that were scheduled to occur earlier sort before events scheduled to occur later, and events whose scheduled event time is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④">unresolved</a> sort before events with a <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve">resolved</a> scheduled event time. <li data-md> Within events with equal <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time①">scheduled event times</a>, sort by their <a data-link-type="dfn" href="#animation-composite-order" id="ref-for-animation-composite-order">composite order</a>. Note: The purpose of sorting events is to ensure that, as best possible, even on devices with differing capabilities and hence different frame rates, events are dispatched in a consistent order. Note: The requirement for the sort to be a stable sort is because sometimes multiple events can be queued with the same scheduled event time. For example, a CSS animation with a duration of zero would dispatch both an <code>animationstart</code> and an <code>animationend</code> event with the same scheuled event time, and the order of these events should be preserved. </ol> <li data-md> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch">Dispatch</a> each of the events in <var>events to dispatch</var> at their corresponding target using the order established in the previous step. </ol> </div> It is often convenient to describe each time this procedure is invoked as establishing a new <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="animation-frame">animation frame</dfn>. Changes to the timing properties of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③">animations</a> or <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①">animation effects</a>, or the addition and removal of the objects can cause the output of the timing or animation model to change, but these operations in themselves do not create a new <a data-link-type="dfn" href="#animation-frame" id="ref-for-animation-frame">animation frame</a>; rather they merely update the current animation frame. <h3 class="heading settled" data-level="4.5" id="animations">4.5. Animations<a class="self-link" href="#animations"></a></h3> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="concept-animation">animation</dfn> is a <a data-link-type="dfn" href="#timing-nodes" id="ref-for-timing-nodes②">timing node</a> that binds an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②">animation effect</a> child, called its <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-associated-effect">associated effect</dfn>, to a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑨">timeline</a> parent so that it runs. Both of these associations are optional and configurable such that an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④">animation</a> can have no <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①">associated effect</a> or timeline at a given moment. <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤">Animations</a> also allow run-time control of the connection between the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③">animation effect</a> and its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①①">timeline</a>, through <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="playback-control">playback control</dfn> functions such as <a href="#pausing-an-animation-section">pausing</a>, <a href="#setting-the-current-time-of-an-animation">seeking</a>, and <a href="#speed-control">speed control</a>. <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑥">Time values</a> flow from the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①②">timeline</a> through the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥">animation</a> to the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②">associated effect</a>. The time value provided to an animation’s associated effect is called the animation’s <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-current-time">current time</dfn>. Note: The relationship between an animation and an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④">animation effect</a> is analogous to that of a DVD player and a DVD. In addition to its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①③">timeline</a>, <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect④">associated effect</a>, and <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②">current time</a> an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑨">animation</a> has the following: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-document-for-timing">document for timing</dfn> <dd data-md> The <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code> with which the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⓪">animation</a>’s <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①④">timeline</a> is <a data-link-type="dfn" href="#timeline-associated-with-a-document" id="ref-for-timeline-associated-with-a-document②">associated</a>. If an animation is not associated with a timeline, or its timeline is not associated with a document, then it has no <a data-link-type="dfn" href="#animation-document-for-timing" id="ref-for-animation-document-for-timing">document for timing</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-start-time">start time</dfn> <dd data-md> The <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑧">time value</a> of its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑤">timeline</a> when its <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect⑤">associated effect</a> is scheduled to begin playback. An animation’s start time is initially <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤">unresolved</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-hold-time">hold time</dfn> <dd data-md> A <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑨">time value</a>, which is used to freeze the animation’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③">current time</a> output in circumstances such as pausing. The <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time">hold time</a> is initially <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥">unresolved</a>. </dl> In order to establish the relative ordering of conflicting <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①①">animations</a>, animations are appended to a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="global-animation-list">global animation list</dfn> in the order in which they are created. Certain <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class">classes of animations</a>, however, may provide alternative means of ordering animations (see <a href="#animation-classes">§ 5.4.1 Animation classes</a>). <h4 class="heading settled" data-level="4.5.1" id="the-current-time-of-an-animation">4.5.1. Calculating the current time of an animation<a class="self-link" href="#the-current-time-of-an-animation"></a></h4> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①②">animation</a> is calculated from the first matching condition below: <dl class="switch"> <dt data-md>If the animation’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦">resolved</a>, <dd data-md> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑤">current time</a> is the animation’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②">hold time</a>. <dt data-md> If any of the following are true: <ul> <li data-md> the animation has no associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑥">timeline</a>, or <li data-md> the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑦">timeline</a> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline②">inactive</a>, or <li data-md> the animation’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time①">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧">unresolved</a>, </ul> <dd data-md> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑥">current time</a> is an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨">unresolved</a> time value. <dt data-md>Otherwise, <dd data-md> <blockquote> <code><a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑦">current time</a> = (<var>timeline time</var> − <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②">start time</a>) × <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①">playback rate</a></code> </blockquote> Where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⓪">time value</a> of the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑧">timeline</a>. The <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②">playback rate</a> value is defined in <a href="#speed-control">§ 4.5.15 Speed control</a>. </dl> <h4 class="heading settled" data-level="4.5.2" id="setting-the-timeline">4.5.2. Setting the timeline of an animation<a class="self-link" href="#setting-the-timeline"></a></h4> <div class="algorithm" data-algorithm="set the timeline of an animation" data-algorithm-for="animation"> 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="#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 the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②⓪">timeline</a> of <var>animation</var> be <var>new timeline</var>. <li data-md> If the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪">resolved</a>, make <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③">hold time</a> unresolved. Note: This step ensures that the <a data-link-type="dfn" href="#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="#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="#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> </div> <h4 class="heading settled" data-level="4.5.3" id="setting-the-associated-effect">4.5.3. Setting the associated effect of an animation<a class="self-link" href="#setting-the-associated-effect"></a></h4> <div class="algorithm" data-algorithm="set the associated effect of an animation" data-algorithm-for="animation"> The procedure to <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-set-the-associated-effect-of-an-animation">set the associated effect of an animation</dfn>, <var>animation</var>, to <var>new effect</var> which may be null, is as follows: <ol> <li data-md> Let <var>old effect</var> be the current <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect⑥">associated effect</a> of <var>animation</var>, if any. <li data-md> If <var>new effect</var> is the same object as <var>old effect</var>, abort this procedure. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task">pending pause task</a>, reschedule that task to run as soon as <var>animation</var> is <a data-link-type="dfn" href="#ready" id="ref-for-ready">ready</a>. <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>, reschedule that task to run as soon as <var>animation</var> is <a data-link-type="dfn" href="#ready" id="ref-for-ready①">ready</a> to play <var>new effect</var>. <li data-md> If <var>new effect</var> is not <code>null</code> and if <var>new effect</var> is the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect⑦">associated effect</a> of another <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①③">animation</a>, <var>previous animation</var>, run the procedure to <a data-link-type="dfn" href="#animation-set-the-associated-effect-of-an-animation" id="ref-for-animation-set-the-associated-effect-of-an-animation">set the associated effect of an animation</a> (this procedure) on <var>previous animation</var>, passing null as <var>new effect</var>. <li data-md> Let the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect⑧">associated effect</a> of <var>animation</var> be <var>new effect</var>. <li data-md> Run the procedure to <a data-link-type="dfn" href="#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> </div> <h4 class="heading settled" data-level="4.5.4" id="setting-the-current-time-of-an-animation">4.5.4. 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="#animation-current-time" id="ref-for-animation-current-time⑨">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①④">animation</a> can be set to a new value to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="seek">seek</dfn> the animation. The procedure for setting the current time is defined in two parts. <div class="algorithm" data-algorithm="silently set the current time" data-algorithm-for="animation"> The procedure to <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-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="#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="#animation-current-time" id="ref-for-animation-current-time①⓪">current time</a> is <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve①">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> Update either <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time④">hold time</a> or <a data-link-type="dfn" href="#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="#animation-hold-time" id="ref-for-animation-hold-time⑤">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①③">resolved</a>, or <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑤">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①④">unresolved</a>, or <li data-md> <var>animation</var> has no associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②①">timeline</a> or the associated timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline③">inactive</a>, or <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③">playback rate</a> is 0, </ul> <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time⑥">hold 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="#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="#playback-rate" id="ref-for-playback-rate④">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②①">time value</a> of the <a data-link-type="dfn" href="#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="#timeline" id="ref-for-timeline②④">timeline</a> or the associated timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline④">inactive</a>, make <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑦">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑤">unresolved</a>. Note: 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="#animation-start-time" id="ref-for-animation-start-time⑧">start time</a> or the animation’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time①①">current time</a>. <li data-md> Make <var>animation</var>’s <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time">previous current time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑥">unresolved</a>. </ol> </div> <div class="algorithm" data-algorithm="set the current time" data-algorithm-for="animation"> The procedure to <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-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="#animation-silently-set-the-current-time" id="ref-for-animation-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="#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="#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="#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="#animation-start-time" id="ref-for-animation-start-time⑨">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑦">unresolved</a>. <li data-md> Cancel the <a data-link-type="dfn" href="#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="#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="#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> </div> <h4 class="heading settled" data-level="4.5.5" id="setting-the-start-time-of-an-animation">4.5.5. Setting the start time of an animation<a class="self-link" href="#setting-the-start-time-of-an-animation"></a></h4> <div class="algorithm" data-algorithm="set the start time"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-start-time">set the start time</dfn> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑤">animation</a>, <var>animation</var>, to <var>new start time</var> is as follows: <ol> <li data-md> Let <var>timeline time</var> be the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②②">time value</a> of the <a data-link-type="dfn" href="#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="#inactive-timeline" id="ref-for-inactive-timeline⑤">inactive</a>, let the <var>timeline time</var> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑧">unresolved</a>. <li data-md> If <var>timeline time</var> is <a data-link-type="dfn" href="#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="#animation-hold-time" id="ref-for-animation-hold-time⑧">hold time</a> unresolved. Note: 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="#animation-start-time" id="ref-for-animation-start-time①⓪">start time</a> or the animation’s <a data-link-type="dfn" href="#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="#animation-current-time" id="ref-for-animation-current-time①③">current time</a>. Note: This is the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time①④">current time</a> after applying the changes from the previous step, which can cause the current time to become <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②②">unresolved</a>. <li data-md> <a data-link-type="dfn" href="#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="#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="#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="#unresolved" id="ref-for-unresolved②③">resolved</a>, <dd data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑤">playback rate</a> is not zero, make <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①⓪">hold time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②④">unresolved</a>. <dt data-md>Otherwise (<var>new start time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑤">unresolved</a>), <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#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="#unresolved" id="ref-for-unresolved②⑥">unresolved</a>. </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="#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="#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="#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> </div> <h4 class="heading settled" data-level="4.5.6" id="waiting-for-the-associated-effect">4.5.6. Waiting for the associated effect<a class="self-link" href="#waiting-for-the-associated-effect"></a></h4> <div class="informative-bg"> This section is non-normative Some operations performed by an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑥">animation</a> might not occur instantaneously. For example, some user agents might delegate the playback of an animation to a separate process or to specialized graphics hardware, each of which could incur some setup overhead. If such an animation is timed from the moment when the animation was triggered there can be a significant jump between the first and second frames of the animation corresponding to the setup time involved. To avoid this problem, Web Animations typically begins timing animations from the moment when the first frame of the animation is complete. This is represented by an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑦">unresolved</a> <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time①②">start time</a> on the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑦">animation</a> which becomes resolved when the animation is <a data-link-type="dfn" href="#ready" id="ref-for-ready②">ready</a>. Content can opt out of this behavior by setting the start time to a resolved <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②③">time value</a>. </div> An animation is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="ready">ready</dfn> 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="#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="#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="#timeline" id="ref-for-timeline②⑧">timeline</a> that is not <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑥">inactive</a>. </ul> <h4 class="heading settled" data-level="4.5.7" id="the-current-ready-promise">4.5.7. The current ready promise<a class="self-link" href="#the-current-ready-promise"></a></h4> Each <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑧">animation</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-ready-promise">current ready promise</dfn>. The <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise②">current ready promise</a> is initially a resolved <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects">Promise</a> created using the procedure to <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-promise-resolved-with" id="ref-for-a-promise-resolved-with">create a new resolved Promise</a> with the animation itself as its value and created 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 the animation. The object is replaced with a new <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects①">Promise object</a> every time the animation queues 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="#pending-pause-task" id="ref-for-pending-pause-task④">pending pause task</a> when it previously did not have a pending task, or when the animation is canceled (see <a href="#canceling-an-animation-section">§ 4.5.14 Canceling an animation</a>). <div class="note" role="note"> Note that since the same object is used for both pending play and pending pause requests, authors are advised to check the state of the animation when the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects②">Promise object</a> is resolved. For example, in the following code fragment, the state of the animation will be <a data-link-type="dfn" href="#play-state-running" id="ref-for-play-state-running">running</a> when the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise③">current ready promise</a> is resolved. This is because the <code>play</code> operation occurs while a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task③">pending play task</a> is still queued and hence the current ready promise is re-used. <div class="example" id="example-eb69e98f"> <a class="self-link" href="#example-eb69e98f"></a> <pre class="highlight">animation<c- p>.</c->pause<c- p>();</c-> animation<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c-> <c- c1>// Displays 'running'</c-> alert<c- p>(</c->animation<c- p>.</c->playState<c- p>);</c-> <c- p>});</c-> animation<c- p>.</c->play<c- p>();</c-> </pre> </div> </div> <h4 class="heading settled" data-level="4.5.8" id="playing-an-animation-section">4.5.8. Playing an animation<a class="self-link" href="#playing-an-animation-section"></a></h4> <div class="algorithm" data-algorithm="play an animation"> 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: <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="#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>seek time</var> be a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②④">time value</a> that is initially <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑨">unresolved</a>. <li data-md> If the <var>auto-rewind</var> flag is true, 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="#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="#animation-current-time" id="ref-for-animation-current-time①⑤">current time</a> is either: <ul> <li data-md> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⓪">unresolved</a>, or <li data-md> less than zero, or <li data-md> greater than or equal to <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end">associated effect end</a>, </ul> <dd data-md> Set <var>seek time</var> to zero. <dt data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#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="#animation-current-time" id="ref-for-animation-current-time①⑥">current time</a> is either: <ul> <li data-md> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③①">unresolved</a>, or <li data-md> less than or equal to zero, or <li data-md> greater than <a data-link-type="dfn" href="#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="#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 <var>seek time</var> to <var>animation</var>’s <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end③">associated effect end</a>. </dl> </dl> <li data-md> If the following three conditions are all satisfied: <ul> <li data-md> <var>seek time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③②">unresolved</a>, and <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time①④">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③③">unresolved</a>, and <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time①⑦">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③④">unresolved</a>, </ul> set <var>seek time</var> to zero. Note: The above step ensures that this procedure will play an idle animation regardless of the setting of the <var>auto-rewind</var> flag. <li data-md> Let <var>has finite timeline</var> be true if <var>animation</var> has an associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②⑨">timeline</a> that is not <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline①">monotonically increasing</a>. <li data-md> If <var>seek time</var> is <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve④">resolved</a>, <div class="switch"> <dl> <dt data-md>If <var>has finite timeline</var> is true, <dd data-md> <ol> <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time①⑤">start time</a> to <var>seek time</var>. <li data-md> Let <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①②">hold time</a> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑤">unresolved</a>. <li data-md> <a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate②">Apply any pending playback rate</a> on <var>animation</var>. </ol> <dt data-md>Otherwise, <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①③">hold time</a> to <var>seek time</var>. </dl> </div> <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①④">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑥">resolved</a>, let its <a data-link-type="dfn" href="#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="#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 four conditions are all satisfied: <ul> <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①⑤">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑧">unresolved</a>, and <li data-md> <var>seek time</var> is <a data-link-type="dfn" href="#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="#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="#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="#animation-start-time" id="ref-for-animation-start-time①⑦">start time</a> or <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①⑥">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⓪">resolved</a>. <li data-md> Let <var>ready time</var> be the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑤">time value</a> of the <a data-link-type="dfn" href="#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="#animation-hold-time" id="ref-for-animation-hold-time①⑦">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④①">resolved</a>, <dd data-md> <ol> <li data-md> <a data-link-type="dfn" href="#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="#animation-hold-time" id="ref-for-animation-hold-time①⑧">hold time</a> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑥">playback rate</a></code> for <var>animation</var>. If the <a data-link-type="dfn" href="#playback-rate" id="ref-for-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="#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="#playback-rate" id="ref-for-playback-rate⑧">playback rate</a> is not 0, make <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time①⑨">hold time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④②">unresolved</a>. </ol> <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#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="#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="#animation-start-time" id="ref-for-animation-start-time②⓪">start time</a>) × <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑨">playback rate</a></code> for <var>animation</var>. <li data-md> <a data-link-type="dfn" href="#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="#playback-rate" id="ref-for-playback-rate①⓪">playback rate</a> is zero, let <var>animation</var>’s <a data-link-type="dfn" href="#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="#playback-rate" id="ref-for-playback-rate①①">playback rate</a></code> for <var>animation</var>. If the <a data-link-type="dfn" href="#playback-rate" id="ref-for-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="#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="#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="#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. Note: The order of the above two steps is important since it means that an animation with zero-length <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①⓪">associated effect</a> will resolve its <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise⑦">current ready promise</a> before its <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise">current finished promise</a>. </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="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="#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="#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> </div> <h4 class="heading settled" data-level="4.5.9" id="pausing-an-animation-section">4.5.9. Pausing an animation<a class="self-link" href="#pausing-an-animation-section"></a></h4> Whenever an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑨">animation</a> has an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④③">unresolved</a> <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②②">start time</a>, its <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time①⑧">current time</a> will be suspended. As with <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation">playing an animation</a>, pausing might not happen instantaneously (see <a href="#waiting-for-the-associated-effect">§ 4.5.6 Waiting for the associated effect</a>). For example, if animation is performed by a separate process, it might be necessary to synchronize the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time①⑨">current time</a> to ensure that it reflects the state drawn by the animation process. <div class="algorithm" data-algorithm="pause an animation"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pause-an-animation">pause an animation</dfn>, <var>animation</var>, is as follows: <ol> <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑦">pending pause task</a>, abort these steps. <li data-md> If the <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state">play state</a> of <var>animation</var> is <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused">paused</a>, abort these steps. <li data-md> Let <var>seek time</var> be a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑥">time value</a> that is initially <a data-link-type="dfn" href="#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="#timeline" id="ref-for-timeline③①">timeline</a> that is not <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline②">monotonically increasing</a>. <li data-md> If the <var>animation</var>’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②⓪">current time</a> is <a data-link-type="dfn" href="#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="#playback-rate" id="ref-for-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="#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="#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="#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="#animation-start-time" id="ref-for-animation-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="#animation-hold-time" id="ref-for-animation-hold-time②①">hold time</a> to <var>seek time</var>. </dl> </div> <li data-md> Let <var>has pending ready promise</var> be a boolean flag that is initially false. <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>, cancel that task and let <var>has pending ready promise</var> be true. <li data-md> If <var>has pending ready promise</var> is false, set <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise⑨">current ready promise</a> to <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 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 <var>animation</var>’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①①">associated effect</a>, if any. <li data-md> the animation is associated with a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③②">timeline</a> that is not <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑦">inactive</a>. </ul> The task shall perform the following steps: <ol> <li data-md> Let <var>ready time</var> be the time value of the timeline associated with <var>animation</var> at the moment when the user agent completed processing necessary to suspend playback of <var>animation</var>’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①②">associated effect</a>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②④">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑦">resolved</a> and its <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②②">hold time</a> is not resolved, let <var>animation</var>’s hold time be the result of evaluating <code>(<var>ready time</var> − <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②⑤">start time</a>) × <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①④">playback rate</a></code>. Note: The <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②④">hold time</a> might be already set if the animation is <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①">finished</a>, or if the animation has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑨">pending play task</a>. In either case we want to preserve the hold time as we enter the <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused①">paused</a> state. <li data-md> <a data-link-type="dfn" href="#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> Make <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②⑥">start time</a> unresolved. <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="#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="#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> 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-pause-task">pending pause task</dfn>. While the task is running, however, <var>animation</var> does not have a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑧">pending pause task</a>. As with the <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⓪">pending play task</a>, the user agent must run the <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑨">pending pause task</a> asynchronously, although that could be as soon as 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>. <li data-md> Run the procedure to <a data-link-type="dfn" href="#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> </div> <h4 class="heading settled" data-level="4.5.10" id="reaching-the-end">4.5.10. Reaching the end<a class="self-link" href="#reaching-the-end"></a></h4> <div class="informative-bg"> This section is non-normative DVD players or cassette players typically continue playing until they reach the end of their media at which point they stop. If such players are able to play in reverse, they typically stop playing when they reach the beginning of their media. In order to emulate this behavior, and to provide consistency with HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element" id="ref-for-media-element">media elements</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>, the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②①">current time</a> of Web Animations' animations do not play forwards beyond the <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time">end time</a> of their <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①③">associated effect</a> or play backwards past time zero. An animation that has reached the natural boundary of its playback range is said to have finished. Graphically, the effect of limiting the current time is shown below. <figure> <img alt="The effect of limiting the current time of an animation." src="images/limiting.svg" width="500"> <figcaption> The effect of limiting the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②②">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⓪">animation</a> with a start time of 1s, an <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①④">associated effect</a> of length 3s, and a positive <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑤">playback rate</a>. After the current time of the animation reaches the end of the associated effect, it is capped at 3s. </figcaption> </figure> It is possible, however, to <a data-link-type="dfn" href="#seek" id="ref-for-seek">seek</a> the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②③">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②①">animation</a> to a time past the end of the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①⑤">associated effect</a>. When doing so, the current time will not progress but the animation will act as if it had been paused at the seeked time. This allows, for example, <a data-link-type="dfn" href="#seek" id="ref-for-seek①">seeking</a> the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②④">current time</a> of an animation with no <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①⑥">associated effect</a> to 5s. If associated effect with an <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time①">end time</a> later than 5s is later associated with the animation, playback will begin from the 5s mark. Similar behavior to the above scenario can arise when the length of an animation’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①⑧">associated effect</a> changes. Similarly, when the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑥">playback rate</a> is negative, the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②⑤">current time</a> does not progress past time zero. </div> <h4 class="heading settled" data-level="4.5.11" id="the-current-finished-promise">4.5.11. The current finished promise<a class="self-link" href="#the-current-finished-promise"></a></h4> Each animation has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-finished-promise">current finished promise</dfn>. The <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①">current finished promise</a> is initially a pending <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects③">Promise</a> object. The object is replaced with a new <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects④">promise</a> every time the animation leaves the <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished②">finished play state</a>. <h4 class="heading settled" data-level="4.5.12" id="updating-the-finished-state">4.5.12. Updating the finished state<a class="self-link" href="#updating-the-finished-state"></a></h4> For an animation with a positive <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑦">playback rate</a>, the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②⑥">current time</a> continues to increase until it reaches the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑥">associated effect end</a>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-effect-end">associated effect end</dfn> of an animation is equal to the <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time②">end time</a> of the animation’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect①⑨">associated effect</a>. If the animation has no associated effect, the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑦">associated effect end</a> is zero. For an animation with a negative <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑧">playback rate</a>, the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②⑦">current time</a> continues to decrease until it reaches zero. A running animation that has reached this boundary (or overshot it) and has a <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑧">resolved</a> <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②⑦">start time</a> is said to be <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished③">finished</a>. The crossing of this boundary is checked on each modification to the animation object using the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state⑨">update an animation’s finished state</a> defined below. This procedure is also run as part of the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events②">update animations and send events</a> procedure. In both cases the <var>did seek</var> flag, defined below, is set to false. For each animation, the user agent maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="previous-current-time">previous current time</dfn> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑦">time value</a> that is originally <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑨">unresolved</a>. Whilst during normal playback the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②⑧">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②②">animation</a> is limited to the boundaries described above, it is possible to <a data-link-type="dfn" href="#seek" id="ref-for-seek②">seek</a> the current time of an animation to times outside those boundaries using the procedure to <a data-link-type="dfn" href="#animation-set-the-current-time" id="ref-for-animation-set-the-current-time">set the current time</a> of an animation. <div class="algorithm" data-algorithm="update animation finished state"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-an-animations-finished-state">update an animation’s finished state</dfn> for <var>animation</var>, given a flag <var>did seek</var> (to indicate if the update is being performed after <a data-link-type="dfn" href="#animation-set-the-current-time" id="ref-for-animation-set-the-current-time①">setting the current time</a>), and a flag <var>synchronously notify</var> (to indicate the update was called in a context where we expect finished event queueing and finished promise resolution to happen immediately, if at all) is as follows: <ol> <li data-md> Let the <var>unconstrained current time</var> be the result of calculating the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time②⑨">current time</a>, substituting an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⓪">unresolved</a> time value for the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②⑥">hold time</a> if <var>did seek</var> is false. If <var>did seek</var> is true, the <var>unconstrained current time</var> is equal to the current time. Note: This is required to accommodate timelines that can change direction. Without this definition, a once-finished animation would remain finished even when its timeline progresses in the opposite direction. <li data-md> If all three of the following conditions are true, <ul> <li data-md> the <var>unconstrained current time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤①">resolved</a>, and <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②⑧">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤②">resolved</a>, and <li data-md> <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> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⓪">pending pause task</a>, </ul> then update <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②⑦">hold time</a> based on the first matching condition for <var>animation</var> from below, if any: <dl class="switch"> <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑨">playback rate</a> > 0 and <var>unconstrained current time</var> is greater than or equal to <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑧">associated effect end</a>, <dd data-md> If <var>did seek</var> is true, let the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②⑧">hold time</a> be the value of <var>unconstrained current time</var>. If <var>did seek</var> is false, let the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time②⑨">hold time</a> be the maximum value of <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time①">previous current time</a> and <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑨">associated effect end</a>. If the previous current time is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤③">unresolved</a>, let the hold time be associated effect end. <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⓪">playback rate</a> < 0 and <var>unconstrained current time</var> is less than or equal to 0, <dd data-md> If <var>did seek</var> is true, let the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③①">hold time</a> be the value of <var>unconstrained current time</var>. If <var>did seek</var> is false, let the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③②">hold time</a> be the minimum value of <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time③">previous current time</a> and zero. If the previous current time is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤④">unresolved</a>, let the hold time be zero. <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②①">playback rate</a> ≠ 0, and <var>animation</var> is associated with an <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline①">active timeline</a>, <dd data-md> Perform the following steps: <ol> <li data-md> If <var>did seek</var> is true and the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③④">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑤">resolved</a>, let <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time②⑨">start time</a> be equal to the result of evaluating <code><var>timeline time</var> − (<a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③⑤">hold time</a> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②②">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑧">time value</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③③">timeline</a> associated with <var>animation</var>. <li data-md> Let the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③⑥">hold time</a> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑥">unresolved</a>. </ol> </dl> <li data-md> Set the <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time⑤">previous current time</a> of <var>animation</var> to be the result of calculating its <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③①">current time</a>. <li data-md> Let <var>current finished state</var> be true if the <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state①">play state</a> of <var>animation</var> is <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished④">finished</a>. Otherwise, let it be false. <li data-md> If <var>current finished state</var> is true and the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise②">current finished promise</a> is not yet resolved, perform the following steps: <ol> <li data-md> Let <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="finish-notification-steps">finish notification steps</dfn> refer to the following procedure: <ol> <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state②">play state</a> is not equal to <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished⑤">finished</a>, abort these steps. <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="#current-finished-promise" id="ref-for-current-finished-promise③">current finished promise</a> object with <var>animation</var>. <li data-md> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create">Create</a> an <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent">AnimationPlaybackEvent</a></code>, <var>finishEvent</var>. <li data-md> Set <var>finishEvent</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type">type</a></code> attribute to <a data-link-type="dfn" href="#finish-event" id="ref-for-finish-event">finish</a>. <li data-md> Set <var>finishEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime">currentTime</a></code> attribute to the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③②">current time</a> of <var>animation</var>. <li data-md> Set <var>finishEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime">timelineTime</a></code> attribute to the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑨">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③④">timeline</a> with which <var>animation</var> is associated. If <var>animation</var> is not associated with a timeline, or the timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑧">inactive</a>, let <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime①">timelineTime</a></code> be <code class="esvalue">null</code>. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#animation-document-for-timing" id="ref-for-animation-document-for-timing①">document for timing</a>, then append <var>finishEvent</var> to its document for timing’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue②">pending animation event queue</a> along with its target, <var>animation</var>. For the <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time②">scheduled event time</a>, use the result of <a data-link-type="dfn" href="#animation-time-to-origin-relative-time" id="ref-for-animation-time-to-origin-relative-time">converting</a> <var>animation</var>’s <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①①">associated effect end</a> to an origin-relative time. Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch①">dispatch</a> <var>finishEvent</var> at <var>animation</var>. The task source for this task is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source">DOM manipulation task source</a>. </ol> <li data-md> If <var>synchronously notify</var> is true, cancel any queued microtask to run the <a data-link-type="dfn" href="#finish-notification-steps" id="ref-for-finish-notification-steps">finish notification steps</a> for this <var>animation</var>, and run the finish notification steps immediately. Otherwise, if <var>synchronously notify</var> is false, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask" id="ref-for-queue-a-microtask">queue a microtask</a> to run <a data-link-type="dfn" href="#finish-notification-steps" id="ref-for-finish-notification-steps②">finish notification steps</a> for <var>animation</var> unless there is already a microtask queued to run those steps for <var>animation</var>. </ol> <li data-md> If <var>current finished state</var> is false and <var>animation</var>’s <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise④">current finished promise</a> is already resolved, set <var>animation</var>’s current finished promise to <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>. </ol> </div> <div class="note" role="note"> Typically, notification about the finished state of an animation is performed asynchronously. This allows for the animation to temporarily enter the <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished⑥">finished play state</a> without triggering events to be fired or promises to be resolved. For example, in the following code fragment, <code>animation</code> temporarily enters the finished state. If notification of the finished state occurred synchronously, this code would cause the <a data-link-type="dfn" href="#finish-event" id="ref-for-finish-event①">finish event</a> to be queued and the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑥">current finished promise</a> to be resolved. However, if we reverse the order of the two statements such that the <code>iterations</code> is updated first, this would not happen. To avoid this surprising behavior, notification about the finished state of an animation is typically performed asynchronously. <div class="example" id="example-63369f6e"> <a class="self-link" href="#example-63369f6e"></a> <pre class="highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> animation<c- p>.</c->playbackRate <c- o>=</c-> <c- mf>2</c-><c- p>;</c-> animation<c- p>.</c->currentTime <c- o>=</c-> <c- mf>1000</c-><c- p>;</c-> <c- c1>// animation is now finished</c-> animation<c- p>.</c->effect<c- p>.</c->updateTiming<c- p>({</c-> iterations<c- o>:</c-> <c- mf>2</c-> <c- p>});</c-> <c- c1>// animation is no longer finished</c-> </pre> </div> The one exception to this asynchronous behavior is when the <a data-link-type="dfn" href="#finish-an-animation" id="ref-for-finish-an-animation">finish an animation</a> procedure is performed (typically by calling the <code class="idl"><a data-link-type="idl" href="#dom-animation-finish" id="ref-for-dom-animation-finish">finish()</a></code> method). In this case the author’s intention to finish the animation is clear so the notification about the finished state of the animation occurs synchronously as demonstrated below. <div class="example" id="example-3a2cd29f"> <a class="self-link" href="#example-3a2cd29f"></a> <pre class="highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mf>1000</c-><c- p>);</c-> animation<c- p>.</c->finish<c- p>();</c-> <c- c1>// finish event is queued immediately and finished promise</c-> <c- c1>// is resolved despite the fact that the following statement</c-> <c- c1>// causes the animation to leave the finished state</c-> animation<c- p>.</c->currentTime <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> </pre> </div> Note that, like the procedure to <a data-link-type="dfn" href="#finish-an-animation" id="ref-for-finish-an-animation①">finish an animation</a>, the procedure to <a data-link-type="dfn" href="#cancel-an-animation" id="ref-for-cancel-an-animation">cancel an animation</a> similarly queues the <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event">cancel event</a> and rejects the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑦">current finished promise</a> and <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①①">current ready promise</a> in a synchronous manner. </div> <h4 class="heading settled" data-level="4.5.13" id="finishing-an-animation-section">4.5.13. Finishing an animation<a class="self-link" href="#finishing-an-animation-section"></a></h4> <div class="algorithm" data-algorithm="finish an animation"> An animation can be advanced to the natural end of its current playback direction by using the procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="finish-an-animation">finish an animation</dfn> for <var>animation</var> defined below: <ol> <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate②">effective playback rate</a> is zero, or if <var>animation</var>’s effective playback rate > 0 and <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①②">associated effect end</a> is infinity, <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. <li data-md> <a data-link-type="dfn" href="#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> Set <var>limit</var> as follows: <div class="switch"> <dl> <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②③">playback rate</a> > 0, <dd data-md> Let <var>limit</var> be <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①③">associated effect end</a>. <dt data-md>Otherwise, <dd data-md> Let <var>limit</var> be zero. </dl> </div> <li data-md> <a data-link-type="dfn" href="#animation-silently-set-the-current-time" id="ref-for-animation-silently-set-the-current-time①">Silently set the current time</a> to <var>limit</var>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③⓪">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑦">unresolved</a> and <var>animation</var> has an associated <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline②">active timeline</a>, let the start time be the result of evaluating <code><var>timeline time</var> − (<var>limit</var> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②④">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑨">time value</a> of the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑤">timeline</a>. <li data-md> If there is a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①①">pending pause task</a> and <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③②">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑧">resolved</a>, <ol> <li data-md> Let the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③⑦">hold time</a> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑨">unresolved</a>. Note: Typically the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③⑧">hold time</a> will already be unresolved except in the case when the animation was previously <a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle">idle</a>. <li data-md> Cancel the <a data-link-type="dfn" href="#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> the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①②">current ready promise</a> of <var>animation</var> with <var>animation</var>. </ol> <li data-md> If there is a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①②">pending play task</a> and <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③③">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⓪">resolved</a>, cancel that task and <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve⑨">resolve</a> the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①③">current ready promise</a> of <var>animation</var> with <var>animation</var>. <li data-md> Run the procedure to <a data-link-type="dfn" href="#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 true. </ol> </div> <h4 class="heading settled" data-level="4.5.14" id="canceling-an-animation-section">4.5.14. Canceling an animation<a class="self-link" href="#canceling-an-animation-section"></a></h4> An animation can be canceled which causes the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③③">current time</a> to become <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥①">unresolved</a>, hence removing any effects caused by the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②①">associated effect</a>. <div class="algorithm" data-algorithm="cancel an animation"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="cancel-an-animation">cancel an animation</dfn> for <var>animation</var> is as follows: <ol> <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state③">play state</a> is not <a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle①">idle</a>, perform the following steps: <ol> <li data-md> Run the procedure to <a data-link-type="dfn" href="#animation-reset-an-animations-pending-tasks" id="ref-for-animation-reset-an-animations-pending-tasks">reset an animation’s pending tasks</a> on <var>animation</var>. <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject">Reject</a> the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑧">current finished promise</a> with a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code> named "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#aborterror" id="ref-for-aborterror">AbortError</a></code>". <li data-md> Set the [[PromiseIsHandled]] internal slot of the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑨">current finished promise</a> to true. <li data-md> Let <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①⓪">current finished 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> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create①">Create</a> an <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent①">AnimationPlaybackEvent</a></code>, <var>cancelEvent</var>. <li data-md> Set <var>cancelEvent</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type①">type</a></code> attribute to <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event①">cancel</a>. <li data-md> Set <var>cancelEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime①">currentTime</a></code> to <code class="esvalue">null</code>. <li data-md> Let <var>timeline time</var> be the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①⓪">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑥">timeline</a> with which <var>animation</var> is associated. If <var>animation</var> is not associated with an <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline③">active timeline</a>, let <var>timeline time</var> be an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥②">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⓪">time value</a>. <li data-md> Set <var>cancelEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime②">timelineTime</a></code> to <var>timeline time</var>. If <var>timeline time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥③">unresolved</a>, set it to <code class="esvalue">null</code>. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#animation-document-for-timing" id="ref-for-animation-document-for-timing③">document for timing</a>, then append <var>cancelEvent</var> to its document for timing’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue③">pending animation event queue</a> along with its target, <var>animation</var>. If <var>animation</var> is associated with an <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline④">active timeline</a> that defines a procedure to <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time①">convert timeline times to origin-relative time</a>, let the <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time③">scheduled event time</a> be the result of applying that procedure to <var>timeline time</var>. Otherwise, the scheduled event time is an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥④">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③①">time value</a>. Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch②">dispatch</a> <var>cancelEvent</var> at <var>animation</var>. The task source for this task is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source①">DOM manipulation task source</a>. </ol> <li data-md> Make <var>animation</var>’s <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time③⑨">hold time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑤">unresolved</a>. <li data-md> Make <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③④">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑥">unresolved</a>. </ol> </div> <div class="algorithm" data-algorithm="reset an animation’s pending tasks" data-algorithm-for="animation"> The procedure to <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-reset-an-animations-pending-tasks">reset an animation’s pending tasks</dfn> for <var>animation</var> is as follows: <ol> <li data-md> If <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> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①③">pending pause task</a>, abort this procedure. <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>, cancel that task. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①④">pending pause task</a>, cancel that task. <li data-md> <a data-link-type="dfn" href="#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> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject①">Reject</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①④">current ready promise</a> with a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code> named "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#aborterror" id="ref-for-aborterror①">AbortError</a></code>". <li data-md> Set the [[PromiseIsHandled]] internal slot of <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①⑤">current ready promise</a> to true. <li data-md> Let <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①⑥">current ready promise</a> be the result of <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-promise-resolved-with" id="ref-for-a-promise-resolved-with①">creating a new resolved Promise object</a> with value <var>animation</var> 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>. </ol> </div> <h4 class="heading settled" data-level="4.5.15" id="speed-control">4.5.15. Speed control<a class="self-link" href="#speed-control"></a></h4> <div class="informative-bg"> The rate of play of an animation can be controlled by setting its <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑤">playback rate</a>. For example, setting a playback rate of 2 will cause the animation’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③④">current time</a> to increase at twice the rate of its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑦">timeline</a>. Similarly, a playback rate of -1 will cause the animation’s current time to decrease at the same rate as the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③②">time values</a> from its timeline increase. </div> <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②③">Animations</a> have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="playback-rate">playback rate</dfn> that provides a scaling factor from the rate of change of the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑨">timeline</a>’s <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③③">time values</a> to the animation’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③⑥">current time</a>. The <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑥">playback rate</a> is initially 1. Setting an animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑦">playback rate</a> to zero effectively pauses the animation (however, the <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state④">play state</a> does not necessarily become <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused②">paused</a>). <h5 class="heading settled" data-level="4.5.15.1" id="setting-the-playback-rate-of-an-animation">4.5.15.1. Setting the playback rate of an animation<a class="self-link" href="#setting-the-playback-rate-of-an-animation"></a></h5> <div class="algorithm" data-algorithm="set the playback rate"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-playback-rate">set the playback rate</dfn> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②④">animation</a>, <var>animation</var>, to <var>new playback rate</var> is as follows: <ol> <li data-md> Clear any <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate②">pending playback rate</a> on <var>animation</var>. <li data-md> Let <var>previous time</var> be the value of the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③⑦">current time</a> of <var>animation</var> before changing the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑧">playback rate</a>. <li data-md> Let <var>previous playback rate</var> be the current <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate④">effective playback rate</a> of <var>animation</var>. <li data-md> Set the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑨">playback rate</a> to <var>new playback rate</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>animation</var> is associated with a <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline③">monotonically increasing</a> <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⓪">timeline</a> and the <var>previous time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑦">resolved</a>, <dd data-md> <a data-link-type="dfn" href="#animation-set-the-current-time" id="ref-for-animation-set-the-current-time②">Set the current time</a> of <var>animation</var> to <var>previous time</var>. <dt data-md> If <var>animation</var> is associated with a non-null <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④①">timeline</a> that is not <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline④">monotonically increasing</a>, the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③⑤">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve①⓪">resolved</a>, <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①④">associated effect end</a> is not infinity, and either: <ul> <li data-md> the <var>previous playback rate</var> < 0 and the <var>new playback rate</var> ≥ 0, or <li data-md> the <var>previous playback rate</var> ≥ 0 and the <var>new playback rate</var> < 0, </ul> <dd data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③⑥">start time</a> to the result of evaluating <code><a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①⑤">associated effect end</a> − <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③⑦">start time</a></code> for <var>animation</var>. Note: This effectively flips the animation start/end times on non-monotonic timelines, preserving the relative offset of the start time from the other direction. </dl> </ol> </div> <h5 class="heading settled" data-level="4.5.15.2" id="seamlessly-updating-the-playback-rate-of-an-animation">4.5.15.2. Seamlessly updating the playback rate of an animation<a class="self-link" href="#seamlessly-updating-the-playback-rate-of-an-animation"></a></h5> For an in-flight animation that is running on another process or thread, the procedure to <a data-link-type="dfn" href="#set-the-playback-rate" id="ref-for-set-the-playback-rate①">set the playback rate</a> can cause the animation to jump if the process or thread running the animation is not currently synchronized with the process or thread performing the update. In order to produce seamless changes to the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⓪">playback rate</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑤">animation</a>, animations may have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-playback-rate">pending playback rate</dfn> that defines a playback rate to be applied after any necessary synchronization has taken place (for the case of animations running in a different thread or process). Initially the <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate③">pending playback rate</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑥">animation</a> is unset. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effective-playback-rate">effective playback rate</dfn> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑦">animation</a> is its <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate④">pending playback rate</a>, if set, otherwise it is the animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③①">playback rate</a>. <div class="algorithm" data-algorithm="apply any pending playback rate"> When an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑧">animation</a>, <var>animation</var>, is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="apply-any-pending-playback-rate">apply any pending playback rate</dfn> the following steps are performed: <ol> <li data-md> If <var>animation</var> does not have a <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑤">pending playback rate</a>, abort these steps. <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③②">playback rate</a> to its <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑥">pending playback rate</a>. <li data-md> Clear <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑦">pending playback rate</a>. </ol> </div> <div class="algorithm" data-algorithm="seamlessly update the playback rate"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="seamlessly-update-the-playback-rate">seamlessly update the playback rate</dfn> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑨">animation</a>, <var>animation</var>, to <var>new playback rate</var> preserving its <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③⑧">current time</a> is as follows: <ol> <li data-md> Let <var>previous play state</var> be <var>animation</var>’s <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state⑤">play state</a>. Note: It is necessary to record the play state before updating <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑤">effective playback rate</a> since, in the following logic, we want to immediately apply the <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑧">pending playback rate</a> of <var>animation</var> if it is currently <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished⑦">finished</a> regardless of whether or not it will still be finished after we apply the pending playback rate. <li data-md> Let <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①⓪">pending playback rate</a> be <var>new playback rate</var>. <li data-md> Perform the steps corresponding to the first matching condition below: <dl class="switch"> <dt 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="#pending-pause-task" id="ref-for-pending-pause-task①⑤">pending pause task</a>, <dd data-md> Abort these steps. Note: The different types of pending tasks will apply the <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①①">pending playback rate</a> when they run so there is no further action required in this case. <dt data-md>If <var>previous play state</var> is <a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle②">idle</a> or <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused③">paused</a>, or <var>animation</var>’s <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time③⑨">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑧">unresolved</a>, <dd data-md> <a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate⑧">Apply any pending playback rate</a> on <var>animation</var>. Note: The second condition above is required so that if we have a <a data-link-type="dfn" href="#play-state-running" id="ref-for-play-state-running①">running</a> animation with an unresolved current time and no pending play task, we do not attempt to play it below. <dt data-md>If <var>previous play state</var> is <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished⑧">finished</a>, <dd data-md> <ol> <li data-md> Let the <var>unconstrained current time</var> be the result of calculating the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④⓪">current time</a> of <var>animation</var> substituting an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑨">unresolved</a> time value for the <a data-link-type="dfn" href="#animation-hold-time" id="ref-for-animation-hold-time④⓪">hold time</a>. <li data-md> Let <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③⑧">start time</a> be the result of evaluating the following expression: <blockquote> <code><var>timeline time</var> − (<var>unconstrained current time</var> / <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①②">pending playback rate</a>)</code> </blockquote> Where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③④">time value</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④②">timeline</a> associated with <var>animation</var>. If <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①③">pending playback rate</a> is zero, let <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time③⑨">start time</a> be <var>timeline time</var>. <li data-md> <a data-link-type="dfn" href="#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> Run the procedure to <a data-link-type="dfn" href="#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> <dt data-md>Otherwise, <dd data-md> Run the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation①">play an animation</a> for <var>animation</var> with the <var>auto-rewind</var> flag set to false. </dl> </ol> </div> <h4 class="heading settled" data-level="4.5.16" id="reversing-an-animation-section">4.5.16. Reversing an animation<a class="self-link" href="#reversing-an-animation-section"></a></h4> <div class="algorithm" data-algorithm="reverse an animation"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="reverse-an-animation">reverse an animation</dfn> of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⓪">animation</a> <var>animation</var> is as follows: <ol> <li data-md> If there is no <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④③">timeline</a> associated with <var>animation</var>, or the associated timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑨">inactive</a> <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. <li data-md> Let <var>original pending playback rate</var> be <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①④">pending playback rate</a>. <li data-md> Let <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①⑤">pending playback rate</a> be the additive inverse of its <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑥">effective playback rate</a> (i.e. <code>-<a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑦">effective playback rate</a></code>). <li data-md> Run the steps to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation②">play an animation</a> for <var>animation</var> with the <var>auto-rewind</var> flag set to true. If the steps to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation③">play an animation</a> throw an exception, set <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①⑥">pending playback rate</a> to <var>original pending playback rate</var> and propagate the exception. </ol> </div> <h4 class="heading settled" data-level="4.5.17" id="play-states">4.5.17. Play states<a class="self-link" href="#play-states"></a></h4> An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③①">animation</a> can be described as being in one of the following <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export data-lt="play state" id="animation-play-state">play states</dfn>, for each of which a non-normative description is also provided: <div class="informative-bg"> <dl> <dt data-md><a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle③">idle</a> <dd data-md> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④①">current time</a> of the animation is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⓪">unresolved</a> and the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④⓪">start time</a> of the animation is unresolved and there are no pending tasks. In this state the animation has no effect. <dt data-md><a data-link-type="dfn" href="#play-state-running" id="ref-for-play-state-running②">running</a> <dd data-md> The animation has a resolved <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④②">current time</a> that changes on each <a data-link-type="dfn" href="#animation-frame" id="ref-for-animation-frame②">animation frame</a> (provided the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③③">playback rate</a> is not zero and the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑤">timeline</a> is <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline⑤">active</a> and <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline⑤">monotonically increasing</a>). <dt data-md><a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused④">paused</a> <dd data-md> The animation has been suspended and the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④③">current time</a> is no longer changing. <dt data-md><a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished⑨">finished</a> <dd data-md> The animation has reached the natural boundary of its playback range and the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④④">current time</a> is no longer updating. </dl> </div> The <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state⑥">play state</a> of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③②">animation</a>, <var>animation</var>, at a given moment is the state corresponding to the first matching condition from the following: <div class="switch"> <dl> <dt data-md> All of the following conditions are true: <ul> <li data-md> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④⑤">current time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦②">unresolved</a>, and <li data-md> the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④①">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦③">unresolved</a>, and <li data-md> <var>animation</var> does not have either 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="#pending-pause-task" id="ref-for-pending-pause-task①⑥">pending pause task</a>, </ul> <dd data-md> → <dfn class="dfn-paneled" data-dfn-for="play state" data-dfn-type="dfn" data-export data-local-lt="idle play state" id="play-state-idle">idle</dfn> <dt data-md> Either of the following conditions are true: <ul> <li data-md> <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⑦">pending pause task</a>, or <li data-md> both the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④②">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦④">unresolved</a> and it does not have a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⑦">pending play task</a>, </ul> <dd data-md> → <dfn class="dfn-paneled" data-dfn-for="play state" data-dfn-type="dfn" data-export data-local-lt="paused play state" id="play-state-paused">paused</dfn> <dt data-md> For <var>animation</var>, <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④⑥">current time</a> is <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve①①">resolved</a> and either of the following conditions are true: <ul> <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑧">effective playback rate</a> > 0 and <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④⑦">current time</a> ≥ <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①⑥">associated effect end</a>; or <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑨">effective playback rate</a> < 0 and <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④⑧">current time</a> ≤ 0, </ul> <dd data-md> → <dfn class="dfn-paneled" data-dfn-for="play state" data-dfn-type="dfn" data-export data-local-lt="finished play state" id="play-state-finished">finished</dfn> <dt data-md>Otherwise, <dd data-md> → <dfn class="dfn-paneled" data-dfn-for="play state" data-dfn-type="dfn" data-export data-local-lt="running play state" id="play-state-running">running</dfn> </dl> </div> <div class="note" role="note"> Note that the <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused⑤">paused play state</a> effectively “wins” over the <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①⓪">finished play state</a>. However, an animation that is paused outside of its natural playback range can be converted from a <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused⑥">paused</a> animation into a <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①①">finished</a> animation without restarting by setting the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④③">start time</a> such as below: <div class="example" id="example-e0f669c8"> <a class="self-link" href="#example-e0f669c8"></a> <pre class="highlight">animation<c- p>.</c->effect<c- p>.</c->updateTiming<c- p>({</c-> duration<c- o>:</c-> <c- mf>5000</c-> <c- p>});</c-> animation<c- p>.</c->currentTime <c- o>=</c-> <c- mf>4000</c-><c- p>;</c-> animation<c- p>.</c->pause<c- p>();</c-> animation<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c-> animation<c- p>.</c->effect<c- p>.</c->updateTiming<c- p>({</c-> duration<c- o>:</c-> <c- mf>3000</c-> <c- p>});</c-> alert<c- p>(</c->animation<c- p>.</c->playState<c- p>);</c-> <c- c1>// Displays 'paused'</c-> animation<c- p>.</c->startTime <c- o>=</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime <c- o>-</c-> animation<c- p>.</c->currentTime <c- o>*</c-> animation<c- p>.</c->playbackRate<c- p>;</c-> alert<c- p>(</c->animation<c- p>.</c->playState<c- p>);</c-> <c- c1>// Displays 'finished'</c-> <c- p>});</c-> </pre> </div> </div> <h4 class="heading settled" data-level="4.5.18" id="animation-events-section">4.5.18. Animation events<a class="self-link" href="#animation-events-section"></a></h4> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-events">Animation events</dfn> include the <a data-link-type="dfn" href="#animation-playback-events" id="ref-for-animation-playback-events">animation playback events</a> defined in this specification as well as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions/#transition-events" id="ref-for-transition-events">events from CSS transitions</a> <a data-link-type="biblio" href="#biblio-css-transitions-1" title="CSS Transitions">[CSS-TRANSITIONS-1]</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-animations/#events" id="ref-for-events">events from CSS animations</a> <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a>. Future specifications may extend this set with further types of <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events②">animation events</a>. Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code> maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="pending-animation-event-queue">pending animation event queue</dfn> that stores <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events③">animation events</a> along with their corresponding event targets and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scheduled-event-time">scheduled event time</dfn>. The <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time⑤">scheduled event time</a> is a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑤">time value</a> relative to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-time-origin" id="ref-for-concept-settings-object-time-origin②">time origin</a> representing when the event would ideally have been dispatched were animations updated at an infinitely high frequency. It is used by the procedure to <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events③">update animations and send events</a> to sort queued animation events chronologically. Note that this value can be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑤">unresolved</a> if, for example, the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③③">animation</a>’s <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑥">timeline</a> produces values that are unrelated to the time origin (e.g. a timeline that tracks scroll-position) or if the timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⓪">inactive</a>. <h5 class="heading settled" data-level="4.5.18.1" id="sorting-animation-events">4.5.18.1. Sorting animation events<a class="self-link" href="#sorting-animation-events"></a></h5> The following definitions are provided to assist with sorting queued events. <div class="algorithm" data-algorithm="animation time to timeline time"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation time to timeline time" data-noexport id="animation-time-to-timeline-time">convert an animation time to timeline time</dfn> a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑥">time value</a>, <var>time</var>, that is relative to the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④④">start time</a> of an animation, <var>animation</var>, perform the following steps: <ol> <li data-md> If <var>time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑥">unresolved</a>, return <var>time</var>. <li data-md> If <var>time</var> is infinity, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑦">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑦">time value</a>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③④">playback rate</a> is zero, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑧">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑧">time value</a>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④⑤">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑨">unresolved</a>, return an unresolved <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑨">time value</a>. <li data-md> Return the result of calculating <code><var>time</var> × (1 / <var>playback rate</var>) + <var>start time</var></code>, where <var>playback rate</var> and <var>start time</var> are the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑤">playback rate</a> and <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④⑥">start time</a> of <var>animation</var>, respectively. </ol> </div> <div class="algorithm" data-algorithm="animation time to origin-relative time"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation time to origin-relative time" data-noexport id="animation-time-to-origin-relative-time">convert a timeline time to an origin-relative time</dfn> a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⓪">time value</a>, <var>time</var>, that is expressed in the same scale as the time values of a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑧">timeline</a>, <var>timeline</var>, perform the following steps: <ol> <li data-md> Let <var>timeline time</var> be the result of <a data-link-type="dfn" href="#animation-time-to-timeline-time" id="ref-for-animation-time-to-timeline-time">converting</a> <var>time</var> from an animation time to a timeline time. <li data-md> If <var>timeline time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧①">unresolved</a>, return <var>time</var>. <li data-md> If <var>animation</var> is not associated with a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑨">timeline</a>, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧②">unresolved</a> time value. <li data-md> If <var>animation</var> is associated with an <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①①">inactive timeline</a>, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧③">unresolved</a> time value. <li data-md> If there is no procedure to <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time②">convert a timeline time to an origin-relative time</a> for the timeline associated with <var>animation</var>, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧④">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④②">time value</a>. <li data-md> Return the result of <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time③">converting</a> <var>timeline time</var> to an origin-relative time using the procedure defined for the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⓪">timeline</a> associated with <var>animation</var>. </ol> </div> <h5 class="heading settled" data-level="4.5.18.2" id="animation-playback-events-section">4.5.18.2. Animation playback events<a class="self-link" href="#animation-playback-events-section"></a></h5> As <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③④">animations</a> play, they report changes to their status through <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-playback-events">animation playback events</dfn>. <a data-link-type="dfn" href="#animation-playback-events" id="ref-for-animation-playback-events①">Animation playback events</a> are a property of the timing model. As a result they are dispatched even when the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②②">associated effect</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑤">animation</a> is absent or has no observable result. <h5 class="heading settled" data-level="4.5.18.3" id="animation-playback-event-types">4.5.18.3. Types of animation playback events<a class="self-link" href="#animation-playback-event-types"></a></h5> <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="finish event" data-noexport id="finish-event">finish</dfn> <dd data-md> Queued whenever an animation enters the <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①②">finished play state</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cancel event" data-noexport id="cancel-event">cancel</dfn> <dd data-md> Queued whenever an animation enters the <a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle④">idle play state</a> from another state. Creating a new <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑥">animation</a> that is initially idle does not generate a new <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event②">cancel event</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="remove event" data-noexport id="remove-event">remove</dfn> <dd data-md> Queued whenever an animation is automatically removed. See <a href="#replacing-animations">§ 5.5 Replacing animations</a>. </dl> <h3 class="heading settled" data-level="4.6" id="animation-effects">4.6. Animation effects<a class="self-link" href="#animation-effects"></a></h3> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-effect">animation effect</dfn> is a <a data-link-type="dfn" href="#timing-nodes" id="ref-for-timing-nodes③">timing node</a> that provides a static description of some timed behavior. All <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤">animation effects</a> have the following properties: <ul> <li data-md> an <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval">active interval</a>, determined by its <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay">start delay</a> and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration">active duration</a>, defining the time interval during which its behavior takes effect <li data-md> an <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①">iteration duration</a>, <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count">iteration count</a>, and <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start">iteration start</a> defining how its behavior repeats within that interval <li data-md> a <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction">playback direction</a> applying to each iteration, to allow reversing the timing of effects within an iteration <li data-md> a <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode">fill mode</a> defining the application of effects <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase">before</a>/<a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase">after</a> its <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①">active interval</a> <li data-md> optionally, an <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation">associated animation</a> and through it, optionally, an <a data-link-type="dfn" href="#associated-with-a-timeline" id="ref-for-associated-with-a-timeline①">associated timeline</a>, which cause the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥">animation effect</a> to apply its behavior by driving its <a data-link-type="dfn" href="#local-time" id="ref-for-local-time">local time value</a> </ul> <h4 class="heading settled" data-level="4.6.1" id="types-of-animation-effects">4.6.1. Types of animation effects<a class="self-link" href="#types-of-animation-effects"></a></h4> This specification defines a single type of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦">animation effect</a>: <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①">keyframe effects</a>. Subsequent levels of this specification will define further types of animation effects. <h4 class="heading settled" data-level="4.6.2" id="animation-effects-and-animations">4.6.2. Associated animation and timeline<a class="self-link" href="#animation-effects-and-animations"></a></h4> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨">animation effect</a> is <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-local-lt="associated with an animation" data-lt="associated animation" data-noexport id="animation-effect-associated-animation">associated with an animation</dfn> when the effect is that animation’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②③">associated effect</a>. At a given moment, an animation effect can be <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①">associated</a> with at most one <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑦">animation</a>. An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①">animation effect</a>, <var>effect</var>, is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-with-a-timeline">associated with a timeline</dfn>, <var>timeline</var>, if <var>effect</var> is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②">associated with an animation</a> which, in turn, is associated with <var>timeline</var>. <h4 class="heading settled" data-level="4.6.3" id="local-time-section">4.6.3. Local time<a class="self-link" href="#local-time-section"></a></h4> 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="#animation-effect" id="ref-for-animation-effect①②">animation effect</a> represents the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time④⑨">current time</a> provided by its <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation③">associated animation</a>, determining the progress of the animation effect. At a given moment, it is based on the first matching condition below: <div class="switch"> <dl> <dt data-md>If the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①④">animation effect</a> is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation④">associated with an animation</a>, <dd data-md> the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①">local time</a> is the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑤⓪">current time</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑧">animation</a>. <dt data-md>Otherwise, <dd data-md> the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②">local time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑤">unresolved</a>. </dl> </div> <h4 class="heading settled" data-level="4.6.4" id="effect-time-spaces">4.6.4. Time spaces<a class="self-link" href="#effect-time-spaces"></a></h4> <div class="informative-bg"> This section is non-normative In Web Animations all times are relative to some point of reference. These different points of reference produce different <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="time-spaces">time spaces</dfn>. This can be compared to coordinate spaces as used in computer graphics. The zero time of a <a data-link-type="dfn" href="#time-spaces" id="ref-for-time-spaces">time space</a> is analogous to the origin of a coordinate space. Within the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model①⓪">Web Animations model</a> we define progress of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑤">animation effect</a> on the basis of its <a data-link-type="dfn" href="#active-time" id="ref-for-active-time">active time</a>, which is a time relative to the beginning of its <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval②">active interval</a>—thus a time in the <a data-link-type="dfn" href="#active-time-space" id="ref-for-active-time-space">active time space</a>. Note: This time space is internal to the model and not exposed in the programming interface or in markup. We can further describe animations that repeat as establishing a new <a data-link-type="dfn" href="#time-spaces" id="ref-for-time-spaces①">time space</a> each time the animation repeats: the <a data-link-type="dfn" href="#iteration-time-space" id="ref-for-iteration-time-space">iteration time space</a>. The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑥">animation effect</a> thus translates the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑤①">current time</a> provided by the <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation⑤">associated animation</a> through a series of <a data-link-type="dfn" href="#time-spaces" id="ref-for-time-spaces②">time spaces</a>: <ul> <li data-md> the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="local-time-space">local time space</dfn>, relative to the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④⑦">start time</a> of the <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation⑥">associated animation</a>, yielding the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time③">local time</a> <li data-md> the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-time-space">active time space</dfn>, relative to the start of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval③">active interval</a>, yielding the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①">active time</a> <li data-md> the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-time-space">iteration time space</dfn>, relative to the start of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑦">animation effect</a>’s current iteration, yielding the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-time">iteration time</dfn> </ul> These time spaces are illustrated below. <figure> <img alt="A comparison of local time, active time, and iteration time. Local time crosses zero at the start time of the animation, and rises linearly. Active time is zero until the start of the active interval, at which point it rises linearly to the end time, beyond which it remains at its maximum value. Iteration time is likewise zero until the start of the active interval, and rises linearly, but restarts at zero at the start of every new iteration, and remains at its halfway point from the end time onward." src="images/time-spaces.svg" width="600"> <figcaption> A comparison of <a data-link-type="dfn" href="#local-time" id="ref-for-local-time④">local time</a>, <a data-link-type="dfn" href="#active-time" id="ref-for-active-time②">active time</a>, and <a data-link-type="dfn" href="#iteration-time" id="ref-for-iteration-time">iteration time</a> for an animation with an <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration②">iteration duration</a> of 1s and an <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①">iteration count</a> of 2.5. The <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④⑧">start time</a> defined by the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑨">animation</a> and <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time③">end time</a> defined by the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑧">animation effect</a> are also annotated. </figcaption> </figure> In addition to these time spaces we can also refer to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-time-space">document time space</dfn>, which is time space of the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④③">time values</a> of the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline④">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>. Note: While the time spaces themselves are not bounded, Web Animations defines <a data-link-type="dfn" href="#active-time" id="ref-for-active-time③">active time</a> and the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑤">iteration progress</a> such that they are clamped to a set range as shown in the diagram. For example, whilst a time of -1 second is a valid time in active time space, the procedure for calculating the active time defined in <a href="#calculating-the-active-time">§ 4.7.2 Calculating the active time</a> will never return a negative value. </div> <h4 class="heading settled" data-level="4.6.5" id="the-active-interval">4.6.5. The active interval<a class="self-link" href="#the-active-interval"></a></h4> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑨">Animation effects</a> define an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-interval">active interval</dfn>, which is the period of time during which the effect is scheduled to produce its effect (excepting <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①">fill modes</a>, which apply outside the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval④">active interval</a>). Each animation effect has only one such interval, which is defined by its <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①">start delay</a> and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①">active duration</a>. <div class="informative-bg"> The relationship between the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time④⑨">start time</a>, <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②">start delay</a>, and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration②">active duration</a> is illustrated below. <figure> <img alt="Examples of the effect of the start dela on the endpoints of the active interval" src="images/active-interval-examples.svg" width="600"> <figcaption> Examples of the effect of the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay③">start delay</a> on the endpoints of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval⑤">active interval</a>. (a) An animation effect with no delay; the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑤⓪">start time</a> and beginning of the active interval are coincident. (b) An animation effect with a positive delay; the beginning of the active interval is deferred by the delay. (c) An animation effect with a negative delay; the beginning of the active interval is brought forward by the delay. </figcaption> </figure> </div> <h5 class="heading settled" data-level="4.6.5.1" id="the-start-delay">4.6.5.1. The start delay<a class="self-link" href="#the-start-delay"></a></h5> The lower bound of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval⑨">active interval</a> by default corresponds to the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑤①">start time</a> of the <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation⑦">associated animation</a>, but can be shifted by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start-delay">start delay</dfn>, which is a signed offset from the start time of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⓪">animation</a>. <h5 class="heading settled" data-level="4.6.5.2" id="the-active-duration">4.6.5.2. The active duration<a class="self-link" href="#the-active-duration"></a></h5> The length of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⓪">active interval</a> is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-duration">active duration</dfn>, and is determined by the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration③">iteration duration</a> and <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count②">iteration count</a> as defined below. Its length determines the upper bound of the active interval. <blockquote id="calculating-the-active-duration"> <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration③">active duration</a> = <code><a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration④">iteration duration</a> × <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count③">iteration count</a></code> </blockquote> If either the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑤">iteration duration</a> or <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count④">iteration count</a> are zero, the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration④">active duration</a> is zero. Note: This clarification is needed since the result of infinity multiplied by zero is undefined according to IEEE 754-2008. <h5 class="heading settled" data-level="4.6.5.3" id="the-end-delay">4.6.5.3. The end delay and animation effect end time<a class="self-link" href="#the-end-delay"></a></h5> Similar to the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay④">start delay</a>, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②①">animation effect</a> also has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="end-delay">end delay</dfn>, which is primarily of use when sequencing one animation effect based on the <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time④">end time</a> of another animation effect. The <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-noexport id="animation-effect-end-time">end time</dfn>, of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②④">animation effect</a> is the result of evaluating <code>max(<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="#end-delay" id="ref-for-end-delay">end delay</a>, 0)</code>. Note: Although the <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay①">end delay</a> is typically only useful in combination with sequence effects which are introduced in a subsequent level of this specification, it is included here for the purpose of representing the <a href="https://www.w3.org/TR/SVG/animate.html#MinAttribute"><code>min</code></a> attribute in SVG (<a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>, Chapter 19). <h4 class="heading settled" data-level="4.6.6" id="animation-effect-phases-and-states">4.6.6. 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 At a given moment, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑤">animation effect</a> can be in one of three possible phases. If an animation effect has an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑥">unresolved</a> <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑤">local time</a> it will not be in any phase. The different phases are illustrated below. <figure> <img alt="An example of the different phases and states used to describe an animation effect." src="images/animation-effect-phases-and-states.svg" width="700"> <figcaption> An example of the different phases and states used to describe an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑦">animation effect</a>. </figcaption> </figure> The phases are as follows: <dl> <dt data-md><a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase①">before phase</a> <dd data-md> The <a data-link-type="dfn" href="#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> falls before the effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①②">active interval</a> and <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time⑤">end time</a>, or occurs during the range when a negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑥">start delay</a> is in effect. <dt data-md><a data-link-type="dfn" href="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase">active phase</a> <dd data-md> The <a data-link-type="dfn" href="#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> falls inside the effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①③">active interval</a> and outside the range of any negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑦">start delay</a> or negative <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay②">end delay</a>. <dt data-md><a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase①">after phase</a> <dd data-md> The <a data-link-type="dfn" href="#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> falls after the effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①④">active interval</a> or after the <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time⑥">end time</a> if that comes first (due to a negative <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay③">end delay</a>), but not during the range when a negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑧">start delay</a> is in effect. </dl> In addition to these phases, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③①">animation effect</a> can also be described as being in one of several overlapping states. These states are only established for the duration of a single <a data-link-type="dfn" href="#animation-frame" id="ref-for-animation-frame③">animation frame</a> and are primarily a convenience for describing stative parts of the model. These states and their usage within the model are summarized as follows: <dl> <dt data-md><a data-link-type="dfn" href="#in-play" id="ref-for-in-play">in play</a> <dd data-md> Corresponds to an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③②">animation effect</a> whose <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑤">active time</a> is changing on each frame. <dt data-md><a data-link-type="dfn" href="#current" id="ref-for-current">current</a> <dd data-md> Corresponds to an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③③">animation effect</a> that is either <a data-link-type="dfn" href="#in-play" id="ref-for-in-play①">in play</a> or could become in play in the future based on its <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④①">animation</a>’s current <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑥">playback rate</a>. <dt data-md><a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect">in effect</a> <dd data-md> Corresponds to an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③④">animation effect</a> that has a resolved <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑥">active time</a>. This occurs when either the animation effect is in its <a data-link-type="dfn" href="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase①">active phase</a> or outside the active phase but at a time where the effect’s <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode②">fill mode</a> (see <a href="#fill-behavior">§ 4.6.8 Fill behavior and fill modes</a>) causes its active time to be resolved. Only <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect①">in effect</a> animation effects apply a result to their target. </dl> The normative definition of each of these states follows. </div> The phase of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑦">animation effect</a> depends on the following definitions: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-direction">animation direction</dfn> <dd data-md> “backwards” if the effect is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation⑧">associated with an animation</a> and the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④②">animation</a>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑦">playback rate</a> is less than zero; in all other cases, the <a data-link-type="dfn" href="#animation-direction" id="ref-for-animation-direction">animation direction</a> is “forward”. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="before-active-boundary-time">before-active boundary time</dfn> <dd data-md> <code>max(min(<a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑨">start delay</a>, <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time⑦">end time</a>), 0)</code> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-after-boundary-time">active-after boundary time</dfn> <dd data-md> <code>max(min(<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="#animation-effect-end-time" id="ref-for-animation-effect-end-time⑧">end time</a>), 0)</code> </dl> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑧">animation effect</a> is in the <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-export id="animation-effect-before-phase">before phase</dfn> 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="#unresolved" id="ref-for-unresolved⑧⑦">unresolved</a> and either of the following conditions are met: <ul> <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="#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="#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="#before-active-boundary-time" id="ref-for-before-active-boundary-time①">before-active boundary time</a>. </ul> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑨">animation effect</a> is in the <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-export id="animation-effect-after-phase">after phase</dfn> 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="#unresolved" id="ref-for-unresolved⑧⑧">unresolved</a> and either of the following conditions are met: <ul> <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="#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="#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="#active-after-boundary-time" id="ref-for-active-after-boundary-time①">active-after boundary time</a>. </ul> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⓪">animation effect</a> is in the <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-export id="animation-effect-active-phase">active phase</dfn> 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="#unresolved" id="ref-for-unresolved⑧⑨">unresolved</a> and it is neither in the <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase②">before phase</a> nor in the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase②">after phase</a>. Furthermore, it is often convenient to refer to the case when an animation effect is in none of the above phases as being in the <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-export id="animation-effect-idle-phase">idle phase</dfn>. An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④①">animation effect</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="in-play">in play</dfn> if all of the following conditions are met: <ul> <li data-md> the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④②">animation effect</a> is in the <a data-link-type="dfn" href="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase③">active phase</a>, and <li data-md> the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④③">animation effect</a> is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation⑨">associated with an animation</a> that is not <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①③">finished</a>. </ul> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④④">animation effect</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current">current</dfn> if any of the following conditions are true: <ul> <li data-md> the <a data-link-type="dfn" href="#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 <li data-md> the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑥">animation effect</a> is in the <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase③">before phase</a> and is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①⓪">associated with an animation</a> with a <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑧">playback rate</a> > 0, or <li data-md> the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑦">animation effect</a> is in the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase③">after phase</a> and is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①①">associated with an animation</a> with a <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑨">playback rate</a> < 0, or <li data-md> the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑧">animation effect</a> is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①②">associated with an animation</a> not in the <a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle⑤">idle</a> <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state⑦">play state</a> with a non-null associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤①">timeline</a> that is not <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline⑥">monotonically increasing</a>. </ul> An animation effect is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="in-effect">in effect</dfn> if its <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑧">active time</a>, as calculated according to the procedure in <a href="#calculating-the-active-time">§ 4.7.2 Calculating the active time</a>, is not <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⓪">unresolved</a>. <h4 class="heading settled" data-level="4.6.7" id="relevant-animations-section">4.6.7. Relevant animations<a class="self-link" href="#relevant-animations-section"></a></h4> We can define an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④③">animation</a> as being <a data-link-type="dfn" href="#animation-relevant" id="ref-for-animation-relevant">relevant</a> based on the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑨">animation effect</a> <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②④">associated</a> with it. An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④④">animation</a> is <dfn class="dfn-paneled" data-dfn-for="animation" data-dfn-type="dfn" data-export id="animation-relevant">relevant</dfn> if: <ul> <li data-md> Its <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②⑤">associated effect</a> is <a data-link-type="dfn" href="#current" id="ref-for-current①">current</a> or <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect②">in effect</a>, and <li data-md> Its <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state">replace state</a> is not <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state">removed</a>. </ul> <div class="algorithm" data-algorithm="get relevant animations"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="relevant-animations">relevant animations</dfn> for an element or pseudo-element <var>target</var> is the set of all <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑤">animations</a> that contain at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⓪">animation effect</a> whose <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target">effect target</a> is <var>target</var>. </div> <div class="algorithm" data-algorithm="get relevant animations for a subtree"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="relevant-animations-for-a-subtree">relevant animations for a subtree</dfn> of an element, pseudo-element, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a>, or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root">shadow root</a> <var>target</var> is the set of all <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑥">animations</a> that contain at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤①">animation effect</a> whose <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①">effect target</a> is an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant" id="ref-for-concept-tree-inclusive-descendant">inclusive descendant</a> (or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendant</a>, if <var>target</var> is a document or shadow root) of <var>target</var> or is a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> of such a descendant. </div> <h4 class="heading settled" data-level="4.6.8" id="fill-behavior">4.6.8. Fill behavior and fill modes<a class="self-link" href="#fill-behavior"></a></h4> The effect of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤②">animation effect</a> when it is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play④">in play</a> is determined by its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fill-mode">fill mode</dfn>. The effect of each <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode③">fill mode</a> is described below: <dl id="fill-modes"> <dt data-md><dfn class="dfn-paneled" data-dfn-for="fill mode" data-dfn-type="dfn" data-noexport id="fill-mode-none">none</dfn> <dd data-md> The animation effect has no effect when it is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑤">in play</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="fill mode" data-dfn-type="dfn" data-noexport id="fill-mode-forwards">forwards</dfn> <dd data-md> When the animation effect is in the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase④">after phase</a>, the animation effect will produce the same <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑥">iteration progress</a> value as the last moment it is scheduled to be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑥">in play</a>. For all other times that the animation effect is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑦">in play</a>, it will have no effect. <dt data-md><dfn class="dfn-paneled" data-dfn-for="fill mode" data-dfn-type="dfn" data-noexport id="fill-mode-backwards">backwards</dfn> <dd data-md> When the animation effect is in the <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase④">before phase</a>, the animation effect will produce the same <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑦">iteration progress</a> value as the earliest moment that it is scheduled to be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑧">in play</a>. For all other times that the animation effect is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑨">in play</a>, it will have no effect. <dt data-md><dfn class="dfn-paneled" data-dfn-for="fill mode" data-dfn-type="dfn" data-noexport id="fill-mode-both">both</dfn> <dd data-md> When the animation effect is in its <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase⑤">before phase</a>, <a data-link-type="dfn" href="#fill-mode-backwards" id="ref-for-fill-mode-backwards">backwards</a> fill behavior is used. When the animation effect is in its <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase⑤">after phase</a>, <a data-link-type="dfn" href="#fill-mode-forwards" id="ref-for-fill-mode-forwards">forwards</a> fill behavior is used. </dl> The normative effect of these modes is incorporated in the calculation of the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑨">active time</a> in <a href="#calculating-the-active-time">§ 4.7.2 Calculating the active time</a>. Some examples of these <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode④">fill modes</a> are illustrated below. <figure> <img alt="Examples of various fill modes and the states produced." src="images/animation-state-and-fill-behavior.svg" width="600"> <figcaption> Examples of various fill modes and the states produced. (a) fill mode <a data-link-type="dfn" href="#fill-mode-none" id="ref-for-fill-mode-none">none</a>. The animation effect has no effect outside its active phase. (b) fill mode <a data-link-type="dfn" href="#fill-mode-forwards" id="ref-for-fill-mode-forwards①">forwards</a>. After the active phase has finished, the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑧">iteration progress</a> value continues to maintain a fill value. (c) fill mode <a data-link-type="dfn" href="#fill-mode-backwards" id="ref-for-fill-mode-backwards①">backwards</a>. The animation effect produces a fill value until the start of the active phase. (d) fill mode <a data-link-type="dfn" href="#fill-mode-both" id="ref-for-fill-mode-both">both</a>. Both before and after the active phase the animation effect produces a fill value. </figcaption> </figure> Note: Authors are discouraged from using <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑤">fill modes</a> to produce animations whose effect is applied indefinitely. Fill modes were introduced in order to represent the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode" id="ref-for-propdef-animation-fill-mode">animation-fill-mode</a> property defined by CSS animations <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a>. However, they produce situations where animation state would be accumulated indefinitely, necessitating the automatic removal of animations (as defined in <a href="#replacing-animations">§ 5.5 Replacing animations</a>). Furthermore, indefinitely filling animations can cause changes to specified styles to be ineffective long after all animations have completed since the animation style takes precedence in the CSS cascade. <a data-link-type="biblio" href="#biblio-css-cascade-3" title="CSS Cascading and Inheritance Level 3">[CSS-CASCADE-3]</a> Where possible, authors should set the final state of the animation directly in specified styles. <div class="example" id="example-c881d871"> <a class="self-link" href="#example-c881d871"></a> This can be achieved by waiting for the animation to finish and then updating the style as illustrated below: <pre class="highlight"><c- c1>// In the first frame after the following animation finishes,</c-> <c- c1>// the callback for the `finished` promise will run</c-> <c- c1>// BEFORE style is updated, and hence will NOT flicker.</c-> elem<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translateY(100px)'</c-> <c- p>},</c-> <c- mf>200</c-><c- p>).</c->finished<c- p>.</c->then<c- p>(()</c-> <c- p>=></c-> <c- p>{</c-> elem<c- p>.</c->style<c- p>.</c->transform <c- o>=</c-> <c- t>'translateY(100px)'</c-><c- p>;</c-> <c- p>});</c-> </pre> </div> <div class="example" id="example-0307c584"> <a class="self-link" href="#example-0307c584"></a> Alternatively, the author can set the specified style at the start of the animation and then animate from the original value as illustrated below: <pre class="highlight">elem<c- p>.</c->style<c- p>.</c->transform <c- o>=</c-> <c- t>'translateY(100px)'</c-><c- p>;</c-> elem<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'none'</c-><c- p>,</c-> offset<c- o>:</c-> <c- mf>0</c-> <c- p>},</c-> <c- mf>200</c-><c- p>);</c-> </pre> </div> <div class="example" id="example-aa920f0d"> <a class="self-link" href="#example-aa920f0d"></a> Complex effects involving layering many animations on top of one another could require temporary use of forwards fill modes to capture the final value of an animation before canceling it. For example: <pre class="highlight">elem<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- k>async</c-> evt <c- p>=></c-> <c- p>{</c-> <c- a>const</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>(</c-> <c- p>{</c-> transform<c- o>:</c-> <c- sb>`translate(</c-><c- si>${</c->evt<c- p>.</c->clientX<c- si>}</c-><c- sb>px, </c-><c- si>${</c->evt<c- p>.</c->clientY<c- si>}</c-><c- sb>px)`</c-> <c- p>},</c-> <c- p>{</c-> duration<c- o>:</c-> <c- mf>800</c-><c- p>,</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>}</c-> <c- p>);</c-> <c- k>await</c-> animation<c- p>.</c->finished<c- p>;</c-> <c- c1>// commitStyles will record the style up to and including `animation` and</c-> <c- c1>// update elem’s specified style with the result.</c-> animation<c- p>.</c->commitStyles<c- p>();</c-> animation<c- p>.</c->cancel<c- p>();</c-> <c- p>});</c-> </pre> </div> Note: Setting a <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑦">fill mode</a> has no bearing on the endpoints of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑤">active interval</a> or the boundaries between <a href="#animation-effect-phases-and-states">phases</a> However, the fill mode does have an effect on various other properties of the timing model since the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①⓪">active time</a> of an animation effect is only defined (that is, not <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨①">unresolved</a>) inside the <a data-link-type="dfn" href="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase④">active phase</a> or when a fill is applied. <h4 class="heading settled" data-level="4.6.9" id="repeating">4.6.9. Repeating<a class="self-link" href="#repeating"></a></h4> <h5 class="heading settled" data-level="4.6.9.1" id="iteration-intervals">4.6.9.1. Iteration intervals<a class="self-link" href="#iteration-intervals"></a></h5> It is possible to specify that an animation effect should repeat a fixed number of times or indefinitely. This repetition occurs within the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑥">active interval</a>. The span of time during which a single repetition takes place is called an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-interval">iteration interval</dfn>. Unlike the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑦">active interval</a>, an animation effect can have multiple <a data-link-type="dfn" href="#iteration-interval" id="ref-for-iteration-interval">iteration intervals</a>, although typically only the interval corresponding to the current iteration is of interest. The length of a single iteration is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-duration">iteration duration</dfn>. The initial <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑥">iteration duration</a> of an animation effect is zero. <div class="informative-bg"> This section is non-normative Comparing the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑦">iteration duration</a> and the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑦">active duration</a> we have: <dl> <dt data-md>iteration duration <dd data-md> The time taken for a single iteration of the animation effect to complete. <dt data-md>active duration <dd data-md> The time taken for the entire animation effect to complete, including repetitions. This can be longer or shorter than the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑧">iteration duration</a>. </dl> The relationship between the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑨">iteration duration</a> and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑧">active duration</a> is illustrated below. <figure> <img alt="Comparison of the iteration duration and active time." src="images/iteration-intervals.svg" width="600"> <figcaption> A comparison of the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⓪">iteration duration</a> and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑨">active duration</a> of an animation effect with an <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑤">iteration count</a> of 2.5. Note that the iteration duration for the final iteration does not change; it is simply cut-off by the active duration. </figcaption> </figure> </div> <h5 class="heading settled" data-level="4.6.9.2" id="controlling-iteration">4.6.9.2. Controlling iteration<a class="self-link" href="#controlling-iteration"></a></h5> The number of times an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤③">animation effect</a> repeats is called its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-count">iteration count</dfn>. The <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑥">iteration count</a> is a real number greater than or equal to zero. The iteration count can also be positive infinity to represent that the animation effect repeats indefinitely. In addition to the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑧">iteration count</a>, <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑤">animation effects</a> also have an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-start">iteration start</dfn> property which specifies an offset into the series of iterations at which the animation effect should begin. The <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①">iteration start</a> is a finite real number greater than or equal to zero. The behavior of these parameters is defined in the calculations in <a href="#core-animation-effect-calculations">§ 4.7 Calculating progress</a>. <div class="informative-bg"> This section is non-normative The effect of the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑨">iteration count</a> and <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start②">iteration start</a> parameters is illustrated below. <figure> <img alt="The effect of the iteration count and iteration start parameters" src="images/iteration-count-and-start.svg" width="600"> <figcaption> The effect of the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⓪">iteration count</a> and <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start③">iteration start</a> parameters. In the first case the iteration count is 2.5 resulting in the third iteration being cut off halfway through its <a data-link-type="dfn" href="#iteration-interval" id="ref-for-iteration-interval①">iteration interval</a>. The second case is the same but with an iteration start of 0.5. This causes the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑦">animation effect</a> to begin halfway through the first iteration. </figcaption> </figure> Unlike the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①②">iteration count</a> parameter, the <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑤">iteration start</a> parameter does not affect the length of the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①①">active duration</a>. Note that values of <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑥">iteration start</a> greater than or equal to one are generally not useful unless used in combination with an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑧">animation effect</a> that has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation" id="ref-for-iteration-composite-operation">iteration composite operation</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate" id="ref-for-iteration-composite-operation-accumulate">accumulate</a>. </div> <h5 class="heading settled" data-level="4.6.9.3" id="interval-timing">4.6.9.3. Interval timing<a class="self-link" href="#interval-timing"></a></h5> <div class="informative-bg"> This section is non-normative When an animation effect repeats, the behavior at the iteration boundaries needs to be defined. For this, and indeed for all interval timing, Web Animations uses an endpoint-exclusive timing model. This means that whilst the begin time of an interval is included in the interval, the end time is not. In interval notation this can written <code>[begin, end)</code>. This model provides sensible behavior when intervals are repeated and sequenced since there is no overlap between the intervals. In the examples below, for the repeated effect, at local time 1s, the iteration time is 0. For the sequenced animations, at timeline time 1s, only animation B’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②⑥">associated effect</a> will be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play①⓪">in play</a>; there is no overlap. <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> An exception to this behavior is that when performing a <a href="#fill-behavior">fill</a>, if the fill begins at an interval endpoint, the endpoint is used. This behavior falls out of the algorithm given in <a href="#calculating-the-simple-iteration-progress">§ 4.7.4 Calculating the simple iteration progress</a> and is illustrated below. <figure> <img alt="Effect of iterations and fill on iteration time." src="images/endpoint-exclusive-timing-and-fill.svg" width="600"> <figcaption> After one iteration, the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑨">iteration progress</a> is 0, but after two iterations (and there onwards), the iteration progress is 1 due to the special behavior defined when an animation effect fills. </figcaption> </figure> </div> <h4 class="heading settled" data-level="4.6.10" id="direction-control">4.6.10. Direction control<a class="self-link" href="#direction-control"></a></h4> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑨">Animation effects</a> can also be configured to run iterations in alternative directions using direction control. For this purpose, animation effects have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="playback-direction">playback direction</dfn> parameter which takes one of the following values: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="playback direction" data-dfn-type="dfn" data-noexport id="playback-direction-normal">normal</dfn> <dd data-md> All iterations are played as specified. <dt data-md><dfn class="dfn-paneled" data-dfn-for="playback direction" data-dfn-type="dfn" data-noexport id="playback-direction-reverse">reverse</dfn> <dd data-md> All iterations are played in the reverse direction from the way they are specified. <dt data-md><dfn class="dfn-paneled" data-dfn-for="playback direction" data-dfn-type="dfn" data-noexport id="playback-direction-alternate">alternate</dfn> <dd data-md> Even iterations are played as specified; odd iterations are played in the reverse direction from the way they are specified. <dt data-md><dfn class="dfn-paneled" data-dfn-for="playback direction" data-dfn-type="dfn" data-noexport id="playback-direction-alternate-reverse">alternate-reverse</dfn> <dd data-md> Even iterations are played in the reverse direction from the way they are specified; odd iterations are played as specified. </dl> The semantics of these values are incorporated into the calculation of the <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress">directed progress</a> in <a href="#calculating-the-directed-progress">§ 4.7.6 Calculating the directed progress</a>. <h4 class="heading settled" data-level="4.6.11" id="time-transformations">4.6.11. Easing (effect timing transformations)<a class="self-link" href="#time-transformations"></a></h4> It is often desirable to control the rate at which an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥①">animation effect</a> progresses. For example, easing the rate of animation can create a sense of momentum and produce a more natural effect. The <a href="https://www.w3.org/TR/css-easing/">CSS Easing Functions Module</a> defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function">easing functions</a> for this purpose. <a data-link-type="biblio" href="#biblio-css-easing-1" title="CSS Easing Functions Level 1">[CSS-EASING-1]</a> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥②">Animation effects</a> each have an <dfn class="dfn-paneled" data-dfn-for="animation effect" data-dfn-type="dfn" data-noexport id="animation-effect-effect-easing-function">effect easing function</dfn>, which is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①">easing function</a> used to transform progress across the entirety of each iteration. See <a href="#calculating-the-transformed-progress">§ 4.7.7 Calculating the transformed progress</a>. The default <a data-link-type="dfn" href="#animation-effect-effect-easing-function" id="ref-for-animation-effect-effect-easing-function">effect easing function</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#linear-easing-function" id="ref-for-linear-easing-function">linear easing function</a>. Note: Specific <a href="#types-of-animation-effects">types of animation effects</a> may provide additional time transformations. For example, <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②">keyframe effects</a> can provide <a data-link-type="dfn" href="#keyframe-specific-easing-function" id="ref-for-keyframe-specific-easing-function">keyframe-specific easing functions</a> that can apply an <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function②">easing function</a> specifically between two adjacent keyframes. <h3 class="heading settled" data-level="4.7" id="core-animation-effect-calculations">4.7. Calculating progress<a class="self-link" href="#core-animation-effect-calculations"></a></h3> <h4 class="heading settled" data-level="4.7.1" id="animation-effect-calculations-overview">4.7.1. Overview<a class="self-link" href="#animation-effect-calculations-overview"></a></h4> <div class="informative-bg"> This section is non-normative 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="#iteration-progress" id="ref-for-iteration-progress①①">iteration progress</a>. The first step in this process is to calculate the bounds of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑧">active interval</a> which is determined by the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①②">active duration</a>. This process is illustrated below. <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="#iteration-duration" id="ref-for-iteration-duration①②">iteration duration</a> by the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①③">iteration count</a>. </figcaption> </figure> 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="#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="#transformed-progress" id="ref-for-transformed-progress">transformed progress</a> (<a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①②">iteration progress</a>) is illustrated below. <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="#local-time" id="ref-for-local-time①⑧">local time</a> is determined from the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑦">animation</a>. (2) The local time is converted into an <a data-link-type="dfn" href="#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="#iteration-duration" id="ref-for-iteration-duration①③">iteration duration</a> incorporating also the <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑦">iteration start</a> property to produce the <a data-link-type="dfn" href="#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="#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="#directed-progress" id="ref-for-directed-progress①">directed progress</a> by incorporating the <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction①">playback direction</a>. (6) Finally, an <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function③">easing function</a> is applied to the directed progress to produce the <a data-link-type="dfn" href="#transformed-progress" id="ref-for-transformed-progress①">transformed progress</a>. </figcaption> </figure> 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-section">§ 4.6.3 Local time</a>. Steps 2 to 6 in the diagram are described in the following sections. </div> <h4 class="heading settled" data-level="4.7.2" id="calculating-the-active-time">4.7.2. Calculating the active time<a class="self-link" href="#calculating-the-active-time"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-time">active time</dfn> is based on the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②①">local time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①②">start delay</a>. However, it is only defined when the <a data-link-type="dfn" href="#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="#fill-mode" id="ref-for-fill-mode⑧">fill mode</a> and phase as follows: <dl class="switch"> <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="#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 <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑨">fill mode</a> is <a data-link-type="dfn" href="#fill-mode-backwards" id="ref-for-fill-mode-backwards②">backwards</a> or <a data-link-type="dfn" href="#fill-mode-both" id="ref-for-fill-mode-both①">both</a>, <dd data-md> Return the result of evaluating <code>max(<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>, 0)</code>. <dt data-md>Otherwise, <dd data-md> Return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨②">unresolved</a> <a data-link-type="dfn" href="#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="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase⑤">active phase</a>, <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>. <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="#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: <div class="switch"> <dl> <dt data-md>If the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⓪">fill mode</a> is <a data-link-type="dfn" href="#fill-mode-forwards" id="ref-for-fill-mode-forwards②">forwards</a> or <a data-link-type="dfn" href="#fill-mode-both" id="ref-for-fill-mode-both②">both</a>, <dd data-md> Return the result of evaluating <code>max(min(<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>, <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⑤">active duration</a>), 0)</code>. <dt data-md>Otherwise, <dd data-md> Return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨③">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑤">time value</a>. </dl> </div> <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="#unresolved" id="ref-for-unresolved⑨④">unresolved</a>), <dd data-md> Return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⑤">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑥">time value</a>. </dl> <h4 class="heading settled" data-level="4.7.3" id="calculating-the-overall-progress">4.7.3. Calculating the overall progress<a class="self-link" href="#calculating-the-overall-progress"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="overall-progress">overall progress</dfn> describes the number of iterations that have completed (including partial iterations) and is defined as follows: <ol> <li data-md> If the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①③">active time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⑥">unresolved</a>, return unresolved. <li data-md> Calculate an initial value for <var>overall progress</var> based on the first matching condition below: <div class="switch"> <dl> <dt data-md>If the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①④">iteration duration</a> is zero, <dd data-md> If the animation effect is in the <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase⑦">before phase</a>, let <var>overall progress</var> be zero; otherwise, let it be equal to the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①④">iteration count</a>. <dt data-md>Otherwise, <dd data-md> Let <var>overall progress</var> be the result of calculating <code><a data-link-type="dfn" href="#active-time" id="ref-for-active-time①④">active time</a> / <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑤">iteration duration</a></code>. </dl> </div> <li data-md> Return the result of calculating <code><var>overall progress</var> + <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑧">iteration start</a></code>. </ol> <h4 class="heading settled" data-level="4.7.4" id="calculating-the-simple-iteration-progress">4.7.4. Calculating the simple iteration progress<a class="self-link" href="#calculating-the-simple-iteration-progress"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="simple-iteration-progress">simple iteration progress</dfn> is a fraction of the progress through the current iteration that ignores transformations to the time introduced by the <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction②">playback direction</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function④">easing functions</a> applied to the effect, and is calculated as follows: <ol> <li data-md> If the <a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress②">overall progress</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⑧">unresolved</a>, return unresolved. <li data-md> If <a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress③">overall progress</a> is infinity, let the <var>simple iteration progress</var> be <code><a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑨">iteration start</a> % 1.0</code>; otherwise, let the <var>simple iteration progress</var> be <code><a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress④">overall progress</a> % 1.0</code>. <li data-md> If all of the following conditions are true: <ul> <li data-md> the <var>simple iteration progress</var> calculated above is zero, and <li data-md> the animation effect is in the <a data-link-type="dfn" href="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase⑥">active phase</a> or the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase⑦">after phase</a>, and <li data-md> the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①⑤">active time</a> is equal to the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⑥">active duration</a>, and <li data-md> the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑤">iteration count</a> is not equal to zero. </ul> Let the <var>simple iteration progress</var> be 1.0. <div class="note" role="note"> The above step implements the behavior that when an animation’s active interval ends precisely at the end of an iteration, it fills by holding the endpoint of the final iteration rather than the start of the next iteration. The final condition prevents this from applying when we never played any iterations of the animation to begin with because the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑥">iteration count</a> was zero. </div> <li data-md> Return <var>simple iteration progress</var>. </ol> <h4 class="heading settled" data-level="4.7.5" id="calculating-the-current-iteration">4.7.5. Calculating the <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index④">current iteration index</a><a class="self-link" href="#calculating-the-current-iteration"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="current iteration index | iteration index" data-noexport id="current-iteration-index">current iteration index</dfn> can be calculated using the following steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①⑥">active time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪⓪">unresolved</a>, return unresolved. <li data-md> If the animation effect is in the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase⑧">after phase</a> and the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑦">iteration count</a> is infinity, return infinity. <li data-md> If the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress②">simple iteration progress</a> is 1.0, return <code>floor(<a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress⑤">overall progress</a>) − 1</code>. <li data-md> Otherwise, return <code>floor(<a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress⑥">overall progress</a>)</code>. </ol> <h4 class="heading settled" data-level="4.7.6" id="calculating-the-directed-progress">4.7.6. Calculating the directed progress<a class="self-link" href="#calculating-the-directed-progress"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="directed-progress">directed progress</dfn> is calculated from the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress③">simple iteration progress</a> using the following steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress④">simple iteration progress</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪②">unresolved</a>, return unresolved. <li data-md> Calculate the <var>current direction</var> using the first matching condition from the following list: <dl class="switch"> <dt data-md>If <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction③">playback direction</a> is <a data-link-type="dfn" href="#playback-direction-normal" id="ref-for-playback-direction-normal">normal</a>, <dd data-md> Let the <var>current direction</var> be forwards. <dt data-md>If <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction④">playback direction</a> is <a data-link-type="dfn" href="#playback-direction-reverse" id="ref-for-playback-direction-reverse">reverse</a>, <dd data-md> Let the <var>current direction</var> be reverse. <dt data-md>Otherwise (the <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑤">playback direction</a> is <a data-link-type="dfn" href="#playback-direction-alternate" id="ref-for-playback-direction-alternate">alternate</a> or <a data-link-type="dfn" href="#playback-direction-alternate-reverse" id="ref-for-playback-direction-alternate-reverse">alternate-reverse</a>)p, <dd data-md> <ol> <li data-md> Let <var>d</var> be the <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index⑤">current iteration index</a>. <li data-md> If <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑥">playback direction</a> is <a data-link-type="dfn" href="#playback-direction-alternate-reverse" id="ref-for-playback-direction-alternate-reverse①">alternate-reverse</a> increment <var>d</var> by 1. <li data-md> If <code><var>d</var> % 2 == 0</code>, let the <var>current direction</var> be forwards; otherwise let the <var>current direction</var> be reverse. If <var>d</var> is infinity, let the <var>current direction</var> be forwards. </ol> </dl> <li data-md> If the <var>current direction</var> is forwards then return the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress⑤">simple iteration progress</a>. Otherwise, return <code>1.0 − <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress⑥">simple iteration progress</a></code>. </ol> <h4 class="heading settled" data-level="4.7.7" id="calculating-the-transformed-progress">4.7.7. Calculating the transformed progress<a class="self-link" href="#calculating-the-transformed-progress"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="transformed-progress">transformed progress</dfn> is calculated from the <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress③">directed progress</a> using the following steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress④">directed progress</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪④">unresolved</a>, return unresolved. <li data-md> Calculate the value of the <var>before flag</var> as follows: <ol> <li data-md> Determine the <var>current direction</var> using the procedure defined in <a href="#calculating-the-directed-progress">§ 4.7.6 Calculating the directed progress</a>. <li data-md> If the <var>current direction</var> is forwards, let <var>going forwards</var> be true; otherwise it is false. <li data-md> The <var>before flag</var> is set if the animation effect is in the <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase⑧">before phase</a> and <var>going forwards</var> is true; or if the animation effect is in the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase⑨">after phase</a> and <var>going forwards</var> is false. </ol> <li data-md> Return the result of evaluating the <a data-link-type="dfn" href="#animation-effect-effect-easing-function" id="ref-for-animation-effect-effect-easing-function①">effect easing function</a> passing <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress⑤">directed progress</a> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function-input-progress-value" id="ref-for-easing-function-input-progress-value">input progress value</a> and <var>before flag</var> as 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>. </ol> <h4 class="heading settled" data-level="4.7.8" id="the-iteration-progress">4.7.8. Yielding the iteration progress<a class="self-link" href="#the-iteration-progress"></a></h4> The final output <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-progress">iteration progress</dfn> of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑤">animation effect</a> is simply its <a data-link-type="dfn" href="#transformed-progress" id="ref-for-transformed-progress②">transformed progress</a>. <h2 class="heading settled" data-level="5" id="animation-model">5. Animation model<a class="self-link" href="#animation-model"></a></h2> <div class="informative-bg"> This section is non-normative For some kinds of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑥">animation effects</a>, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="web-animations-animation-model">Web Animations <a data-link-type="dfn" href="#animation-model-dfn" id="ref-for-animation-model-dfn③">animation model</a></dfn> takes the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①③">iteration progress</a> and <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index⑥">iteration index</a> values produced by the <a data-link-type="dfn" href="#web-animations-timing-model" id="ref-for-web-animations-timing-model①">timing model</a> and uses them to calculate a corresponding output. The output of each such animation effect is then combined with that of others using an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack">effect stack</a> before being applied to the <a data-link-type="dfn" href="#target-property" id="ref-for-target-property②">target properties</a> (see <a href="#combining-effects">§ 5.4 Combining effects</a>). </div> <h3 class="heading settled" data-level="5.1" id="introduction-to-the-animation-model">5.1. Introduction<a class="self-link" href="#introduction-to-the-animation-model"></a></h3> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑦">animation effect</a> has zero or more associated properties that it affects in response to changes to its timing output. These properties are referred to as the effect’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="target property" data-noexport id="target-property">target properties</dfn>. Given an <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①④">iteration progress</a>, an <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index⑦">iteration index</a>, and an <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value">underlying value</a>, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑧">animation effect</a> produces an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effect-value">effect value</dfn> for each <a data-link-type="dfn" href="#concept-animatable" id="ref-for-concept-animatable">animatable</a> <a data-link-type="dfn" href="#target-property" id="ref-for-target-property③">target property</a> by applying the procedures from the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type">animation type</a> appropriate to the property. <h3 class="heading settled" data-level="5.2" id="animating-properties">5.2. Animating properties<a class="self-link" href="#animating-properties"></a></h3> Unless otherwise specified, all CSS properties are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="concept-animatable">animatable</dfn>. How property values combine is defined by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="animation-type">Animation type</dfn> line in each property’s property definition table: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="not-animatable">not animatable</dfn> <dd data-md> The property is not animatable. It is not processed when listed in an animation keyframe, and is not affected by transitions. Note: Properties are typically excluded from animation because animating them would create excessive complications. For example, properties defining animation parameters are <a data-link-type="dfn" href="#not-animatable" id="ref-for-not-animatable">not animatable</a> since doing so would create complex recursive behavior. Note: An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑨">animation effect</a> that targets only properties that are <a data-link-type="dfn" href="#not-animatable" id="ref-for-not-animatable①">not animatable</a> will still exhibit the usual behavior for an animation effect such as firing events and delaying the fulfillment of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑧">animation</a>’s <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①①">current finished promise</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="discrete">discrete</dfn> <dd data-md> The property’s values cannot be meaningfully combined, thus it is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#not-additive" id="ref-for-not-additive">not additive</a>. <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation">Interpolation</a> swaps from <var>Va</var> to <var>Vb</var> at 50% (<var>p=0.5</var>), i.e. <div class="formula" role="math"> <math xmlns="http://www.w3.org/1998/Math/MathML"> <msub> <mi>V</mi> <mn>result</mn> </msub> <mo>=</mo> <mrow> <mfenced close open="{"> <mtable> <mtr> <mtd columnalign="left"> <msub> <mi>V</mi> <mn>start</mn> </msub> </mtd> <mtd columnalign="left"> <mtext>if </mtext> <mi>p</mi> <mo><</mo> <mn>0.5</mn> </mtd> </mtr> <mtr> <mtd columnalign="left"> <msub> <mi>V</mi> <mn>end</mn> </msub> </mtd> <mtd columnalign="left"> <mtext>if </mtext> <mi>p</mi> <mo>≥</mo> <mn>0.5</mn> </mtd> </mtr> </mtable> </mfenced> </mrow> </math> </div> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="by-computed-value">by computed value</dfn> <dd data-md> Corresponding individual components of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed values</a> are combined (interpolated, added, or accumulated) using the indicated procedure for that value type (see <a href="https://drafts.csswg.org/css-values-4/#combining-values"><cite>CSS Values 4</cite> § 3 Combining Values: Interpolation, Addition, and Accumulation</a>). If the number of components or the types of corresponding components do not match, or if any component value uses <a data-link-type="dfn" href="#discrete" id="ref-for-discrete">discrete</a> animation and the two corresponding values do not match, then the property values combine as discrete. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="repeatable-list">repeatable list</dfn> <dd> Same as <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value">by computed value</a> except that if the two lists have differing numbers of items, they are first repeated to the least common multiple number of items. Each item is then combined by computed value. If a pair of values cannot be combined or if any component value uses <a data-link-type="dfn" href="#discrete" id="ref-for-discrete②">discrete</a> animation, then the property values combine as discrete. Note: The repeatable list concept ensures that a list that is conceptually repeated to a certain length (as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> is repeated to the length of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a> list) or repeated infinitely will smoothly transition between any values, and so that the computed value will properly represent the result (and potentially be inherited correctly). <dt>(See prose) <dd> Some properties have specific interpolation behavior not covered by the above cases; in this case the animation behavior will be specified explicitly for that property. </dl> The <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type①">animation type</a> of properties that do not yet include an Animation type line in their property definition, is defined in <a href="#animation-types">Appendix A: Animation types of existing properties</a>. <h4 class="heading settled" data-level="5.2.1" id="custom-properties">5.2.1. Custom Properties<a class="self-link" href="#custom-properties"></a></h4> For <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-2/#custom-property" id="ref-for-custom-property">custom properties</a> registered using the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty" id="ref-for-dom-css-registerproperty">registerProperty()</a></code> method for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object①">current global object</a>, the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type③">animation type</a> is <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value②">by computed value</a>, derived from the type used in the property’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-definition" id="ref-for-syntax-definition">syntax definition</a>. Where there is no <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed value</a> type that corresponds to the property’s specified syntax (e.g. when the syntax is the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-properties-values-api-1/#universal-syntax-definition" id="ref-for-universal-syntax-definition">universal syntax definition</a>) or when the custom property is not registered, the animation type is <a data-link-type="dfn" href="#discrete" id="ref-for-discrete④">discrete</a>. <h3 class="heading settled" data-level="5.3" id="keyframe-effects">5.3. Keyframe effects<a class="self-link" href="#keyframe-effects"></a></h3> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="keyframe effect" data-noexport id="keyframe-effect">Keyframe effects</dfn> are a kind of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦①">animation effect</a> that uses the output of the timing model to update CSS properties of an element or <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①">pseudo-element</a> (such as <code>::before</code> or <code>::after</code> <a data-link-type="biblio" href="#biblio-select" title="Selectors Level 3">[select]</a>) referred to as the <dfn class="dfn-paneled" data-dfn-for="keyframe effect" data-dfn-type="dfn" data-export id="keyframe-effect-effect-target">effect target</dfn>. The <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target②">effect target</a> is comprised of an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element">Element</a></code> known as the <dfn class="dfn-paneled" data-dfn-for="effect target" data-dfn-type="dfn" data-export id="effect-target-target-element">target element</dfn> and a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element②">pseudo-element</a> selector known as the <dfn class="dfn-paneled" data-dfn-for="effect target" data-dfn-type="dfn" data-export id="effect-target-target-pseudo-selector">target pseudo-selector</dfn>. If the effect target is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code>, the <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element">target element</a> is that element and the <a data-link-type="dfn" href="#effect-target-target-pseudo-selector" id="ref-for-effect-target-target-pseudo-selector">target pseudo-selector</a> is null. If the effect target is a pseudo-element, the target element is its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a> and the target pseudo-selector is one that specifies that particular pseudo-element. Note that not all <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target⑤">effect targets</a> specified in this manner (such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part" id="ref-for-selectordef-part">::part()</a> pseudo-elements and unsupported pseudo-elements) have computed property values defined. <h4 class="heading settled" data-level="5.3.1" id="keyframes-section">5.3.1. Keyframes<a class="self-link" href="#keyframes-section"></a></h4> The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value">effect values</a> for a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③">keyframe effect</a> are calculated by interpolating between a series of property values positioned at fractional offsets. Each set of property values indexed by an offset is called a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="keyframe">keyframe</dfn>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="keyframe offset" data-noexport id="keyframe-offset">offset of a keyframe</dfn> is a value in the range [0, 1] or the special value null. The list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe">keyframes</a> for a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect④">keyframe effect</a> must be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="loosely-sorted-by-offset">loosely sorted by offset</dfn>, which means that for each keyframe in the list that has a <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset">keyframe offset</a> that is not null, the offset must be greater than or equal to the offset of the previous keyframe in the list with a keyframe offset that is not null, if any. The behavior when <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③">keyframes</a> overlap or have unsupported values is defined in <a href="#the-effect-value-of-a-keyframe-animation-effect">§ 5.3.4 The effect value of a keyframe effect</a>. Each keyframe also has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="keyframe-specific-easing-function">keyframe-specific easing function</dfn> associated with it, which is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function⑤">easing function</a> that is applied to the period of time between the keyframe on which it is specified and the next keyframe in the list. Note: The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function⑥">easing function</a> specified on the last keyframe in the list is never applied. Each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④">keyframe</a> may have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="keyframe-specific-composite-operation">keyframe-specific composite operation</dfn> that, if set, is applied to all values specified in that keyframe. The possible operations and their meanings are identical to those defined for the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation">composite operation</a> associated with the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑤">keyframe effect</a> as a whole in <a href="#effect-composition">§ 5.4.4 Effect composition</a>. If the <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation">keyframe-specific composite operation</a> for a keyframe is not set, the composite operation specified for the keyframe effect as a whole is used for values specified in that keyframe. <h4 class="heading settled" data-level="5.3.2" id="computing-property-values">5.3.2. Computing property values<a class="self-link" href="#computing-property-values"></a></h4> <div class="algorithm" data-algorithm="compute a property value"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="compute-a-property-value">compute a property value</dfn> given a property <var>property</var>, a value <var>value</var>, and an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a></code> <var>element</var>: resolve <var>value</var> according to the “Computed Value” line of the <var>property</var>’s definition table, using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed values</a> of <var>element</var> as the context for resolving dependencies, and return the result. Note: The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value③">computed values</a> on <var>element</var> are not affected by this algorithm. This algorithm implies that property values specified in keyframes can establish order dependencies. When <a data-link-type="dfn" href="#compute-a-property-value" id="ref-for-compute-a-property-value">computing a property value</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed values</a> of dependencies held by <var>value</var> must be calculated first. <div class="example" id="example-62f40e1a"> <a class="self-link" href="#example-62f40e1a"></a> <pre class="highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>([{</c-> fontSize<c- o>:</c-> <c- t>'10px'</c-><c- p>,</c-> width<c- o>:</c-> <c- t>'10em'</c-> <c- p>},</c-> <c- p>{</c-> fontSize<c- o>:</c-> <c- t>'20px'</c-><c- p>,</c-> width<c- o>:</c-> <c- t>'20em'</c-> <c- p>}],</c-> <c- mf>1000</c-><c- p>);</c-> animation<c- p>.</c->currentTime <c- o>=</c-> <c- mf>500</c-><c- p>;</c-> console<c- p>.</c->log<c- p>(</c->getComputedStyle<c- p>(</c->elem<c- p>).</c->fontSize<c- p>);</c-> <c- c1>// Should be 15px</c-> console<c- p>.</c->log<c- p>(</c->getComputedStyle<c- p>(</c->elem<c- p>).</c->width<c- p>);</c-> <c- c1>// Should be 225px</c-> </pre> In this example, in order to <a data-link-type="dfn" href="#compute-a-property-value" id="ref-for-compute-a-property-value①">compute a property value</a> for <code>10em</code>, we need to know the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑤">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a> on the <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element②">target element</a>, which in turn is determined by the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①">effect value</a> for font-size, which in turn depends on computing property values for font-size. Hence, computing property values are subject to ordering constraints. </div> </div> <h4 class="heading settled" data-level="5.3.3" id="calculating-computed-keyframes">5.3.3. Calculating computed keyframes<a class="self-link" href="#calculating-computed-keyframes"></a></h4> Before calculating the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②">effect value</a> of a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑦">keyframe effect</a>, the property values on its <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑦">keyframes</a> are <a href="#computing-property-values">computed</a>, and the offset to use for any keyframes with a null <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset②">keyframe offset</a> is computed. The result of resolving these values is a set of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="computed-keyframes">computed keyframes</dfn>. The calculated <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset③">keyframe offsets</a> of a set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑧">keyframe</a> that includes suitable values for each null keyframe offset are referred to as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="computed-keyframe-offsets">computed keyframe offsets</dfn>. <div class="algorithm" data-algorithm="compute missing keyframe offsets"> To produce <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets">computed keyframe offsets</a>, we define a procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="compute-missing-keyframe-offsets">compute missing keyframe offsets</dfn> that takes a sequence of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑨">keyframes</a>, <var>keyframes</var>, and has the following steps: <ol> <li data-md> For each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⓪">keyframe</a> in <var>keyframes</var>, let the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①">computed keyframe offset</a> of the keyframe be equal to its <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑤">keyframe offset</a> value. <li data-md> If <var>keyframes</var> contains more than one <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①②">keyframe</a> and the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②">computed keyframe offset</a> of the first keyframe in <var>keyframes</var> is null, set the computed keyframe offset of the first keyframe to 0. <li data-md> If the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets④">computed keyframe offset</a> of the last <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑤">keyframe</a> in <var>keyframes</var> is null, set its computed keyframe offset to 1. <li data-md> For each pair of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑥">keyframes</a> <var>A</var> and <var>B</var> where: <ul> <li data-md> <var>A</var> appears before <var>B</var> in <var>keyframes</var>, and <li data-md> <var>A</var> and <var>B</var> have a <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets⑥">computed keyframe offset</a> that is not null, and <li data-md> all <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑦">keyframes</a> between <var>A</var> and <var>B</var> have a null <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets⑦">computed keyframe offset</a>, </ul> calculate the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets⑧">computed keyframe offset</a> of each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑧">keyframe</a> between <var>A</var> and <var>B</var> as follows: <ol> <li data-md> Let <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="offsetk">offset<var>k</var></dfn> be the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets⑨">computed keyframe offset</a> of a <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑨">keyframe</a> <var>k</var>. <li data-md> Let <var>n</var> be the number of keyframes between and including <var>A</var> and <var>B</var> minus 1. <li data-md> Let <var>index</var> refer to the position of <var>keyframe</var> in the sequence of keyframes between <var>A</var> and <var>B</var> such that the first keyframe after <var>A</var> has an <var>index</var> of 1. <li data-md> Set the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①⓪">computed keyframe offset</a> of <var>keyframe</var> to <a data-link-type="dfn" href="#offsetk" id="ref-for-offsetk">offset</a><var>A</var> + (offset<var>B</var> − offset<var>A</var>) × <var>index</var> / <var>n</var>. </ol> </ol> </div> <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes">Computed keyframes</a> are produced using the following procedure. Note that this procedure is only performed on a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑧">keyframe effect</a> having an <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target⑥">effect target</a> for which computed property values can be calculated. <ol> <li data-md> Let <var>computed keyframes</var> be an empty list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⓪">keyframes</a>. <li data-md> For each <var>keyframe</var> in the list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②①">keyframes</a> specified on this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑨">keyframe effect</a>, perform the following steps: <ol> <li data-md> Add a new empty <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②②">keyframe</a>, <var>computed keyframe</var>, to <var>computed keyframes</var>. <li data-md> For each property specified in <var>keyframe</var>: <ul> <li data-md> <a data-link-type="dfn" href="#compute-a-property-value" id="ref-for-compute-a-property-value②">Compute a property value</a> using the value specified on <var>keyframe</var> as the value, and the <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element③">target element</a> as the element; then add the property and resulting value to <var>computed keyframe</var>. <li data-md> For shorthand properties, add the equivalent longhand properties. <li data-md> For logical properties <a data-link-type="biblio" href="#biblio-css-logical-1" title="CSS Logical Properties and Values Level 1">[CSS-LOGICAL-1]</a>, add the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical" id="ref-for-logical-to-physical">equivalent physical properties</a> <a data-link-type="biblio" href="#biblio-css-writing-modes-4" title="CSS Writing Modes Level 4">[CSS-WRITING-MODES-4]</a> based on the computed value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and/or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> for the <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target⑦">effect target</a>. </ul> For example, if <var>keyframe</var> has a value of 12pt for the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a>, the user agent will <a data-link-type="dfn" href="#compute-a-property-value" id="ref-for-compute-a-property-value③">compute a property value</a> of 16px for each of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand">longhand properties</a>: <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a>. As a result, <var>computed keyframe</var> would not have a value for the border-width property, but would instead include each of the longhand properties, each with the value 16px. If conflicts arise when expanding shorthand properties or replacing logical properties with physical properties, apply the following rules in order until the conflict is resolved: <ol> <li data-md> Longhand properties override shorthand properties (e.g. <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a> overrides <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top">border-top</a>). <li data-md> Shorthand properties with fewer longhand components override those with more longhand components (e.g. <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top①">border-top</a> overrides <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a>). <li data-md> Physical properties override logical properties. <li data-md> For shorthand properties with an equal number of longhand components, properties whose IDL name (see the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#css-property-to-idl-attribute" id="ref-for-css-property-to-idl-attribute">CSS property to IDL attribute</a> algorithm <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a>) appears earlier when sorted in ascending order by the Unicode codepoints that make up each IDL name, override those who appear later. </ol> </ol> <li data-md> Apply the procedure to <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets">compute missing keyframe offsets</a> to <var>computed keyframes</var>. <li data-md> Return <var>computed keyframes</var>. </ol> <h4 class="heading settled" data-level="5.3.4" id="the-effect-value-of-a-keyframe-animation-effect">5.3.4. The effect value of a keyframe effect<a class="self-link" href="#the-effect-value-of-a-keyframe-animation-effect"></a></h4> The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value③">effect value</a> of a single property referenced by a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⓪">keyframe effect</a> as one of its <a data-link-type="dfn" href="#target-property" id="ref-for-target-property④">target properties</a>, for a given <var>iteration progress</var>, <var>iteration index</var> and <var>underlying value</var> is calculated as follows. <ol> <li data-md> If <var>iteration progress</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪⑥">unresolved</a> abort this procedure. <li data-md> Let <var>target property</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand①">longhand property</a> for which the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value④">effect value</a> is to be calculated. <li data-md> If <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑤">animation type</a> of the <var>target property</var> is <a data-link-type="dfn" href="#not-animatable" id="ref-for-not-animatable②">not animatable</a> abort this procedure since the effect cannot be applied. <li data-md> If the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①①">keyframe effect</a> does not have an <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target⑧">effect target</a>, or if the effect target cannot have computed property values calculated, abort this procedure. <li data-md> Define the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="neutral-value-for-composition">neutral value for composition</dfn> as a value which, when combined with an <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①">underlying value</a> using the <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add">add</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation②">composite operation</a>, produces the underlying value. <li data-md> Let <var>property-specific keyframes</var> be the result of getting the set of <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes①">computed keyframes</a> for this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①②">keyframe effect</a>. <li data-md> Remove any <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②③">keyframes</a> from <var>property-specific keyframes</var> that do not have a property value for <var>target property</var>. <li data-md> If <var>property-specific keyframes</var> is empty, return <var>underlying value</var>. <li data-md> If there is no <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②④">keyframe</a> in <var>property-specific keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①①">computed keyframe offset</a> of 0, create a new keyframe with a computed keyframe offset of 0, a property value set to the <a data-link-type="dfn" href="#neutral-value-for-composition" id="ref-for-neutral-value-for-composition">neutral value for composition</a>, and a <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation③">composite operation</a> of <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add①">add</a>, and prepend it to the beginning of <var>property-specific keyframes</var>. <li data-md> Similarly, if there is no <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⑥">keyframe</a> in <var>property-specific keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①③">computed keyframe offset</a> of 1, create a new keyframe with a computed keyframe offset of 1, a property value set to the <a data-link-type="dfn" href="#neutral-value-for-composition" id="ref-for-neutral-value-for-composition①">neutral value for composition</a>, and a <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation④">composite operation</a> of <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add②">add</a>, and append it to the end of <var>property-specific keyframes</var>. <li data-md> Let <var>interval endpoints</var> be an empty sequence of keyframes. <li data-md> Populate <var>interval endpoints</var> by following the steps from the first matching condition below: <dl class="switch"> <dt data-md>If <var>iteration progress</var> < 0 and there is more than one <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⑧">keyframe</a> in <var>property-specific keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①⑤">computed keyframe offset</a> of 0, <dd data-md> Add the first <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⑨">keyframe</a> in <var>property-specific keyframes</var> to <var>interval endpoints</var>. <dt data-md>If <var>iteration progress</var> ≥ 1 and there is more than one <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⓪">keyframe</a> in <var>property-specific keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①⑥">computed keyframe offset</a> of 1, <dd data-md> Add the last <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③①">keyframe</a> in <var>property-specific keyframes</var> to <var>interval endpoints</var>. <dt data-md>Otherwise, <dd data-md> <ol> <li data-md> Append to <var>interval endpoints</var> the last <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③②">keyframe</a> in <var>property-specific keyframes</var> whose <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①⑦">computed keyframe offset</a> is less than or equal to <var>iteration progress</var> and less than 1. If there is no such keyframe (because, for example, the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①⑤">iteration progress</a> is negative), add the last keyframe whose computed keyframe offset is 0. <li data-md> Append to <var>interval endpoints</var> the next <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑤">keyframe</a> in <var>property-specific keyframes</var> after the one added in the previous step. </ol> </dl> <li data-md> For each <var>keyframe</var> in <var>interval endpoints</var>: <ol> <li data-md> If <var>keyframe</var> has a <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation⑤">composite operation</a> that is not <a data-link-type="dfn" href="#composite-operation-replace" id="ref-for-composite-operation-replace">replace</a>, or <var>keyframe</var> has no composite operation and the composite operation of this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①③">keyframe effect</a> is not replace, then perform the following steps: <ol> <li data-md> Let <var>composite operation to use</var> be the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation⑧">composite operation</a> of <var>keyframe</var>, or if it has none, the composite operation of this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①④">keyframe effect</a>. <li data-md> Let <var>value to combine</var> be the property value of <var>target property</var> specified on <var>keyframe</var>. <li data-md> Replace the property value of <var>target property</var> on <var>keyframe</var> with the result of combining <var>underlying value</var> (<var>V</var>a) and <var>value to combine</var> (<var>V</var>b) using the procedure for the <var>composite operation to use</var> corresponding to the <var>target property</var>’s <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑥">animation type</a>. </ol> </ol> <li data-md> If there is only one keyframe in <var>interval endpoints</var> return the property value of <var>target property</var> on that keyframe. <li data-md> Let <var>start offset</var> be the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets①⑨">computed keyframe offset</a> of the first keyframe in <var>interval endpoints</var>. <li data-md> Let <var>end offset</var> be the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②⓪">computed keyframe offset</a> of last keyframe in <var>interval endpoints</var>. <li data-md> Let <var>interval distance</var> be the result of evaluating <code>(<var>iteration progress</var> − <var>start offset</var>) / (<var>end offset</var> − <var>start offset</var>)</code>. <li data-md> Let <var>transformed distance</var> be the result of evaluating the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function⑦">easing function</a> associated with the first keyframe in <var>interval endpoints</var> passing <var>interval distance</var> as the input progress. <li data-md> Return the result of applying the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation①">interpolation procedure</a> defined by the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑦">animation type</a> of the <var>target property</var> to the values of the <var>target property</var> specified on the two keyframes in <var>interval endpoints</var>, taking the first such value as <var>V</var>start and the second as <var>V</var>end and using <var>transformed distance</var> as the interpolation parameter <var>p</var>. </ol> <div class="note" role="note"> Note that this procedure assumes the following about the list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑥">keyframes</a> specified on the effect: <ul> <li data-md> Each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑦">keyframe</a> has a specified <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②①">computed keyframe offset</a> in the range [0, 1]. <li data-md> The list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑧">keyframes</a> is sorted in ascending order by <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②②">computed keyframe offset</a>. <li data-md> For a given property, there is at most one specified property value on each keyframe. </ul> It is the responsibility of the user of the model (for example, a declarative markup or programming interface) to ensure these conditions are met. For example, for the <a href="#programming-interface">programming interface</a> defined by this specification, these conditions are met by the procedure to produce the <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes②">computed keyframes</a> that become the input to this procedure. </div> Note: this procedure permits overlapping <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑨">keyframes</a>. The behavior is that at the point of overlap the output value jumps to the value of the last defined keyframe at that offset. For overlapping keyframes at 0 or 1, the output value for <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①⑥">iteration progress</a> values less than 0 or greater than or equal to 1 is the value of the first keyframe or the last keyframe in <var>keyframes</var> respectively. <div class="note" role="note"> Note that <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes③">computed keyframes</a> are “live”: user-agents behave as if they are recreated every time the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑤">effect value</a> is calculated. For example, if there is an ongoing transition on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size③">font-size</a> property from <code>10px</code> to <code>20px</code>, a property value specified as <code>1em</code> in a <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④③">keyframe</a> would during <a href="#calculating-computed-keyframes">keyframe computation</a> resolve against the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑥">computed value</a> in the range [<code>10px</code>, <code>20px</code>] produced by the transition on font-size. </div> <div class="issue" id="issue-4c8c2050"> <a class="self-link" href="#issue-4c8c2050"></a> In the presence of certain easing functions, the input <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①⑦">iteration progress</a> to an animation effect is not limited to the range [0, 1]. Currently, however, keyframe offsets are limited to the range [0, 1] and property values are simply extrapolated for input iteration progress values outside this range. We have considered removing this restriction since some cases exist where it is useful to be able to specify non-linear changes in property values at <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①⑨">iteration progress</a> values outside the range [0, 1]. One example is an animation that interpolates from green to yellow but has an overshoot easing function that makes it temporarily interpolate “beyond” yellow to red before settling back to yellow. While this effect could be achieved by modification of the keyframes and easing function, this approach seems to break the model’s separation of timing concerns from animation effects. It is not clear how this effect should be achieved but we note that allowing keyframe offsets outside [0, 1] can make the currently specified behavior, where keyframes at offset 0 and 1 are synthesized as necessary, inconsistent. See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section 4 (Keyframe offsets outside [0, 1]) of minuted discussion from Tokyo 2013 F2F</a>. <a href="https://github.com/w3c/csswg-drafts/issues/2081"><https://github.com/w3c/csswg-drafts/issues/2081></a> </div> <h3 class="heading settled" data-level="5.4" id="combining-effects">5.4. Combining effects<a class="self-link" href="#combining-effects"></a></h3> <div class="informative-bg"> This section is non-normative After calculating the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑥">effect values</a> for a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑤">keyframe effect</a>, they are applied to the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦②">animation effect</a>’s <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑤">target properties</a>. Since it is possible for multiple <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect③">in effect</a> <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑥">keyframe effects</a> to target the same property it is often necessary to combine the results of several keyframe effects together. This process is called <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite | composition" data-noexport id="composite">compositing</dfn> and is based on establishing an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①">effect stack</a> for each property targeted by an in effect <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦③">animation effect</a>. After <a data-link-type="dfn" href="#composite" id="ref-for-composite">compositing</a> the results of <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑧">keyframe effects</a> together, the composited result is combined with other values specified for the <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑥">target property</a>. The arrangement is illustrated below: <figure> <img alt="Overview of the application of effect values to their target properties" src="images/animation-cascade.svg" width="500"> <figcaption> Overview of the application of <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑦">effect values</a> to their <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑦">target properties</a>. The results of <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑨">keyframe effects</a> targeting the same property are composited together using an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack②">effect stack</a>. The result of this composition is then inserted into the CSS cascade at an appropriate point. </figcaption> </figure> For the first part of this operation—combining <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑧">effect values</a> that target the same <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑧">property</a>—it is necessary to determine both how <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⓪">keyframe effects</a> are combined with one another, as well as the order in which they are applied, that is, their relative composite order. The matter of how <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑨">effect values</a> are combined is governed by the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⓪">composite operation</a> of the corresponding <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②①">keyframe effects</a>. The relative composite order of <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⓪">effect values</a> is determined by an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack③">effect stack</a> established for each animated property. </div> <h4 class="heading settled" data-level="5.4.1" id="animation-classes">5.4.1. Animation classes<a class="self-link" href="#animation-classes"></a></h4> This specification provides a common animation model intended to be used by other specifications that define markup or programming interfaces on top of this model. The particular markup or programming interface that generated an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑨">animation</a> defines its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-class">animation class</dfn>. Further specifications may define specialized behavior for composite ordering between different classes of animations or within a particular class. <div class="informative-bg"> This section is non-normative For example, animations whose <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class①">class</a> is “CSS animation” are defined as having a higher composite order than animations whose class is “CSS transition” but lower than other animations without a specific class. Within the set of “CSS animation” objects, specialized composite ordering is defined based on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name" id="ref-for-propdef-animation-name">animation-name</a> property amongst other factors. </div> <h4 class="heading settled" data-level="5.4.2" id="the-effect-stack">5.4.2. The effect stack<a class="self-link" href="#the-effect-stack"></a></h4> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effect-stack">effect stack</dfn> is associated with each property <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑨">targeted</a> by one or more <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②②">keyframe effects</a>. The <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack④">effect stack</a> establishes the relative composite order of keyframe effects. The relative <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="composite order" data-lt="animation composite order" id="animation-composite-order">composite order</dfn> of any two <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②④">keyframe effects</a> <var>A</var> and <var>B</var> within an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑤">effect stack</a> is established by comparing their properties as follows: <ol> <li data-md> Sort <var>A</var> and <var>B</var> by applying the following conditions in turn until the order is resolved, <ol> <li data-md> If <var>A</var> and <var>B</var>’s <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①③">associated animations</a> differ by <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class②">class</a>, sort by any inter-class composite order as defined for the corresponding classes. <li data-md> If <var>A</var> and <var>B</var> are still not sorted, sort by any <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class③">class</a>-specific composite order defined by the common class of <var>A</var> and <var>B</var>’s <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①④">associated animations</a>. <li data-md> If <var>A</var> and <var>B</var> are still not sorted, sort by the position of their <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①⑤">associated animations</a> in the <a data-link-type="dfn" href="#global-animation-list" id="ref-for-global-animation-list">global animation list</a>. </ol> </ol> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦④">Animation effects</a> that sort earlier have lower composite order. <h4 class="heading settled" data-level="5.4.3" id="calculating-the-result-of-an-effect-stack">5.4.3. Calculating the result of an effect stack<a class="self-link" href="#calculating-the-result-of-an-effect-stack"></a></h4> In order to calculate the final value of an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑥">effect stack</a>, the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①①">effect values</a> of each <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⑤">keyframe effect</a> in the stack are combined in composite order. Each step in the process of evaluating an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑦">effect stack</a> takes an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="underlying-value">underlying value</dfn> as input. For each <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⑥">keyframe effect</a> in the stack, the appropriate <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①②">effect value</a> from the keyframe effect is combined with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value③">underlying value</a> to produce a new value. This resulting value becomes the underlying value for combining the next keyframe effect in the stack. The final value of an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑧">effect stack</a>, called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="composited-value">composited value</dfn>, is simply the result of combining the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①③">effect value</a> of the final (highest composite order) <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⑨">keyframe effect</a> in the stack with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑤">underlying value</a> at that point. <h4 class="heading settled" data-level="5.4.4" id="effect-composition">5.4.4. Effect composition<a class="self-link" href="#effect-composition"></a></h4> The specific operation used to combine an <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①④">effect value</a> with an<a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑥">underlying value</a> is determined by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="composite-operation">composite operation</dfn> of the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⓪">keyframe effect</a> that produced the effect value. This specification defines three <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①①">composite operations</a> as follows: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite operation replace" data-noexport id="composite-operation-replace">replace</dfn> <dd data-md> The result of compositing the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⑥">effect value</a> with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑦">underlying value</a> is simply the effect value. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite operation add" data-noexport id="composite-operation-add">add</dfn> <dd data-md> The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⑧">effect value</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition">added</a> to the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑧">underlying value</a>. For <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑧">animation types</a> where the addition operation is defined such that it is not commutative, the order of the operands is <code><a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑨">underlying value</a> + <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⑨">effect value</a></code>. <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite operation accumulate" data-noexport id="composite-operation-accumulate">accumulate</dfn> <dd data-md> The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②⓪">effect value</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation">accumulated</a> onto the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⓪">underlying value</a>. For <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑨">animation types</a> where the accumulation operation is defined such that it is not commutative, the order of the operands is underlying value followed by effect value. </dl> <h4 class="heading settled" data-level="5.4.5" id="applying-the-composited-result">5.4.5. Applying the composited result<a class="self-link" href="#applying-the-composited-result"></a></h4> Applying a <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value">composited value</a> to a <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①⓪">target property</a> is achieved by adding a specified value to the CSS cascade. The level of the cascade to which this specified value is added depends on the <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class④">class</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⓪">animation</a> <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①⑥">associated with</a> the effect with the highest composite order in the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑨">effect stack</a> for a given property. By default, the specified value is added to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation" id="ref-for-cascade-origin-animation">Animation Origin</a> of the cascade. <a data-link-type="biblio" href="#biblio-css-cascade-3" title="CSS Cascading and Inheritance Level 3">[CSS-CASCADE-3]</a> <div class="example" id="example-b6e41efa"><a class="self-link" href="#example-b6e41efa"></a> For example, if the effect with the highest composite order is associated with a “CSS transition”-class animation, the <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value①">composited value</a> will be added to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-transition" id="ref-for-cascade-origin-transition">Transition Origin</a> of the cascade. </div> The <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value②">composited value</a> calculated for a CSS <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①①">target property</a> is applied using the following process: <ol> <li data-md> Calculate the <var>base value</var> of the property as the value generated for that property by finding the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑦">computed value</a> for that property in the absence of animations. <li data-md> Establish the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①⓪">effect stack</a> for the property (see <a href="#the-effect-stack">§ 5.4.2 The effect stack</a>). <li data-md> Calculate the <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value③">composited value</a> of the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①①">effect stack</a> passing in the <var>base value</var> of the property as the initial <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①②">underlying value</a> (see <a href="#calculating-the-result-of-an-effect-stack">§ 5.4.3 Calculating the result of an effect stack</a>). <li data-md> Insert the <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value④">composited value</a> into the CSS cascade at the level defined for the <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class⑤">class</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤①">animation</a> <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①⑦">associated with</a> the effect at the top of the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①②">effect stack</a> established for the <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①②">target property</a>. </ol> <h3 class="heading settled" data-level="5.5" id="replacing-animations">5.5. Replacing animations<a class="self-link" href="#replacing-animations"></a></h3> <div class="informative-bg"> This section is non-normative Using the programming interface defined in this specification, it is possible to repeatedly trigger new animations that contribute to an element’s animated style indefinitely. For example, consider the following code: <div class="example" id="example-86ce4327"> <a class="self-link" href="#example-86ce4327"></a> <pre class="highlight">elem<c- p>.</c->addEventListener<c- p>(</c-><c- t>'mousemove'</c-><c- p>,</c-> evt <c- p>=></c-> <c- p>{</c-> circle<c- p>.</c->animate<c- p>(</c-> <c- p>{</c-> transform<c- o>:</c-> <c- sb>`translate(</c-><c- si>${</c->evt<c- p>.</c->clientX<c- si>}</c-><c- sb>px, </c-><c- si>${</c->evt<c- p>.</c->clientY<c- si>}</c-><c- sb>px)`</c-> <c- p>},</c-> <c- p>{</c-> duration<c- o>:</c-> <c- mf>500</c-><c- p>,</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>}</c-> <c- p>);</c-> <c- p>});</c-> </pre> </div> This will generate a new forwards-filling animation each time the mouse is moved, quickly producing hundreds, even thousands of forwards-filling animations. If the user agent needed to retain all such animations, the list of animations would grow in an unbounded fashion, producing a memory leak. This section defines a mechanism that causes overridden animations to be automatically removed unless the author explicitly requests they be retained. </div> <h4 class="heading settled" data-level="5.5.1" id="animation-replace-state">5.5.1. Replace state<a class="self-link" href="#animation-replace-state"></a></h4> An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤②">animation</a> maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="replace-state">replace state</dfn> that can be one of the following values: <ul> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="active replace state" data-noexport id="active-replace-state">active</dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="removed replace state" data-noexport id="removed-replace-state">removed</dfn> <li data-md> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="persisted replace state" data-noexport id="persisted-replace-state">persisted</dfn> </ul> The initial value of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤③">animation</a>’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state①">replace state</a> is <a data-link-type="dfn" href="#active-replace-state" id="ref-for-active-replace-state">active</a>. The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑤">animation effects</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤④">animation</a> whose <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state②">replace state</a> is <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state①">removed</a> are not included in the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①③">effect stacks</a> of their <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①③">target properties</a>. <h4 class="heading settled" data-level="5.5.2" id="removing-replaced-animations">5.5.2. Removing replaced animations<a class="self-link" href="#removing-replaced-animations"></a></h4> An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑤">animation</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="replaceable" data-lt="replaceable animation" data-noexport id="replaceable-animation">replaceable</dfn> if all of the following conditions are true: <ul> <li data-md> The existence of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑥">animation</a> is not prescribed by markup. That is, it is not a CSS animation with an <a data-link-type="dfn" href="https://drafts.csswg.org/css-animations-2/#owning-element" id="ref-for-owning-element">owning element</a>, nor a CSS transition with an <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-2/#owning-element" id="ref-for-owning-element①">owning element</a>. <li data-md> The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑦">animation</a>’s <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state⑧">play state</a> is <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①④">finished</a>. <li data-md> The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑧">animation</a>’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state③">replace state</a> is not <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state②">removed</a>. <li data-md> The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑨">animation</a> is associated with a <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline⑦">monotonically increasing</a> <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤②">timeline</a>. <li data-md> The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⓪">animation</a> has an <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②⑦">associated effect</a>. <li data-md> The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥①">animation</a>’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②⑧">associated effect</a> is <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect⑤">in effect</a>. <li data-md> The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥②">animation</a>’s <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect②⑨">associated effect</a> has an <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①⓪">effect target</a>. </ul> When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="remove-replaced-animations">remove replaced animations</dfn> for a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code>, <var>doc</var>, then for every <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥③">animation</a>, <var>animation</var>, that: <ul> <li data-md> has an <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①⑧">associated</a> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑥">animation effect</a> whose <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①①">effect target</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant①">descendant</a> of <var>doc</var>, and <li data-md> is <a data-link-type="dfn" href="#replaceable-animation" id="ref-for-replaceable-animation">replaceable</a>, and <li data-md> has a <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state④">replace state</a> of <a data-link-type="dfn" href="#active-replace-state" id="ref-for-active-replace-state①">active</a>, and <li data-md> for which there exists for each <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①④">target property</a> of every <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑦">animation effect</a> <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation①⑨">associated</a> with <var>animation</var>, an animation effect associated with a <a data-link-type="dfn" href="#replaceable-animation" id="ref-for-replaceable-animation①">replaceable</a> <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥④">animation</a> with a higher <a data-link-type="dfn" href="#animation-composite-order" id="ref-for-animation-composite-order①">composite order</a> than <var>animation</var> that includes the same target property </ul> perform the following steps: <ol> <li data-md> Set <var>animation</var>’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑤">replace state</a> to <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state③">removed</a>. <li data-md> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create②">Create</a> an <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent②">AnimationPlaybackEvent</a></code>, <var>removeEvent</var>. <li data-md> Set <var>removeEvent</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type②">type</a></code> attribute to <a data-link-type="dfn" href="#remove-event" id="ref-for-remove-event">remove</a>. <li data-md> Set <var>removeEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime②">currentTime</a></code> attribute to the <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑤②">current time</a> of <var>animation</var>. <li data-md> Set <var>removeEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime③">timelineTime</a></code> attribute to the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①①">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤③">timeline</a> with which <var>animation</var> is associated. <li data-md> If <var>animation</var> has a <a data-link-type="dfn" href="#animation-document-for-timing" id="ref-for-animation-document-for-timing⑤">document for timing</a>, then append <var>removeEvent</var> to its document for timing’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue④">pending animation event queue</a> along with its target, <var>animation</var>. For the <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time⑥">scheduled event time</a>, use the result of applying the procedure to convert <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time④">timeline time to origin-relative time</a> to the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①②">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤④">timeline</a> with which <var>animation</var> is associated. Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch③">dispatch</a> <var>removeEvent</var> at <var>animation</var>. The task source for this task is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source②">DOM manipulation task source</a>. </ol> <h3 class="heading settled" data-level="5.6" id="side-effects-section">5.6. Side effects of animation<a class="self-link" href="#side-effects-section"></a></h3> For every property targeted by at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑨">animation effect</a> that is <a data-link-type="dfn" href="#current" id="ref-for-current②">current</a> or <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect⑥">in effect</a>, and which is associated with an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑤">animation</a> whose <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑥">replace state</a> is not <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state④">removed</a>, the user agent must act as if the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-will-change-1/#propdef-will-change" id="ref-for-propdef-will-change">will-change</a> property <a data-link-type="biblio" href="#biblio-css-will-change-1" title="CSS Will Change Module Level 1">[css-will-change-1]</a> on the <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①②">effect target</a> includes the property. Note: As a result of the above requirement, if an animation targets, for example, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> property of an element, a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43">stacking context</a> will be created for the <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①③">effect target</a> so long as the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑥">animation</a> is in the <a data-link-type="dfn" href="#animation-effect-before-phase" id="ref-for-animation-effect-before-phase⑨">before phase</a>, the <a data-link-type="dfn" href="#animation-effect-active-phase" id="ref-for-animation-effect-active-phase⑦">active phase</a> or, if it has a <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①①">fill mode</a> of <a data-link-type="dfn" href="#fill-mode-forwards" id="ref-for-fill-mode-forwards③">forwards</a> or <a data-link-type="dfn" href="#fill-mode-both" id="ref-for-fill-mode-both③">both</a>, the <a data-link-type="dfn" href="#animation-effect-after-phase" id="ref-for-animation-effect-after-phase①⓪">after phase</a>. <h2 class="heading settled" data-level="6" id="programming-interface">6. Programming interface<a class="self-link" href="#programming-interface"></a></h2> <div class="informative-bg"> This section is non-normative In addition to the abstract model described above, Web Animations also defines a programming interface to the model. This interface can be used to inspect and extend animations produced by declarative means or for directly producing animations when a procedural approach is more suitable. </div> <h3 class="heading settled" data-level="6.1" id="time-values-in-the-programming-interface">6.1. Time values in the programming interface<a class="self-link" href="#time-values-in-the-programming-interface"></a></h3> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑦">Time values</a> are represented in the programming interface with the type <code>double</code>. <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪⑦">Unresolved</a> time values are represented by the value <code>null</code>. <h3 class="heading settled" data-level="6.2" id="the-animationtimeline-interface">6.2. The <code class="idl"><a data-link-type="idl" href="#animationtimeline" id="ref-for-animationtimeline">AnimationTimeline</a></code> interface<a class="self-link" href="#the-animationtimeline-interface"></a></h3> <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⑤">Timelines</a> are represented in the Web Animations API by the <code class="idl"><a data-link-type="idl" href="#animationtimeline" id="ref-for-animationtimeline①">AnimationTimeline</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="animationtimeline"><code><c- g>AnimationTimeline</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-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-animationtimeline-currenttime" id="ref-for-dom-animationtimeline-currenttime"><c- g>currentTime</c-></a>; }; </pre> <div class="attributes"> <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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①">double</a>, readonly, nullable <dd data-md> Returns the <a data-link-type="dfn" href="#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="#inactive-timeline" id="ref-for-inactive-timeline①②">inactive</a>. </dl> </div> <h3 class="heading settled" data-level="6.3" id="the-documenttimeline-interface">6.3. The <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline">DocumentTimeline</a></code> interface<a class="self-link" href="#the-documenttimeline-interface"></a></h3> <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline⑤">Document timelines</a>, including the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline⑤">default document timeline</a>, are represented in the Web Animations API by the <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline①">DocumentTimeline</a></code> interface. <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-documenttimelineoptions"><code><c- g>DocumentTimelineOptions</c-></code></dfn> { <a data-link-type="idl-name" href="https://w3c.github.io/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="DOMHighResTimeStamp" href="#dom-documenttimelineoptions-origintime" id="ref-for-dom-documenttimelineoptions-origintime"><c- g>originTime</c-></a> = 0; }; [<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="documenttimeline"><code><c- g>DocumentTimeline</c-></code></dfn> : <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline②"><c- n>AnimationTimeline</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-documenttimeline-documenttimeline" id="ref-for-dom-documenttimeline-documenttimeline"><c- g>constructor</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-documenttimelineoptions" id="ref-for-dictdef-documenttimelineoptions"><c- n>DocumentTimelineOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-documenttimeline-documenttimeline-options-options" id="ref-for-dom-documenttimeline-documenttimeline-options-options"><c- g>options</c-></a> = {}); }; </pre> <div class="members"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentTimelineOptions" data-dfn-type="dict-member" data-export id="dom-documenttimelineoptions-origintime"><code>originTime</code></dfn>, of type <a data-link-type="idl-name" href="https://w3c.github.io/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp①">DOMHighResTimeStamp</a>, defaulting to <code>0</code> <dd data-md> The <a data-link-type="dfn" href="#origin-time" id="ref-for-origin-time②">origin time</a> for the timeline specified as a real number of milliseconds relative to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-time-origin" id="ref-for-concept-settings-object-time-origin④">time origin</a>. </dl> </div> <div class="constructors"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentTimeline" data-dfn-type="constructor" data-export data-lt="DocumentTimeline(options)|constructor(options)|DocumentTimeline()|constructor()" id="dom-documenttimeline-documenttimeline"><code>DocumentTimeline (<var>options</var>)</code></dfn> <dd data-md> Creates a new <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline②">DocumentTimeline</a></code>. The <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> with which the timeline is associated is the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object②">current global object</a>. <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentTimeline/DocumentTimeline(options)" data-dfn-type="argument" data-export id="dom-documenttimeline-documenttimeline-options-options"><code>options</code></dfn> <dd data-md> Configuration parameters for the newly-created timeline. This specification defines only the <code class="idl"><a data-link-type="idl" href="#dom-documenttimelineoptions-origintime" id="ref-for-dom-documenttimelineoptions-origintime①">originTime</a></code> member but other specifications may extend this set. </dl> </div> </dl> </div> <h3 class="heading settled" data-level="6.4" id="the-animation-interface">6.4. The <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation">Animation</a></code> interface<a class="self-link" href="#the-animation-interface"></a></h3> <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑦">Animations</a> are represented in the Web Animations API by the <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animation"><code>Animation</code></dfn> 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-> <a class="idl-code" data-link-type="interface" href="#animation" id="ref-for-animation①"><c- g>Animation</c-></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-animation-animation" id="ref-for-dom-animation-animation"><c- g>constructor</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-effect" id="ref-for-dom-animation-animation-effect-timeline-effect"><c- g>effect</c-></a> = <c- b>null</c->, <c- b>optional</c-> <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline③"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-timeline" id="ref-for-dom-animation-animation-effect-timeline-timeline"><c- g>timeline</c-></a>); <c- b>attribute</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="DOMString" href="#dom-animation-id" id="ref-for-dom-animation-id"><c- g>id</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect①"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="AnimationEffect?" href="#dom-animation-effect" id="ref-for-dom-animation-effect"><c- g>effect</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline④"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="AnimationTimeline?" href="#dom-animation-timeline" id="ref-for-dom-animation-timeline"><c- g>timeline</c-></a>; <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-type="double?" href="#dom-animation-starttime" id="ref-for-dom-animation-starttime"><c- g>startTime</c-></a>; <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-type="double?" href="#dom-animation-currenttime" id="ref-for-dom-animation-currenttime"><c- g>currentTime</c-></a>; <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-type="double" href="#dom-animation-playbackrate" id="ref-for-dom-animation-playbackrate"><c- g>playbackRate</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-animationplaystate" id="ref-for-enumdef-animationplaystate"><c- n>AnimationPlayState</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationPlayState" href="#dom-animation-playstate" id="ref-for-dom-animation-playstate"><c- g>playState</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-animationreplacestate" id="ref-for-enumdef-animationreplacestate"><c- n>AnimationReplaceState</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationReplaceState" href="#dom-animation-replacestate" id="ref-for-dom-animation-replacestate"><c- g>replaceState</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-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-animation-pending" id="ref-for-dom-animation-pending"><c- g>pending</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-promise" id="ref-for-idl-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="#animation" id="ref-for-animation②"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-ready" id="ref-for-dom-animation-ready"><c- g>ready</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-promise" id="ref-for-idl-promise①"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="#animation" id="ref-for-animation③"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-finished" id="ref-for-dom-animation-finished"><c- g>finished</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onfinish" id="ref-for-dom-animation-onfinish"><c- g>onfinish</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-oncancel" id="ref-for-dom-animation-oncancel"><c- g>oncancel</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onremove" id="ref-for-dom-animation-onremove"><c- g>onremove</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-animation-cancel" id="ref-for-dom-animation-cancel"><c- g>cancel</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-animation-finish" id="ref-for-dom-animation-finish①"><c- g>finish</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-animation-play" id="ref-for-dom-animation-play"><c- g>play</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-animation-pause" id="ref-for-dom-animation-pause"><c- g>pause</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-animation-updateplaybackrate" id="ref-for-dom-animation-updateplaybackrate"><c- g>updatePlaybackRate</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="argument" href="#dom-animation-updateplaybackrate-playbackrate-playbackrate" id="ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate"><c- g>playbackRate</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-animation-reverse" id="ref-for-dom-animation-reverse"><c- g>reverse</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-animation-persist" id="ref-for-dom-animation-persist"><c- g>persist</c-></a>(); [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions"><c- g>CEReactions</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-animation-commitstyles" id="ref-for-dom-animation-commitstyles"><c- g>commitStyles</c-></a>(); }; </pre> <div class="constructors"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="constructor" data-export data-lt="Animation(effect, timeline)|constructor(effect, timeline)|Animation(effect)|constructor(effect)|Animation()|constructor()" id="dom-animation-animation"><code>Animation (<var>effect</var>, <var>timeline</var>)</code></dfn> <dd data-md> Creates a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation④">Animation</a></code> object using the following procedure: <ol> <li data-md> Let <var>animation</var> be a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation⑤">Animation</a></code> object. <li data-md> Run the procedure to <a data-link-type="dfn" href="#animation-set-the-timeline-of-an-animation" id="ref-for-animation-set-the-timeline-of-an-animation">set the timeline of an animation</a> on <var>animation</var> passing <var>timeline</var> as the <var>new timeline</var>; or, if the <var>timeline</var> argument is missing, passing the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline⑥">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window①">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window①">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object③">current global object</a>. <li data-md> Run the procedure to <a data-link-type="dfn" href="#animation-set-the-associated-effect-of-an-animation" id="ref-for-animation-set-the-associated-effect-of-an-animation①">set the associated effect of an animation</a> on <var>animation</var> passing <var>source</var> as the <var>new effect</var>. </ol> <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation/Animation(effect, timeline)" data-dfn-type="argument" data-export id="dom-animation-animation-effect-timeline-effect"><code>effect</code></dfn> <dd data-md> An optional value which, if not <code>null</code>, specifies the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect③⓪">associated effect</a> to assign to the newly created <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑧">animation</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation/Animation(effect, timeline)" data-dfn-type="argument" data-export id="dom-animation-animation-effect-timeline-timeline"><code>timeline</code></dfn> <dd data-md> An optional value which, if present, specifies the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⑥">timeline</a> with which to associate the newly-created <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑨">animation</a>. If missing, the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline⑦">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①⓪">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window②">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window②">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object④">current global object</a> is used. </dl> </div> </dl> </div> <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-id"><code>id</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString①">DOMString</a> <dd data-md> A string used to identify the animation. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-effect"><code>effect</code></dfn>, of type <a data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect②">AnimationEffect</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect③①">associated effect</a> of this animation. Setting this attribute updates the object’s associated effect using the procedure to <a data-link-type="dfn" href="#animation-set-the-associated-effect-of-an-animation" id="ref-for-animation-set-the-associated-effect-of-an-animation②">set the associated effect of an animation</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-timeline"><code>timeline</code></dfn>, of type <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline⑤">AnimationTimeline</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⑦">timeline</a> associated with this animation. Setting this attribute updates the object’s timeline using the procedure to <a data-link-type="dfn" href="#animation-set-the-timeline-of-an-animation" id="ref-for-animation-set-the-timeline-of-an-animation①">set the timeline of an animation</a>. <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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑥">double</a>, nullable <dd data-md> Returns the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑤③">start time</a> of this animation. 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. <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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑦">double</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑤③">current time</a> of this animation. Setting this attribute follows the procedure to <a data-link-type="dfn" href="#animation-set-the-current-time" id="ref-for-animation-set-the-current-time③">set the current time</a> of this object to the new value. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-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> <dd data-md> The <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④⓪">playback rate</a> of this animation. Setting this attribute follows the procedure to <a data-link-type="dfn" href="#set-the-playback-rate" id="ref-for-set-the-playback-rate②">set the playback rate</a> of this object to the new value. <div class="note" role="note"> Setting this attribute performs a synchronous update to the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④①">playback rate</a> meaning that it does not make any attempt to synchronize with the playback state of animations running on a separate process or thread. As a result, setting the <code class="idl"><a data-link-type="idl" href="#dom-animation-playbackrate" id="ref-for-dom-animation-playbackrate①">playbackRate</a></code> for an in-flight animation can cause it to jump. To set the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④②">playback rate</a> for an in-flight animation such that it smoothly updates, use the asynchronous <code class="idl"><a data-link-type="idl" href="#dom-animation-updateplaybackrate" id="ref-for-dom-animation-updateplaybackrate①">updatePlaybackRate()</a></code> method. </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-playstate"><code>playState</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-animationplaystate" id="ref-for-enumdef-animationplaystate①">AnimationPlayState</a>, readonly <dd data-md> The <a data-link-type="dfn" href="#animation-play-state" id="ref-for-animation-play-state⑨">play state</a> of this animation. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-replacestate"><code>replaceState</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-animationreplacestate" id="ref-for-enumdef-animationreplacestate①">AnimationReplaceState</a>, readonly <dd data-md> The <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑦">replace state</a> of this animation. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-pending"><code>pending</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean①">boolean</a>, readonly <dd data-md> Returns true if this animation 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="#pending-pause-task" id="ref-for-pending-pause-task①⑧">pending pause task</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-ready"><code>ready</code></dfn>, of type Promise<<a data-link-type="idl-name" href="#animation" id="ref-for-animation⑥">Animation</a>>, readonly <dd data-md> Returns the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①⑦">current ready promise</a> for this object. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-finished"><code>finished</code></dfn>, of type Promise<<a data-link-type="idl-name" href="#animation" id="ref-for-animation⑦">Animation</a>>, readonly <dd data-md> Returns the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①②">current finished promise</a> for this object. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-onfinish"><code>onfinish</code></dfn>, of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③">EventHandler</a> <dd data-md> The event handler for the <a data-link-type="dfn" href="#finish-event" id="ref-for-finish-event②">finish event</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-oncancel"><code>oncancel</code></dfn>, of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④">EventHandler</a> <dd data-md> The event handler for the <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event③">cancel event</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-onremove"><code>onremove</code></dfn>, of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤">EventHandler</a> <dd data-md> The event handler for the <a data-link-type="dfn" href="#remove-event" id="ref-for-remove-event①">remove event</a>. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="cancel()" id="dom-animation-cancel"><code>void cancel()</code></dfn> <dd data-md> Clears all effects caused by this animation and aborts its playback by running the <a data-link-type="dfn" href="#cancel-an-animation" id="ref-for-cancel-an-animation①">cancel an animation</a> procedure for this object. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="finish()" id="dom-animation-finish"><code>void finish()</code></dfn> <dd data-md> <a data-link-type="dfn" href="#seek" id="ref-for-seek③">Seeks</a> the animation to the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①⑦">associated effect end</a> in the current direction by running the <a data-link-type="dfn" href="#finish-an-animation" id="ref-for-finish-an-animation②">finish an animation</a> procedure for this object. <div class="exceptions"> <dl> <dt data-md><code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑥">DOMException</a></code> of type "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror④">InvalidStateError</a></code>" <dd data-md> Raised if this animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④③">playback rate</a> is zero, or if this animation’s playback rate is > zero and the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①⑧">associated effect end</a> is infinity. </dl> </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="play()" id="dom-animation-play"><code>void play()</code></dfn> <dd data-md> Begins or resumes playback of the animation by running the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation④">play an animation</a> passing true as the value of the <var>auto-rewind</var> flag. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="pause()" id="dom-animation-pause"><code>void pause()</code></dfn> <dd data-md> Suspends the playback of this animation by running the procedure to <a data-link-type="dfn" href="#pause-an-animation" id="ref-for-pause-an-animation">pause an animation</a> for this object. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="updatePlaybackRate(playbackRate)" id="dom-animation-updateplaybackrate"><code>void updatePlaybackRate(<var>playbackRate</var>)</code></dfn> <dd data-md> Performs an asynchronous update of the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④⑤">playback rate</a> of this animation by performing the <a data-link-type="dfn" href="#seamlessly-update-the-playback-rate" id="ref-for-seamlessly-update-the-playback-rate">seamlessly update the playback rate</a> procedure, passing <code class="idl"><a data-link-type="idl" href="#dom-animation-updateplaybackrate-playbackrate-playbackrate" id="ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate①">playbackRate</a></code> as the <var>new playback rate</var>. <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation/updatePlaybackRate(playbackRate)" data-dfn-type="argument" data-export id="dom-animation-updateplaybackrate-playbackrate-playbackrate"><code>playbackRate</code></dfn> <dd data-md> A finite real number specifying the updated playback rate to use. </dl> </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="reverse()" id="dom-animation-reverse"><code>void reverse()</code></dfn> <dd data-md> Inverts the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④⑥">playback rate</a> of this animation and plays it using the <a data-link-type="dfn" href="#reverse-an-animation" id="ref-for-reverse-an-animation">reverse an animation</a> procedure for this object. As with <code class="idl"><a data-link-type="idl" href="#dom-animation-play" id="ref-for-dom-animation-play①">play()</a></code>, this method unpauses the animation and, if the animation has already finished playing in the reversed direction, <a data-link-type="dfn" href="#seek" id="ref-for-seek④">seeks</a> to the start of the <a data-link-type="dfn" href="#animation-associated-effect" id="ref-for-animation-associated-effect③③">associated effect</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="persist()" id="dom-animation-persist"><code>void persist()</code></dfn> <dd data-md> Sets this animation’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑧">replace state</a> to <a data-link-type="dfn" href="#persisted-replace-state" id="ref-for-persisted-replace-state">persisted</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="commitStyles()" id="dom-animation-commitstyles"><code>void commitStyles()</code></dfn> <dd data-md> Writes the current <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②②">effect values</a> produced by this animation’s <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⓪">animation effects</a> to their corresponding <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①④">effect targets</a>' inline style using the <a data-link-type="dfn" href="#commit-computed-styles" id="ref-for-commit-computed-styles">commit computed styles</a> procedure. Unlike most other methods defined on this interface, calling this method does trigger a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event">style change event</a> (see <a href="#model-liveness">§ 6.13 Model liveness</a>). <div class="note" role="note"> Since the procedure to <a data-link-type="dfn" href="#commit-computed-styles" id="ref-for-commit-computed-styles①">commit computed styles</a> includes the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②③">effect values</a> for the animation even if it is <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state⑤">removed</a>, this method is useful for retaining the effect of an animation after it has been replaced (see <a href="#removing-replaced-animations">§ 5.5.2 Removing replaced animations</a>) without retaining the actual animation. Note that the values committed are the computed values produced by the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧①">animation effects</a> at the time when this method is called. Since these values are computed values, they do not reflect to changes to context such as responding to changes to CSS variables or recalculating <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em">em</a> units based on changes to the computed font-size in the way the values produced by a live animation would. In order to retain full fidelity of a filling animation’s result after it has been replaced (see <a href="#replacing-animations">§ 5.5 Replacing animations</a>), the <code class="idl"><a data-link-type="idl" href="#dom-animation-persist" id="ref-for-dom-animation-persist①">persist()</a></code> method can be used, but note that doing so will mean the animation continues to consume resources. </div> </dl> </div> <div class="algorithm" data-algorithm="commit computed styles"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="commit-computed-styles">commit computed styles</dfn> for an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⓪">animation</a>, <var>animation</var>: <ol> <li data-md> Let <var>targets</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set">set</a> of all <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①⑤">effect targets</a> for <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧②">animation effects</a> <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②⓪">associated</a> with <var>animation</var>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>target</var> in <var>targets</var>: <ol> <li data-md> If <var>target</var> is not an element capable of having a <a data-link-type="dfn" href="https://drafts.csswg.org/css-style-attr/#style-attribute" id="ref-for-style-attribute">style attribute</a> <a data-link-type="biblio" href="#biblio-css-style-attr" title="CSS Style Attributes">[CSS-STYLE-ATTR]</a> (for example, it is a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑤">pseudo-element</a> or is an element in a document format for which style attributes are not defined) <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> a "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#nomodificationallowederror" id="ref-for-nomodificationallowederror">NoModificationAllowedError</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. <li data-md> If, after applying any pending style changes, <var>target</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered" id="ref-for-being-rendered">being rendered</a>, <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. <a class="self-link" href="#issue-8f3b970c"></a> The definition of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered" id="ref-for-being-rendered①">being rendered</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> with regards to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display">display: contents</a> is still <a href="https://github.com/whatwg/html/issues/1837">under discussion</a>. For the purpose of this procedure, we assume that an element with display: contents that otherwise would have associated layout boxes (i.e. it is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected">connected</a> and not part of a display: none subtree) is being rendered. <li data-md> Let <var>inline style</var> be the result of getting the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#css-declaration-block" id="ref-for-css-declaration-block">CSS declaration block</a> corresponding to <var>target</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-style-attr/#style-attribute" id="ref-for-style-attribute①">style attribute</a>. If <var>target</var> does not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element-attribute-has" id="ref-for-concept-element-attribute-has">have</a> a style attribute, let <var>inline style</var> be a new empty CSS declaration block with the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-owner-node" id="ref-for-cssstyledeclaration-owner-node">owner node</a> set to <var>target</var>. <li data-md> Let <var>targeted properties</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set①">set</a> of physical longhand properties that are a <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①⑥">target property</a> for at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧③">animation effect</a> <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②①">associated</a> with <var>animation</var> whose <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①⑥">effect target</a> is <var>target</var>. <li data-md> For each property, <var>property</var>, in <var>targeted properties</var>: <ol> <li data-md> Let <var>partialEffectStack</var> be a copy of the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①④">effect stack</a> for <var>property</var> on <var>target</var>. <li data-md> If <var>animation</var>’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑨">replace state</a> is <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state⑥">removed</a>, add all <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧④">animation effects</a> <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②②">associated</a> with <var>animation</var> whose <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①⑦">effect target</a> is <var>target</var> and that include <var>property</var> as a <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①⑦">target property</a> to <var>partialEffectStack</var>. <li data-md> Remove from <var>partialEffectStack</var> any <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑤">animation effects</a> whose <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②③">associated</a> <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦①">animation</a> has a higher <a data-link-type="dfn" href="#animation-composite-order" id="ref-for-animation-composite-order②">composite order</a> than <var>animation</var>. <li data-md> Let <var>effect value</var> be the result of calculating the result of <var>partialEffectStack</var> for <var>property</var> using <var>target</var>’s computed style (see <a href="#calculating-the-result-of-an-effect-stack">§ 5.4.3 Calculating the result of an effect stack</a>). <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#set-a-css-declaration" id="ref-for-set-a-css-declaration">Set a CSS declaration</a> of <var>property</var> for <var>effect value</var> in <var>inline style</var>. </ol> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#update-style-attribute-for" id="ref-for-update-style-attribute-for">Update style attribute for</a> <var>inline style</var>. </ol> </ol> </div> <h4 class="heading settled" data-level="6.4.1" id="the-animationplaystate-enumeration">6.4.1. The <code class="idl"><a data-link-type="idl" href="#enumdef-animationplaystate" id="ref-for-enumdef-animationplaystate②">AnimationPlayState</a></code> enumeration<a class="self-link" href="#the-animationplaystate-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-animationplaystate"><code><c- g>AnimationPlayState</c-></code></dfn> { <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-idle" id="ref-for-dom-animationplaystate-idle"><c- s>"idle"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-running" id="ref-for-dom-animationplaystate-running"><c- s>"running"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-paused" id="ref-for-dom-animationplaystate-paused"><c- s>"paused"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-finished" id="ref-for-dom-animationplaystate-finished"><c- s>"finished"</c-></a> }; </pre> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export data-lt=""idle"|idle" id="dom-animationplaystate-idle"><code>idle</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#play-state-idle" id="ref-for-play-state-idle⑥">idle play state</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export data-lt=""running"|running" id="dom-animationplaystate-running"><code>running</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#play-state-running" id="ref-for-play-state-running③">running play state</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export data-lt=""paused"|paused" id="dom-animationplaystate-paused"><code>paused</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#play-state-paused" id="ref-for-play-state-paused⑦">paused play state</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export data-lt=""finished"|finished" id="dom-animationplaystate-finished"><code>finished</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#play-state-finished" id="ref-for-play-state-finished①⑤">finished play state</a>. </dl> <h4 class="heading settled" data-level="6.4.2" id="the-animationreplacestate-enumeration">6.4.2. The <code class="idl"><a data-link-type="idl" href="#enumdef-animationreplacestate" id="ref-for-enumdef-animationreplacestate②">AnimationReplaceState</a></code> enumeration<a class="self-link" href="#the-animationreplacestate-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-animationreplacestate"><code><c- g>AnimationReplaceState</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationReplaceState" data-dfn-type="enum-value" data-export id="dom-animationreplacestate-active"><code><c- s>"active"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationReplaceState" data-dfn-type="enum-value" data-export id="dom-animationreplacestate-removed"><code><c- s>"removed"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationReplaceState" data-dfn-type="enum-value" data-export id="dom-animationreplacestate-persisted"><code><c- s>"persisted"</c-></code></dfn> }; </pre> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationReplacedState" data-dfn-type="enum-value" data-export id="dom-animationreplacedstate-active"><code>active</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#active-replace-state" id="ref-for-active-replace-state②">active replace state</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationReplacedState" data-dfn-type="enum-value" data-export id="dom-animationreplacedstate-removed"><code>removed</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state⑦">removed replace state</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationReplacedState" data-dfn-type="enum-value" data-export id="dom-animationreplacedstate-persisted"><code>persisted</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#persisted-replace-state" id="ref-for-persisted-replace-state①">persisted replace state</a>. </dl> <h3 class="heading settled" data-level="6.5" id="the-animationeffect-interface">6.5. The <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect③">AnimationEffect</a></code> interface<a class="self-link" href="#the-animationeffect-interface"></a></h3> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑥">Animation effects</a> are represented in the Web Animations API by the abstract <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect④">AnimationEffect</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="animationeffect"><code><c- g>AnimationEffect</c-></code></dfn> { <a data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming"><c- n>EffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming"><c- g>getTiming</c-></a>(); <a data-link-type="idl-name" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming"><c- n>ComputedEffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming"><c- g>getComputedTiming</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-updatetiming" id="ref-for-dom-animationeffect-updatetiming"><c- g>updateTiming</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming"><c- n>OptionalEffectTiming</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing"><c- g>timing</c-></a> = {}); }; </pre> Note: In future, we may expose <code>any onupdate (double? progress, double currentIteration, Animatable? target, any underlyingValue)</code> so that the animation effects can be driven apart from the timing model. <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export id="dom-animationeffect-gettiming"><code>getTiming()</code></dfn> <dd data-md> Returns the specified timing properties for this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑦">animation effect</a>. For the correspondence between the members of the returned <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①">EffectTiming</a></code> object and properties of the <a href="#timing-model">timing model</a>, see the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming②">EffectTiming</a></code> interface. <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> Returns the calculated timing properties for this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑧">animation effect</a>. Although some of the attributes of the object returned by <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming①">getTiming()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming①">getComputedTiming()</a></code> are common, their values can differ in the following ways: <ul> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration">duration</a></code> – while <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming②">getTiming()</a></code> can return the string <code>auto</code>, <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming②">getComputedTiming()</a></code> must return a number corresponding to the calculated value of the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑥">iteration duration</a> as defined in the description of the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration①">duration</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming③">EffectTiming</a></code> interface. In this level of the specification, that simply means that an <code>auto</code> value is replaced by zero. <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill">fill</a></code> – likewise, while <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming③">getTiming()</a></code> can return the string <code>auto</code>, <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming③">getComputedTiming()</a></code> must return the specific <code class="idl"><a data-link-type="idl" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode">FillMode</a></code> used for timing calculations as defined in the description of the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill①">fill</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming④">EffectTiming</a></code> interface. In this level of the specification, that simply means that an <code>auto</code> value is replaced by the <code>none</code> <code class="idl"><a data-link-type="idl" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode①">FillMode</a></code>. </ul> Note: It is likely that other timing members could be extended in future to include <code>auto</code>-like values. When performing timing calculations, authors are encouraged to use <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming④">getComputedTiming()</a></code> where possible to avoid incompatibility should the range or type of allowed specified values be changed. In addition to possible differences in the values returned, compared to <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming④">getTiming()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming⑤">getComputedTiming()</a></code> returns additional timing information as defined by the <code class="idl"><a data-link-type="idl" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming①">ComputedEffectTiming</a></code> dictionary. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export data-lt="updateTiming(timing)|updateTiming()" id="dom-animationeffect-updatetiming"><code>updateTiming(<var>timing</var>)</code></dfn> <dd data-md> Updates the specified timing properties of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑨">animation effect</a> by performing the procedure to <a data-link-type="dfn" href="#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> passing the <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing①">timing</a></code> parameter as <var>input</var>. <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect/updateTiming(timing)" data-dfn-type="argument" data-export data-lt="timing" id="dom-animationeffect-updatetiming-timing-timing"><code>optional <code class="idl"><a data-link-type="idl" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming①">OptionalEffectTiming</a></code> timing</code></dfn> <dd data-md> The timing properties to update. The timing properties corresponding to any members that do not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exist</a> on <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing②">timing</a></code> will not be modified. </dl> </div> </dl> </div> <a class="self-link" href="#issue-178c6cfa"></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 effect from its animation? <a href="https://github.com/w3c/csswg-drafts/issues/2082">[Issue #2082]</a> <h4 class="heading settled" data-level="6.5.1" id="the-effecttiming-dictionaries">6.5.1. The <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑤">EffectTiming</a></code> and <code class="idl"><a data-link-type="idl" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming②">OptionalEffectTiming</a></code> dictionaries<a class="self-link" href="#the-effecttiming-dictionaries"></a></h4> The <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-effecttiming"><code>EffectTiming</code></dfn> dictionary represents the timing properties of an <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect⑤">AnimationEffect</a></code>. The <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-optionaleffecttiming"><code>OptionalEffectTiming</code></dfn> dictionary is a variant of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑥">EffectTiming</a></code> dictionary that allows some members to not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists①">exist</a>. This is used by the <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-updatetiming" id="ref-for-dom-animationeffect-updatetiming①">updateTiming()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect⑥">AnimationEffect</a></code> interface to perform a delta update to the timing properties of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⓪">animation effect</a>. <pre class="idl highlight def"><c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="#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-default="0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay"><c- g>delay</c-></a> = 0; <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="0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay"><c- g>endDelay</c-></a> = 0; <a data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode②"><c- n>FillMode</c-></a> <a class="idl-code" data-default=""auto"" data-link-type="dict-member" data-type="FillMode" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill②"><c- g>fill</c-></a> = "auto"; <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="0.0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart"><c- g>iterationStart</c-></a> = 0.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> <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="unrestricted double" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations"><c- g>iterations</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 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 DOMString)" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration②"><c- g>duration</c-></a> = "auto"; <a data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection"><c- n>PlaybackDirection</c-></a> <a class="idl-code" data-default=""normal"" data-link-type="dict-member" data-type="PlaybackDirection" href="#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction"><c- g>direction</c-></a> = "normal"; <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=""linear"" data-link-type="dict-member" data-type="DOMString" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing"><c- g>easing</c-></a> = "linear"; }; <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="#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-delay"><code><c- g>delay</c-></code></dfn>; <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-enddelay"><code><c- g>endDelay</c-></code></dfn>; <a data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode③"><c- n>FillMode</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-type="FillMode" id="dom-optionaleffecttiming-fill"><code><c- g>fill</c-></code></dfn>; <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-iterationstart"><code><c- g>iterationStart</c-></code></dfn>; <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> <dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-type="unrestricted double" id="dom-optionaleffecttiming-iterations"><code><c- g>iterations</c-></code></dfn>; (<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 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="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-type="(unrestricted double or DOMString)" id="dom-optionaleffecttiming-duration"><code><c- g>duration</c-></code></dfn>; <a data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection①"><c- n>PlaybackDirection</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-type="PlaybackDirection" id="dom-optionaleffecttiming-direction"><code><c- g>direction</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="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-type="DOMString" id="dom-optionaleffecttiming-easing"><code><c- g>easing</c-></code></dfn>; }; </pre> <div class="members"> <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>, defaulting to <code>0</code> <dd data-md> The <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑥">start delay</a>, which represents the number of milliseconds from the <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑤⑤">start time</a> of the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦②">animation</a> to the start of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑨">active interval</a>. <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>, defaulting to <code>0</code> <dd data-md> The <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay④">end delay</a>, which represents the number of milliseconds from the end of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨①">animation effect</a>’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval②⓪">active interval</a> until its <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time⑨">end time</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-fill"><code>fill</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode④">FillMode</a>, defaulting to <code>"auto"</code> <dd data-md> The <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①②">fill mode</a>, which defines the behavior of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨②">animation effect</a> outside its <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval②①">active interval</a>. When performing timing calculations the special string value <code>auto</code> is expanded to one of the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①③">fill modes</a> recognized by the timing model as follows: <dl class="switch"> <dt data-md>If the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨③">animation effect</a> to which the fill mode is being applied is a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③①">keyframe effect</a>, <dd data-md> Use <a data-link-type="dfn" href="#fill-mode-none" id="ref-for-fill-mode-none①">none</a> as the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①④">fill mode</a>. <dt data-md>Otherwise, <dd data-md> Use <a data-link-type="dfn" href="#fill-mode-both" id="ref-for-fill-mode-both④">both</a> as the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⑤">fill mode</a>. </dl> As described in <a href="#fill-behavior">§ 4.6.8 Fill behavior and fill modes</a>, authors are discouraged from using indefinitely filling animations. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-iterationstart"><code>iterationStart</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>0.0</code> <dd data-md> The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨④">animation effect</a>’s <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①⓪">iteration start</a> property, which is a finite real number greater than or equal to zero representing the <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index⑧">iteration index</a> at which the animation effect begins and its progress through that iteration. For example, a value of 0.5 indicates that the animation effect begins halfway through its first iteration. A value of 1.2 indicates the animation effect begins 20% of the way through its second iteration. <div class="note" role="note"> Note that the value of <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations①">iterations</a></code> is effectively added to the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart①">iterationStart</a></code> such that an animation effect with an <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart②">iterationStart</a></code> of "0.5" and <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations②">iterations</a></code> of "2" will still repeat twice. However it will begin and end halfway through its <a data-link-type="dfn" href="#iteration-interval" id="ref-for-iteration-interval②">iteration interval</a>. <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart③">iterationStart</a></code> values greater than or equal to 1 are typically only useful in combination with an animation effect that has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation" id="ref-for-iteration-composite-operation①">iteration composite operation</a> of accumulate or when the <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index⑨">current iteration index</a> is otherwise significant. </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-iterations"><code>iterations</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④">unrestricted double</a>, defaulting to <code>1.0</code> <dd data-md> The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑥">animation effect</a>’s <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑧">iteration count</a> property which is a real number greater than or equal to zero (including positive infinity) representing the number of times to the animation effect repeats. This can be set to <code class="esvalue">+Infinity</code> to cause the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑦">animation effect</a> to repeat forever (unless the duration of the effect is zero, in which case it will finish immediately). <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 DOMString)</code>, defaulting to <code>"auto"</code> <dd data-md> The <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑦">iteration duration</a>, which is a real number greater than or equal to zero (including positive infinity) representing the time taken to complete a single iteration of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑧">animation effect</a>. In this level of this specification, the string value <code>auto</code> is treated as the value zero for the purpose of timing model calculations and for the result of the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration③">duration</a></code> member returned from <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming⑥">getComputedTiming()</a></code>. If the author specifies the <code>auto</code> value, user agents must, however, return <code>auto</code> for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration④">duration</a></code> member returned from <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming⑤">getTiming()</a></code>. Note: This is a forwards-compatibility measure since a future level of this specification is expected to introduce group effects where the <code>auto</code> value expands to include the duration of the child effects. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-direction"><code>direction</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection②">PlaybackDirection</a>, defaulting to <code>"normal"</code> <dd data-md> The <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑦">playback direction</a> of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑨">animation effect</a>, which defines whether playback proceeds forwards, backwards, or alternates on each iteration. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-easing"><code>easing</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString⑥">DOMString</a>, defaulting to <code>"linear"</code> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function⑧">easing function</a> used to scale the time to produce easing effects. The syntax of the string is defined by the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-easing-2/#typedef-easing-function" id="ref-for-typedef-easing-function"><easing-function></a> production <a data-link-type="biblio" href="#biblio-css-easing-1" title="CSS Easing Functions Level 1">[CSS-EASING-1]</a>. </dl> </div> <h4 class="heading settled" data-level="6.5.2" id="the-fillmode-enumeration">6.5.2. The <code class="idl"><a data-link-type="idl" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode⑤">FillMode</a></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> { <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-none" id="ref-for-dom-fillmode-none"><c- s>"none"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-forwards" id="ref-for-dom-fillmode-forwards"><c- s>"forwards"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-backwards" id="ref-for-dom-fillmode-backwards"><c- s>"backwards"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-both" id="ref-for-dom-fillmode-both"><c- s>"both"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-auto" id="ref-for-dom-fillmode-auto"><c- s>"auto"</c-></a> }; </pre> Represents an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⓪">animation effect</a>’s <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⑥">fill mode</a>. <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="FillMode,PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""none"|none" id="dom-fillmode-none"><code>none</code></dfn> <dd data-md> No fill. (<a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⑦">Fill mode</a> <a data-link-type="dfn" href="#fill-mode-none" id="ref-for-fill-mode-none②">none</a>.) <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="FillMode,PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""forwards"|forwards" id="dom-fillmode-forwards"><code>forwards</code></dfn> <dd data-md> Fill <a data-link-type="dfn" href="#fill-mode-forwards" id="ref-for-fill-mode-forwards④">forwards</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="FillMode,PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""backwards"|backwards" id="dom-fillmode-backwards"><code>backwards</code></dfn> <dd data-md> Fill <a data-link-type="dfn" href="#fill-mode-backwards" id="ref-for-fill-mode-backwards③">backwards</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="FillMode,PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""both"|both" id="dom-fillmode-both"><code>both</code></dfn> <dd data-md> Fill <a data-link-type="dfn" href="#fill-mode-both" id="ref-for-fill-mode-both⑤">both</a> backwards and forwards. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="FillMode,PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""auto"|auto" id="dom-fillmode-auto"><code>auto</code></dfn> <dd data-md> No fill. In a subsequent level of this specification, this may produce different behavior for other types of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪①">animation effects</a>. </dl> <h4 class="heading settled" data-level="6.5.3" id="the-playbackdirection-enumeration">6.5.3. The <code class="idl"><a data-link-type="idl" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection③">PlaybackDirection</a></code> enumeration<a class="self-link" href="#the-playbackdirection-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-playbackdirection"><code><c- g>PlaybackDirection</c-></code></dfn> { <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-normal" id="ref-for-dom-playbackdirection-normal"><c- s>"normal"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-reverse" id="ref-for-dom-playbackdirection-reverse"><c- s>"reverse"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-alternate" id="ref-for-dom-playbackdirection-alternate"><c- s>"alternate"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-alternate-reverse" id="ref-for-dom-playbackdirection-alternate-reverse"><c- s>"alternate-reverse"</c-></a> }; </pre> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""normal"|normal" id="dom-playbackdirection-normal"><code>normal</code></dfn> <dd data-md> All iterations are played as specified. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""reverse"|reverse" id="dom-playbackdirection-reverse"><code>reverse</code></dfn> <dd data-md> All iterations are played in the reverse direction from the order they are specified. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""alternate"|alternate" id="dom-playbackdirection-alternate"><code>alternate</code></dfn> <dd data-md> Even iterations are played as specified, odd iterations are played in the reverse direction from the order they are specified. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export data-lt=""alternate-reverse"|alternate-reverse" id="dom-playbackdirection-alternate-reverse"><code>alternate-reverse</code></dfn> <dd data-md> Even iterations are played in the reverse direction from the order they are specified, odd iterations are played as specified. </dl> <h4 class="heading settled" data-level="6.5.4" id="updating-animationeffect-timing">6.5.4. Updating the timing of an <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect⑦">AnimationEffect</a></code><a class="self-link" href="#updating-animationeffect-timing"></a></h4> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation effect</dfn>, <var>effect</var>, from an <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑧">EffectTiming</a></code> or <code class="idl"><a data-link-type="idl" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming④">OptionalEffectTiming</a></code> object, <var>input</var>, perform the following steps: <ol> <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart④">iterationStart</a></code> member of <var>input</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists②">exists</a> and is less than zero, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑦">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror">TypeError</a></code> and abort this procedure. Note: The reason for using a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror①">TypeError</a></code> rather than a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-rangeerror" id="ref-for-exceptiondef-rangeerror">RangeError</a></code> is to mirror the behavior of WebIDL’s <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#EnforceRange" id="ref-for-EnforceRange">[EnforceRange]</a> annotation should that annotation be able to be used with floating-point values in the future. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations③">iterations</a></code> member of <var>input</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists③">exists</a>, and is less than zero or is the value <code class="esvalue">NaN</code>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑧">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror②">TypeError</a></code> and abort this procedure. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration⑤">duration</a></code> member of <var>input</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists④">exists</a>, and is less than zero or is the value <code class="esvalue">NaN</code>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw⑨">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror③">TypeError</a></code> and abort this procedure. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing①">easing</a></code> member of <var>input</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists⑤">exists</a> but cannot be parsed using the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-easing-2/#typedef-easing-function" id="ref-for-typedef-easing-function①"><easing-function></a> production <a data-link-type="biblio" href="#biblio-css-easing-1" title="CSS Easing Functions Level 1">[CSS-EASING-1]</a>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①⓪">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror④">TypeError</a></code> and abort this procedure. <li data-md> 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="#end-delay" id="ref-for-end-delay⑤">end delay</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill③">fill</a></code> → <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⑧">fill mode</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart⑤">iterationStart</a></code> → <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①①">iteration start</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations④">iterations</a></code> → <a data-link-type="dfn" href="#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="#iteration-duration" id="ref-for-iteration-duration①⑧">iteration duration</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction①">direction</a></code> → <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑧">playback direction</a> <li data-md> <code class="idl"><a data-link-type="idl" href="#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⑨">easing function</a> </ul> </ol> <h4 class="heading settled" data-level="6.5.5" id="the-computedeffecttiming-dictionary">6.5.5. The <code>ComputedEffectTiming</code> dictionary<a class="self-link" href="#the-computedeffecttiming-dictionary"></a></h4> Timing properties calculated by the timing model are exposed using <code class="idl"><a data-link-type="idl" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming②">ComputedEffectTiming</a></code> dictionary objects. <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-computedeffecttiming"><code><c- g>ComputedEffectTiming</c-></code></dfn> : <a data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑨"><c- n>EffectTiming</c-></a> { <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> <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double" href="#dom-computedeffecttiming-endtime" id="ref-for-dom-computedeffecttiming-endtime"><c- g>endTime</c-></a>; <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> <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double" href="#dom-computedeffecttiming-activeduration" id="ref-for-dom-computedeffecttiming-activeduration"><c- g>activeDuration</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-computedeffecttiming-localtime" id="ref-for-dom-computedeffecttiming-localtime"><c- g>localTime</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-computedeffecttiming-progress" id="ref-for-dom-computedeffecttiming-progress"><c- g>progress</c-></a>; <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>? <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double?" href="#dom-computedeffecttiming-currentiteration" id="ref-for-dom-computedeffecttiming-currentiteration"><c- g>currentIteration</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-endtime"><code>endTime</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧">unrestricted double</a> <dd data-md> The <a data-link-type="dfn" href="#animation-effect-end-time" id="ref-for-animation-effect-end-time①⓪">end time</a> of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪②">animation effect</a> expressed in milliseconds since zero <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑥">local time</a> (that is, since the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦③">animation</a>’s <a data-link-type="dfn" href="#animation-start-time" id="ref-for-animation-start-time⑤⑥">start time</a> if this animation effect is <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②④">associated with an animation</a>). This corresponds to the end of the animation effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval②②">active interval</a> plus any <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay⑥">end 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-activeduration"><code>activeDuration</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨">unrestricted double</a> <dd data-md> 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="#animation-effect" id="ref-for-animation-effect①⓪⑤">animation effect</a>. <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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⓪">double</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⑦">local time</a> of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑥">animation effect</a>. This will be <code>null</code> if this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑦">animation effect</a> is not <a data-link-type="dfn" href="#animation-effect-associated-animation" id="ref-for-animation-effect-associated-animation②⑤">associated with an animation</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-progress"><code>progress</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>, nullable <dd data-md> The current <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress②⓪">iteration progress</a> of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑧">animation effect</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-currentiteration"><code>currentIteration</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪">unrestricted double</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index①⓪">current iteration index</a> beginning with zero for the first iteration. In most cases this will be a (positive) integer. However, for a zero-duration animation that repeats infinite times, the value will be positive <code class="esvalue">Infinity</code>. As with <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪⑧">unresolved</a> times, an unresolved <a data-link-type="dfn" href="#current-iteration-index" id="ref-for-current-iteration-index①①">iteration index</a> is represented by a <code>null</code> value. </dl> </div> <h3 class="heading settled" data-level="6.6" id="the-keyframeeffect-interface">6.6. The <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect">KeyframeEffect</a></code> interface<a class="self-link" href="#the-keyframeeffect-interface"></a></h3> <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③②">Keyframe effects</a> are represented by the <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="keyframeeffect"><code>KeyframeEffect</code></dfn> 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-> <a class="idl-code" data-link-type="interface" href="#keyframeeffect" id="ref-for-keyframeeffect①"><c- g>KeyframeEffect</c-></a> : <a data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect⑧"><c- n>AnimationEffect</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect"><c- g>constructor</c-></a>(<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"><c- g>target</c-></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"><c- g>keyframes</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="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions"><c- n>KeyframeEffectOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"><c- g>options</c-></a> = {}); <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source"><c- g>constructor</c-></a>(<a data-link-type="idl-name" href="#keyframeeffect" id="ref-for-keyframeeffect②"><c- n>KeyframeEffect</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-source-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source-source"><c- g>source</c-></a>); <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="Element?" href="#dom-keyframeeffect-target" id="ref-for-dom-keyframeeffect-target"><c- g>target</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSOMString?" href="#dom-keyframeeffect-pseudoelement" id="ref-for-dom-keyframeeffect-pseudoelement"><c- g>pseudoElement</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation"><c- n>CompositeOperation</c-></a> <a class="idl-code" data-link-type="attribute" data-type="CompositeOperation" href="#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite"><c- g>composite</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 class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-keyframeeffect-getkeyframes" id="ref-for-dom-keyframeeffect-getkeyframes"><c- g>getKeyframes</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-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes"><c- g>setKeyframes</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object②"><c- b>object</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/setKeyframes(keyframes)" data-dfn-type="argument" data-export id="dom-keyframeeffect-setkeyframes-keyframes-keyframes"><code><c- g>keyframes</c-></code></dfn>); }; </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)|constructor(target, keyframes, options)|KeyframeEffect(target, keyframes)|constructor(target, keyframes)" id="dom-keyframeeffect-keyframeeffect"><code> KeyframeEffect (<var>target</var>, <var>keyframes</var>, <var>options</var>)</code></dfn> <dd data-md> Creates a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect③">KeyframeEffect</a></code> object using the following procedure: <ol> <li data-md> Create a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect④">KeyframeEffect</a></code> object, <var>effect</var>. <li data-md> Set the <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element④">target element</a> of <var>effect</var> to <var>target</var>. <li data-md> Set the <a data-link-type="dfn" href="#effect-target-target-pseudo-selector" id="ref-for-effect-target-target-pseudo-selector②">target pseudo-selector</a> to the result corresponding to the first matching condition below: <dl class="switch"> <dt data-md>If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions①">KeyframeEffectOptions</a></code> object with a <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffectoptions-pseudoelement" id="ref-for-dom-keyframeeffectoptions-pseudoelement">pseudoElement</a></code> property, <dd data-md> Set the <a data-link-type="dfn" href="#effect-target-target-pseudo-selector" id="ref-for-effect-target-target-pseudo-selector③">target pseudo-selector</a> to the value of the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffectoptions-pseudoelement" id="ref-for-dom-keyframeeffectoptions-pseudoelement①">pseudoElement</a></code> property. When assigning this property, the error-handling defined for the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-pseudoelement" id="ref-for-dom-keyframeeffect-pseudoelement①">pseudoElement</a></code> setter on the interface is applied. If the setter requires an exception to be thrown, this procedure must throw the same exception and abort all further steps. <dt data-md>Otherwise, <dd data-md> Set the <a data-link-type="dfn" href="#effect-target-target-pseudo-selector" id="ref-for-effect-target-target-pseudo-selector④">target pseudo-selector</a> to <code>null</code>. </dl> <li data-md> Let <var>timing input</var> be the result corresponding to the first matching condition below: <dl> <dt data-md>If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions②">KeyframeEffectOptions</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="#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="#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>effect</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> If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions③">KeyframeEffectOptions</a></code> object, assign the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite①">composite</a></code> property of <var>effect</var> to the corresponding value from <var>options</var>. When assigning this property, the error-handling defined for the corresponding setter on the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑤">KeyframeEffect</a></code> interface is applied. If the setter requires an exception to be thrown for the value 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. <li data-md> Initialize the set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④④">keyframes</a> by performing the procedure defined for <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes①">setKeyframes()</a></code> passing <var>keyframes</var> as the input. </ol> <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(target, keyframes, options)" data-dfn-type="argument" data-export data-lt="target" id="dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"><code><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a></code>? target</code></dfn> <dd data-md> The <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element⑤">target element</a>. This may be <code>null</code> for animations that do not target a specific element. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(target, keyframes, options)" data-dfn-type="argument" data-export data-lt="keyframes" id="dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"><code>object? keyframes</code></dfn> <dd data-md> The set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑤">keyframes</a> to use. The format and processing of this argument is defined in <a href="#processing-a-keyframes-argument">§ 6.6.3 Processing a keyframes argument</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(target, keyframes, options)" data-dfn-type="argument" data-export data-lt="options" id="dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"><code>optional <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions④">KeyframeEffectOptions</a></code> options</code></dfn> <dd data-md> Either a number specifying the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑨">iteration duration</a> of the effect, or a collection of properties specifying the timing and behavior of the effect. </dl> Examples of the usage of this constructor are given in <a href="#creating-a-new-keyframeeffect-object">§ 6.6.1 Creating a new KeyframeEffect object</a>. </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(source)|constructor(source)" id="dom-keyframeeffect-keyframeeffect-source"><code>KeyframeEffect (source)</code></dfn> <dd data-md> Creates a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑥">KeyframeEffect</a></code> object with the same properties as <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect-source-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source-source①">source</a></code> using the following procedure: <ol> <li data-md> Create a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑦">KeyframeEffect</a></code> object, <var>effect</var>. <li data-md> Set the following properties of <var>effect</var> using the corresponding values of <var>source</var>: <ul> <li data-md> <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①⑧">effect target</a>, <li data-md> <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑥">keyframes</a>, <li data-md> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①②">composite operation</a>, and <li data-md> all specified timing properties: <ul> <li data-md> <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑧">start delay</a>, <li data-md> <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay⑦">end delay</a>, <li data-md> <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⑨">fill mode</a>, <li data-md> <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①②">iteration start</a>, <li data-md> <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count②⓪">iteration count</a>, <li data-md> <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration②⓪">iteration duration</a>, <li data-md> <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑨">playback direction</a>, and <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①⓪">easing function</a>. </ul> </ul> Note: Unlike the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect①">KeyframeEffect(target, keyframes, options)</a></code> constructor, we do not need to re-throw exceptions since the timing properties specified on <var>source</var> can be assumed to be valid. </ol> <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(source)" data-dfn-type="argument" data-export data-lt="source" id="dom-keyframeeffect-keyframeeffect-source-source"><code><code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑧">KeyframeEffect</a></code> source</code></dfn> <dd data-md> The <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③③">keyframe effect</a> from which to copy the properties that define the new keyframe effect. </dl> </div> </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-target"><code>target</code></dfn>, of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥">Element</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element⑥">target element</a> being animated by this object (either the <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target①⑨">effect target</a> if it is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦">Element</a></code> or its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> if it is a pseudo-element). This may be <code>null</code> for animations that do not target a specific element such as an animation that produces a sound using an audio API. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-pseudoelement"><code>pseudoElement</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①">CSSOMString</a>, nullable <dd data-md> The <a data-link-type="dfn" href="#effect-target-target-pseudo-selector" id="ref-for-effect-target-target-pseudo-selector⑤">target pseudo-selector</a>. <code>null</code> if this effect has no <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target②⓪">effect target</a> or if the effect target is an element (i.e. not a pseudo-element). When the effect target is a pseudo-element, this specifies the pseudo-element selector (e.g. <code>::before</code>). On setting, sets the <a data-link-type="dfn" href="#effect-target-target-pseudo-selector" id="ref-for-effect-target-target-pseudo-selector⑥">target pseudo-selector</a> of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑨">animation effect</a> to the result of <dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-pseudo-element-parsing"><code>pseudo-element parsing</code></dfn> on the provided value, defined as the following: <ol> <li data-md> Given the value <var>value</var>, perform the following steps: <li data-md> If <var>value</var> is not <code>null</code> and is an <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#invalid-selector" id="ref-for-invalid-selector">invalid</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-pseudo-element-selector" id="ref-for-typedef-pseudo-element-selector"><pseudo-element-selector></a>, <ol> <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①②">Throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑨">DOMException</a></code> with error name "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#syntaxerror" id="ref-for-syntaxerror">SyntaxError</a></code>". <li data-md> Abort. Note: In effect, this means that if the result of this algorithm is used to set a variable, then that variable remains unchanged. </ol> Note: Invalid in this context follows the definition of an <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#invalid-selector" id="ref-for-invalid-selector①">invalid selector</a> defined in <a data-link-type="biblio" href="#biblio-selectors-4" title="Selectors Level 4">[SELECTORS-4]</a> such that syntactically invalid pseudo-elements as well as pseudo-elements for which the user agent has no usable level of support are both deemed invalid. <li data-md> If <var>value</var> is one of the legacy Selectors Level 2 single-colon selectors (':before', ':after', ':first-letter', or ':first-line'), then return the equivalent two-colon selector (e.g. '::before'). <li data-md> Otherwise, return <var>value</var>. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-composite"><code>composite</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation①">CompositeOperation</a> <dd data-md> The <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①③">composite operation</a> used to composite this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑤">keyframe effect</a> with the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①⑤">effect stack</a>, as specified by one of the <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation②">CompositeOperation</a></code> enumeration values. On setting, sets the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①④">composite operation</a> property of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①⓪">animation effect</a> to the provided value. </dl> </div> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="method" data-export data-lt="getKeyframes()" id="dom-keyframeeffect-getkeyframes"><code>sequence<object> getKeyframes()</code></dfn> <dd data-md> Returns the keyframes that make up this effect along with their <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②③">computed keyframe offsets</a>. <div class="informative-bg"> This section is non-normative The result of this method is a sequence of objects of the following format: <pre class="highlight"><c- b>dictionary</c-> <c- g>ComputedKeyframe</c-> { // ... property-value pairs ... // i.e. DOMString propertyName <c- b>double</c->? <c- g>offset</c-> = <c- b>null</c->; <c- b>double</c-> <c- g>computedOffset</c->; <c- b>DOMString</c-> <c- g>easing</c-> = "linear"; <c- n>CompositeOperationOrAuto</c-> <c- g>composite</c-> = "auto"; }; </pre> The meaning and values of each member is as follows: <dl> <dt data-md><code>offset</code> <dd data-md> The <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑥">keyframe offset</a> of the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑦">keyframe</a> specified as a number between 0.0 and 1.0 inclusive, or <code>null</code>. This will be <code>null</code> if the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑧">keyframe</a> is to be automatically spaced between adjacent keyframes. <dt data-md><code>computedOffset</code> <dd data-md> The <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②④">computed keyframe offset</a> for this <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑨">keyframe</a> calculated as part of running the <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets①">compute missing keyframe offsets</a> procedure. Unlike the <code>offset</code> member, the <code>computedOffset</code> is never <code>null</code>. <dt data-md><code>easing</code> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①①">easing function</a> used to transform the progress of time from this keyframe until the next keyframe in the series. <dt data-md><code>composite</code> <dd data-md> The <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation①">keyframe-specific composite operation</a> used to combine the values specified in this keyframe with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①③">underlying value</a>. This member will be <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto">auto</a></code> if the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑤">composite operation</a> specified on the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑥">keyframe effect</a> is being used. </dl> </div> Since <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⓪">keyframes</a> are represented by a partially open-ended dictionary type that is not currently able to be expressed with WebIDL, the procedure used to prepare the result of this method is defined in prose below: <ol> <li data-md> Let <var>result</var> be an empty sequence of objects. <li data-md> Let <var>keyframes</var> be one of the following: <dl> <dt data-md>If this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑦">keyframe effect</a> is associated with a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-2/#cssanimation" id="ref-for-cssanimation">CSSAnimation</a></code>, and its <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤①">keyframes</a> have not been replaced by a successful call to <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes②">setKeyframes()</a></code>, <dd data-md> the <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes④">computed keyframes</a> for this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑧">keyframe effect</a>. <dt data-md>Otherwise, <dd data-md> the result of applying the procedure <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets②">compute missing keyframe offsets</a> to the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤②">keyframes</a> for this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑨">keyframe effect</a>. </dl> Note: We return <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes⑤">computed keyframes</a> for CSS Animations because not all keyframes specified in CSS can be represented by a dictionary. <li data-md> For each <var>keyframe</var> in <var>keyframes</var> perform the following steps: <ol> <li data-md> Initialize a dictionary object, <var>output keyframe</var>, using the following definition: <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-basecomputedkeyframe"><code><c- g>BaseComputedKeyframe</c-></code></dfn> { <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-default="null" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="double?" id="dom-basecomputedkeyframe-offset"><code><c- g>offset</c-></code></dfn> = <c- b>null</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> <dfn class="dfn-paneled idl-code" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="double" id="dom-basecomputedkeyframe-computedoffset"><code><c- g>computedOffset</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-default=""linear"" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="DOMString" id="dom-basecomputedkeyframe-easing"><code><c- g>easing</c-></code></dfn> = "linear"; <a data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto"><c- n>CompositeOperationOrAuto</c-></a> <dfn class="dfn-paneled idl-code" data-default=""auto"" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="CompositeOperationOrAuto" id="dom-basecomputedkeyframe-composite"><code><c- g>composite</c-></code></dfn> = "auto"; }; </pre> <li data-md> Set the <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-offset" id="ref-for-dom-basecomputedkeyframe-offset">offset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-computedoffset" id="ref-for-dom-basecomputedkeyframe-computedoffset">computedOffset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-easing" id="ref-for-dom-basecomputedkeyframe-easing">easing</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-composite" id="ref-for-dom-basecomputedkeyframe-composite">composite</a></code> members of <var>output keyframe</var> to the respective <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑦">keyframe offset</a>, <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②⑤">computed keyframe offset</a>, keyframe-specific <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①②">easing function</a>, and <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation②">keyframe-specific composite operation</a> values of <var>keyframe</var>. <li data-md> For each animation property-value pair <var>declaration</var> in <var>keyframe</var>, perform the following steps: <ol> <li data-md> Let <var>property name</var> be the result of applying the <a data-link-type="dfn" href="#animation-property-name-to-idl-attribute-name" id="ref-for-animation-property-name-to-idl-attribute-name">animation property name to IDL attribute name</a> algorithm to the property name of <var>declaration</var>. <li data-md> Let <var>IDL value</var> be the result of serializing the property value of <var>declaration</var> by passing <var>declaration</var> to the algorithm to <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#serialize-a-css-value" id="ref-for-serialize-a-css-value">serialize a CSS value</a> <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a>. <li data-md> Let <var>value</var> be the result of <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#DOMString-to-es" id="ref-for-DOMString-to-es">converting</a> <var>IDL value</var> to an ECMAScript String value. <li data-md> Call the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc" id="ref-for-sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc">[[DefineOwnProperty]]</a> internal method on <var>output keyframe</var> with property name <var>property name</var>, Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: <var>value</var> } and Boolean flag false. </ol> <li data-md> Append <var>output keyframe</var> to <var>result</var>. </ol> <li data-md> Return <var>result</var>. </ol> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="method" data-export data-lt="setKeyframes(keyframes)" id="dom-keyframeeffect-setkeyframes"><code>void setKeyframes(object? keyframes)</code></dfn> <dd data-md> Replaces the set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤③">keyframes</a> that make up this effect. <div class="parameters" for="KeyframeEffect/setKeyframes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="argument" data-export data-lt="keyframes" id="dom-keyframeeffect-keyframes"><code>object? keyframes</code></dfn> <dd data-md> A series of keyframes whose format and processing is defined by <a href="#processing-a-keyframes-argument">§ 6.6.3 Processing a keyframes argument</a>. This effect’s set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤④">keyframes</a> is replaced with the result of performing the procedure to <a data-link-type="dfn" href="#process-a-keyframes-argument" id="ref-for-process-a-keyframes-argument">process a keyframes argument</a>. If that procedure throws an exception, this effect’s keyframes are not modified. </dl> </div> </dl> </div> <h4 class="heading settled" data-level="6.6.1" id="creating-a-new-keyframeeffect-object">6.6.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 The <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect②">KeyframeEffect</a></code> constructor offers a number of approaches to creating new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑨">KeyframeEffect</a></code> objects. At its simplest, a <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①⓪">KeyframeEffect</a></code> object that changes the "left" property of <code>elem</code> to 100px over three seconds can be constructed as follows: <div class="example" id="example-7a28f33c"> <a class="self-link" href="#example-7a28f33c"></a> <pre class="highlight"><c- a>var</c-> effect <c- o>=</c-> <c- ow>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mf>3000</c-><c- p>);</c-> </pre> </div> The second parameter, representing the list of keyframes, may specify multiple properties. (See <a href="#processing-a-keyframes-argument">§ 6.6.3 Processing a keyframes argument</a>.) <div class="example" id="example-d6624b71"> <a class="self-link" href="#example-d6624b71"></a> <pre class="highlight"><c- c1>// Specify multiple properties at once</c-> <c- a>var</c-> effectA <c- o>=</c-> <c- ow>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-><c- p>,</c-> top<c- o>:</c-> <c- t>'300px'</c-> <c- p>},</c-> <c- mf>3000</c-><c- p>);</c-> <c- c1>// Specify multiple keyframes</c-> <c- a>var</c-> effectB <c- o>=</c-> <c- ow>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>[</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'300px'</c-> <c- p>}</c-> <c- p>],</c-> <c- mf>3000</c-><c- p>);</c-> </pre> </div> The third parameter, representing the animation’s timing, may simply be a number representing the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration②①">iteration duration</a> in milliseconds as above, or, to specify further timing properties such as the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑨">start delay</a>, an <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①①">EffectTiming</a></code> object can be used, as follows: <div class="example" id="example-4d5977de"> <a class="self-link" href="#example-4d5977de"></a> <pre class="highlight"><c- a>var</c-> effect <c- o>=</c-> <c- ow>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- p>{</c-> duration<c- o>:</c-> <c- mf>3000</c-><c- p>,</c-> delay<c- o>:</c-> <c- mf>2000</c-> <c- p>});</c-> </pre> </div> If the duration is not specified, a value of zero is used. It is possible to create an animation that simply sets a property without any interpolation as follows: <div class="example" id="example-d3a5d53d"> <a class="self-link" href="#example-d3a5d53d"></a> <pre class="highlight"><c- a>var</c-> effect <c- o>=</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-> </pre> </div> As described in <a href="#fill-behavior">§ 4.6.8 Fill behavior and fill modes</a> however, using indefinitely filling animations in this way is discouraged. Having created a <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①①">KeyframeEffect</a></code>, it can be played by adding it to an <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation⑧">Animation</a></code> and then playing that animation. For simple effects, however, the <a href="#extensions-to-the-element-interface"><code>Element.animate</code></a> shortcut is more convenient since it performs these steps automatically. For example, <div class="example" id="example-a7ce65dd"> <a class="self-link" href="#example-a7ce65dd"></a> <pre class="highlight">elem<c- p>.</c->animate<c- p>({</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mf>3000</c-><c- p>);</c-> </pre> </div> </div> <h4 class="heading settled" data-level="6.6.2" id="property-name-conversion">6.6.2. Property names and IDL names<a class="self-link" href="#property-name-conversion"></a></h4> <div class="algorithm" data-algorithm="animation property name to IDL attribute name"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-property-name-to-idl-attribute-name">animation property name to IDL attribute name</dfn> algorithm for <var>property</var> is as follows: <ol> <li data-md> If <var>property</var> follows the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-2/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name"><custom-property-name></a> production, return <var>property</var>. <li data-md> If <var>property</var> refers to the CSS <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float">float</a> property, return the string "cssFloat". <li data-md> If <var>property</var> refers to the CSS <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/motion-1/#propdef-offset" id="ref-for-propdef-offset">offset</a> property, return the string "cssOffset". <li data-md> Otherwise, return the result of applying the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#css-property-to-idl-attribute" id="ref-for-css-property-to-idl-attribute①">CSS property to IDL attribute</a> algorithm <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> to <var>property</var>. </ol> </div> <div class="algorithm" data-algorithm="IDL attribute name to animation property name"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="idl-attribute-name-to-animation-property-name">IDL attribute name to animation property name</dfn> algorithm for <var>attribute</var> is as follows: <ol> <li data-md> If <var>attribute</var> conforms to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-2/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name①"><custom-property-name></a> production, return <var>attribute</var>. <li data-md> If <var>attribute</var> is the string "cssFloat", then return an animation property representing the CSS <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-float" id="ref-for-propdef-float①">float</a> property. <li data-md> If <var>attribute</var> is the string "cssOffset", then return an animation property representing the CSS <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/motion-1/#propdef-offset" id="ref-for-propdef-offset①">offset</a> property. <li data-md> Otherwise, return the result of applying the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#idl-attribute-to-css-property" id="ref-for-idl-attribute-to-css-property">IDL attribute to CSS property</a> algorithm <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> to <var>attribute</var>. </ol> </div> <h4 class="heading settled" data-level="6.6.3" id="processing-a-keyframes-argument">6.6.3. Processing a <code>keyframes</code> argument<a class="self-link" href="#processing-a-keyframes-argument"></a></h4> <div class="informative-bg"> This section is non-normative The following methods all accept a set of keyframes as an argument: <ul> <li data-md> the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect③">KeyframeEffect(target, keyframes, options)</a></code> constructor, <li data-md> the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes③">setKeyframes()</a></code> method on the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①②">KeyframeEffect</a></code> interface, <li data-md> the <code class="idl"><a data-link-type="idl" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate">animate()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable">Animatable</a></code> interface mixin. </ul> This argument can be specified in the one of two forms as illustrated below: <div class="example" id="example-23ca44fc"> <a class="self-link" href="#example-23ca44fc"></a> <pre class="highlight"><c- c1>// The following two expressions produce the same result:</c-> elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-> <c- p>}</c-> <c- p>],</c-> <c- mf>2000</c-><c- p>);</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'red'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>]</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> <c- c1>// Likewise, for a multi-property animation, the following two</c-> <c- c1>// expressions are equivalent:</c-> elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'0px'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'-20px'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'50px'</c-><c- p>}</c-> <c- p>],</c-> <c- mf>2000</c-><c- p>);</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'red'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c-> left<c- o>:</c-> <c- p>[</c-> <c- t>'0px'</c-><c- p>,</c-> <c- t>'-20px'</c-><c- p>,</c-> <c- t>'100px'</c-><c- p>,</c-> <c- t>'50px'</c-> <c- p>]</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> <c- c1>// Incidentally, the following three expressions are all equivalent:</c-> elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>}</c-> <c- p>],</c-> <c- mf>1000</c-><c- p>);</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'red'</c-> <c- p>]</c-> <c- p>},</c-> <c- mf>1000</c-><c- p>);</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c-> <c- mf>1000</c-><c- p>);</c-> </pre> </div> The first form (the array-form) consists of an array of keyframes where each keyframe may specify at most one value per animation property. The second form (the object-form) consists of an object where each animation property may specify a single animation value or an array of animation values. The first array-form is the canonical form, and is the form returned by the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-getkeyframes" id="ref-for-dom-keyframeeffect-getkeyframes①">getKeyframes()</a></code> method. <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑧">Keyframe offsets</a> can be specified using either form as illustrated below: <div class="example" id="example-34879cb3"> <a class="self-link" href="#example-34879cb3"></a> <pre class="highlight"><c- c1>// The keyframes without offsets will automatically have offsets computed</c-> <c- c1>// as 0 for the first keyframe, 0.65 for the middle keyframe, and 1 for the</c-> <c- c1>// final keyframe.</c-> elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-><c- p>,</c-> offset<c- o>:</c-> <c- mf>0.5</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-><c- p>,</c-> offset<c- o>:</c-> <c- mf>0.8</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'pink'</c-> <c- p>}</c-> <c- p>],</c-> <c- mf>2000</c-><c- p>);</c-> <c- c1>// The following produces the same result. Note that it is not necessary to</c-> <c- c1>// specify the last value: it will automatically be treated as 'null' and then</c-> <c- c1>// the automatic assignment will apply as with the previous case.</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'red'</c-><c- p>,</c-> <c- t>'yellow'</c-><c- p>,</c-> <c- t>'pink'</c-> <c- p>],</c-> offset<c- o>:</c-> <c- p>[</c-> <c- kc>null</c-><c- p>,</c-> <c- mf>0.5</c-><c- p>,</c-> <c- kc>null</c-><c- p>,</c-> <c- mf>0.8</c-> <c- p>]</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> </pre> </div> Likewise <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①③">easing functions</a> and <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation③">keyframe-specific composite operations</a> may be specified in either form. The array-form allows specifying different values for each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑥">keyframe</a> whilst for the object-form, the list of values will be repeated as needed until each keyframe has been assigned a value. <div class="example" id="example-01084f65"> <a class="self-link" href="#example-01084f65"></a> <pre class="highlight"><c- c1>// Since easing functions apply _between_ keyframes, even if we specify a</c-> <c- c1>// an easing function on the last keyframe it will be ignored.</c-> elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-><c- p>,</c-> easing<c- o>:</c-> <c- t>'ease-in'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-><c- p>,</c-> easing<c- o>:</c-> <c- t>'ease-out'</c-> <c- p>},</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-> <c- p>}</c-> <c- p>],</c-> <c- mf>2000</c-><c- p>);</c-> <c- c1>// The following produces the same result.</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c-> easing<c- o>:</c-> <c- p>[</c-> <c- t>'ease-in'</c-><c- p>,</c-> <c- t>'ease-out'</c-> <c- p>]</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> <c- c1>// The repeating behavior makes assigning the same value to all keyframes</c-> <c- c1>// simple:</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c-> easing<c- o>:</c-> <c- t>'ease-in-out'</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> </pre> </div> Note that the <code>easing</code> property in either form sets the keyframe-specific <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①④">easing function</a>. This is independent from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①⑤">easing function</a> that applies to the entire <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration②②">iteration duration</a> of the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect④⓪">keyframe effect</a> as specified using a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑤">KeyframeEffectOptions</a></code> object (or <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions">KeyframeAnimationOptions</a></code> object when using the <code class="idl"><a data-link-type="idl" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate①">animate()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable①">Animatable</a></code> interface mixin). In the following example, the two statements produce different results. <div class="example" id="example-148601d7"> <a class="self-link" href="#example-148601d7"></a> <pre class="highlight"><c- c1>// Here, 'ease-in-out' is applied between each color value.</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c-> easing<c- o>:</c-> <c- t>'ease-in-out'</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> <c- c1>// However, in this case, 'ease-in-out' is applied across the whole span</c-> <c- c1>// of the animation, that is from 'blue' to 'yellow'.</c-> elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>]</c-> <c- p>},</c-> <c- p>{</c-> duration<c- o>:</c-> <c- mf>2000</c-><c- p>,</c-> easing<c- o>:</c-> <c- t>'ease-in-out'</c-> <c- p>});</c-> </pre> </div> The type of the <code>keyframes</code> argument cannot be expressed in WebIDL since it relies on a partially-open dictionary type. Conceptually, the type of this argument is equivalent to the following WebIDL-like definition: <pre class="highlight"><c- b>dictionary</c-> <c- g>Keyframe</c-> { // ... property-value pairs ... // i.e. DOMString propertyName <c- b>double</c->? <c- g>offset</c-> = <c- b>null</c->; <c- b>DOMString</c-> <c- g>easing</c-> = "linear"; <c- n>CompositeOperationOrAuto</c-> <c- g>composite</c-> = "auto"; }; <c- b>dictionary</c-> <c- g>PropertyIndexedKeyframes</c-> { // ... property-value and property-valuelist pairs ... // i.e. (DOMString or sequence<DOMString>) propertyName (<c- b>double</c->? <c- b>or</c-> <c- b>sequence</c-><<c- b>double</c->?>) <c- g>offset</c-> = []; (<c- b>DOMString</c-> <c- b>or</c-> <c- b>sequence</c-><<c- b>DOMString</c->>) <c- g>easing</c-> = []; (<c- n>CompositeOperationOrAuto</c-> <c- b>or</c-> <c- b>sequence</c-><<c- n>CompositeOperationOrAuto</c->>) <c- g>composite</c-> = []; }; <c- b>typedef</c-> (<c- b>sequence</c-><<c- n>Keyframe</c->?> <c- b>or</c-> <c- n>PropertyIndexedKeyframes</c->) <c- g>KeyframeArgument</c->; </pre> The meaning and allowed values of each argument is as follows: <dl> <dt data-md><code>offset</code> <dd data-md> The <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑨">keyframe offset</a> of the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑦">keyframe</a> specified as a number between 0.0 and 1.0 inclusive or <code>null</code>. A <code>null</code> value indicates that the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑧">keyframe</a> should be automatically spaced between adjacent keyframes. Specifying an offset outside the range [0.0, 1.0] will cause a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑤">TypeError</a></code> to be thrown. Keyframes that specify an offset must be provided in increasing order of offset. Adjacent and equal offsets, however, are permitted. <dt data-md><code>easing</code> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①⑥">easing function</a> used to transform the progress of time from this keyframe until the next keyframe in the series. The syntax and error-handling associated with parsing this string is identical to that defined for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing③">easing</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①②">EffectTiming</a></code> interface. <dt data-md><code>composite</code> <dd data-md> The <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation④">keyframe-specific composite operation</a> used to combine the values specified in this keyframe with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①④">underlying value</a>. If <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto①">auto</a></code>, the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑥">composite operation</a> specified on the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect④①">keyframe effect</a> will be used. </dl> Since this type cannot be expressed in WebIDL, its processing is defined in prose following. </div> For each method that takes a <code>keyframes</code> argument, the procedure to <a data-link-type="dfn" href="#process-a-keyframes-argument" id="ref-for-process-a-keyframes-argument①">process a keyframes argument</a> is run on the input and the result of that procedure is retained. First we define two supporting definitions: <div class="algorithm" data-algorithm="check the completion record"> The instruction <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="check-the-completion-record">check the completion record</dfn> of <var>result</var>, where <var>result</var> is a <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type" id="ref-for-sec-completion-record-specification-type">completion record</a> from calling an ECMAScript operation, is equivalent to the following steps: <ol> <li data-md> If <var>result</var> is an <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type" id="ref-for-sec-completion-record-specification-type①">abrupt completion</a>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①③">throw</a> the exception contained in the [[value]] field of <var>result</var> and abort the procedure. <a class="self-link" href="#issue-47a68024"></a> What should we do if the [[type]] is break, continue, or return? Can it be? <li data-md> Replace <var>result</var> with the value contained in the [[value]] field of <var>result</var>. </ol> </div> <div class="algorithm" data-algorithm="process a keyframe-like object"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-a-keyframe-like-object">process a keyframe-like object</dfn> takes two arguments: <ul> <li data-md> an ECMAScript object, <var>keyframe input</var>, and <li data-md> an <var>allow lists</var> boolean flag </ul> and returns a map from either property names to DOMString values if <var>allow lists</var> is false, or from property names to sequences of DOMString values otherwise, using the following procedure: <ol> <li data-md> Run the procedure to <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#es-to-dictionary" id="ref-for-es-to-dictionary">convert an ECMAScript value to a dictionary type</a> <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a> with <var>keyframe input</var> as the ECMAScript value, and the dictionary type depending on the value of the <var>allow lists</var> flag as follows: <div class="switch"> <dl> <dt data-md>If <var>allow lists</var> is true, <dd data-md> Use the following dictionary type: <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-basepropertyindexedkeyframe"><code><c- g>BasePropertyIndexedKeyframe</c-></code></dfn> { (<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>? <c- b>or</c-> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence①"><c- b>sequence</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-default="[]" data-dfn-for="BasePropertyIndexedKeyframe" data-dfn-type="dict-member" data-export data-type="(double? or sequence<double?>)" id="dom-basepropertyindexedkeyframe-offset"><code><c- g>offset</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> <c- b>or</c-> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence②"><c- b>sequence</c-></a><<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-default="[]" data-dfn-for="BasePropertyIndexedKeyframe" data-dfn-type="dict-member" data-export data-type="(DOMString or sequence<DOMString>)" id="dom-basepropertyindexedkeyframe-easing"><code><c- g>easing</c-></code></dfn> = []; (<a data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto①"><c- n>CompositeOperationOrAuto</c-></a> <c- b>or</c-> <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="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto②"><c- n>CompositeOperationOrAuto</c-></a>>) <dfn class="dfn-paneled idl-code" data-default="[]" data-dfn-for="BasePropertyIndexedKeyframe" data-dfn-type="dict-member" data-export data-type="(CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>)" id="dom-basepropertyindexedkeyframe-composite"><code><c- g>composite</c-></code></dfn> = []; }; </pre> <dt data-md>Otherwise, <dd data-md> Use the following dictionary type: <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-basekeyframe"><code><c- g>BaseKeyframe</c-></code></dfn> { <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-default="null" data-dfn-for="BaseKeyframe" data-dfn-type="dict-member" data-export data-type="double?" id="dom-basekeyframe-offset"><code><c- g>offset</c-></code></dfn> = <c- b>null</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> <dfn class="dfn-paneled idl-code" data-default=""linear"" data-dfn-for="BaseKeyframe" data-dfn-type="dict-member" data-export data-type="DOMString" id="dom-basekeyframe-easing"><code><c- g>easing</c-></code></dfn> = "linear"; <a data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto③"><c- n>CompositeOperationOrAuto</c-></a> <dfn class="dfn-paneled idl-code" data-default=""auto"" data-dfn-for="BaseKeyframe" data-dfn-type="dict-member" data-export data-type="CompositeOperationOrAuto" id="dom-basekeyframe-composite"><code><c- g>composite</c-></code></dfn> = "auto"; }; </pre> </dl> </div> Store the result of this procedure as <var>keyframe output</var>. <li data-md> Build up a list of <var>animatable properties</var> as follows: <ol> <li data-md> Let <var>animatable properties</var> be a list of property names (including shorthand properties that have longhand sub-properties that are animatable) that can be animated by the UA. <li data-md> Convert each property name in <var>animatable properties</var> to the equivalent IDL attribute by applying the <a data-link-type="dfn" href="#animation-property-name-to-idl-attribute-name" id="ref-for-animation-property-name-to-idl-attribute-name①">animation property name to IDL attribute name</a> algorithm. </ol> <li data-md> Let <var>input properties</var> be the result of calling the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames" id="ref-for-sec-enumerableownnames">EnumerableOwnNames</a> operation with <var>keyframe input</var> as the object. <li data-md> Make up a new list <var>animation properties</var> that consists of all of the properties that are in both <var>input properties</var> and <var>animatable properties</var>, or which are in <var>input properties</var> and conform to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-2/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name②"><custom-property-name></a> production. <li data-md> Sort <var>animation properties</var> in ascending order by the Unicode codepoints that define each property name. <li data-md> For each <var>property name</var> in <var>animation properties</var>: <ol> <li data-md> Let <var>raw value</var> be the result of calling the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver" id="ref-for-sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver">[[Get]]</a> internal method on <var>keyframe input</var>, with <var>property name</var> as the property key and <var>keyframe input</var> as the receiver. <li data-md> <a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record">Check the completion record</a> of <var>raw value</var>. <li data-md> Convert <var>raw value</var> to a DOMString or to a sequence of DOMStrings <var>property values</var> as follows: <div class="switch"> <dl> <dt data-md>If <var>allow lists</var> is true, <dd data-md> Let <var>property values</var> be the result of converting <var>raw value</var> to IDL type <code>(DOMString or sequence<DOMString>)</code> using the <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value">procedures defined for converting an ECMAScript value to an IDL value</a> <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a>. If <var>property values</var> is a single DOMString, replace <var>property values</var> with a sequence of DOMStrings with the original value of <var>property values</var> as the only element. <dt data-md>Otherwise, <dd data-md> Let <var>property values</var> be the result of converting <var>raw value</var> to a DOMString using the <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#es-to-DOMString" id="ref-for-es-to-DOMString">procedure for converting an ECMAScript value to a DOMString</a> <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a>. </dl> </div> <li data-md> Calculate the <var>normalized property name</var> as the result of applying the <a data-link-type="dfn" href="#idl-attribute-name-to-animation-property-name" id="ref-for-idl-attribute-name-to-animation-property-name">IDL attribute name to animation property name</a> algorithm to <var>property name</var>. <li data-md> Add a property to <var>keyframe output</var> with <var>normalized property name</var> as the property name, and <var>property values</var> as the property value. </ol> <li data-md> Return <var>keyframe output</var>. </ol> </div> <div class="algorithm" data-algorithm="process a keyframes argument"> The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-a-keyframes-argument">process a keyframes argument</dfn> takes a <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-nullable-type" id="ref-for-dfn-nullable-type">nullable</a> ECMAScript object, <var>object</var>, as input, and returns a sequence of keyframes using the following procedure: <ol> <li data-md> If <var>object</var> is <code>null</code>, return an empty sequence of keyframes. <li data-md> Let <var>processed keyframes</var> be an empty sequence of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑨">keyframes</a>. <li data-md> Let <var>method</var> be the result of <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod" id="ref-for-sec-getmethod">GetMethod</a>(<var>object</var>, <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols" id="ref-for-sec-well-known-symbols">@@iterator</a>). <li data-md> <a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record①">Check the completion record</a> of <var>method</var>. <li data-md> Perform the steps corresponding to the first matching condition below: <div class="switch"> <dl> <dt data-md>If <var>method</var> is not undefined, <dd data-md> <ol> <li data-md> Let <var>iter</var> be <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator" id="ref-for-sec-getiterator">GetIterator</a>(<var>object</var>, <var>method</var>). <li data-md> <a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record②">Check the completion record</a> of <var>iter</var>. <li data-md> Repeat: <ol> <li data-md> Let <var>next</var> be <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep" id="ref-for-sec-iteratorstep">IteratorStep</a>(<var>iter</var>). <li data-md> <a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record③">Check the completion record</a> of <var>next</var>. <li data-md> If <var>next</var> is false abort this loop. <li data-md> Let <var>nextItem</var> be <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue" id="ref-for-sec-iteratorvalue">IteratorValue</a>(next). <li data-md> <a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record④">Check the completion record</a> of <var>nextItem</var>. <li data-md> If <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values" id="ref-for-sec-ecmascript-data-types-and-values">Type</a>(<var>nextItem</var>) is not <code>Undefined</code>, <code>Null</code> or <code>Object</code>, then throw a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑥">TypeError</a></code> and abort these steps. <li data-md> Append to <var>processed keyframes</var> the result of running the procedure to <a data-link-type="dfn" href="#process-a-keyframe-like-object" id="ref-for-process-a-keyframe-like-object">process a keyframe-like object</a> passing <var>nextItem</var> as the <var>keyframe input</var> with the <var>allow lists</var> flag set to false. </ol> </ol> <dt data-md>Otherwise, <dd data-md> <ol> <li data-md> Let <var>property-indexed keyframe</var> be the result of running the procedure to <a data-link-type="dfn" href="#process-a-keyframe-like-object" id="ref-for-process-a-keyframe-like-object①">process a keyframe-like object</a> passing <var>object</var> as the <var>keyframe input</var> with the <var>allow lists</var> flag set to true. <li data-md> For each member, <var>m</var>, in <var>property-indexed keyframe</var>, perform the following steps: <ol> <li data-md> Let <var>property name</var> be the key for <var>m</var>. <li data-md> If <var>property name</var> is "composite", "easing", or "offset", skip the remaining steps in this loop and continue from the next member in <var>property-indexed keyframe</var> after <var>m</var>. <li data-md> Let <var>property values</var> be the value for <var>m</var>. <li data-md> Let <var>property keyframes</var> be an empty sequence of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⓪">keyframes</a>. <li data-md> For each value, <var>v</var>, in <var>property values</var>, perform the following steps: <ol> <li data-md> Let <var>k</var> be a new <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥①">keyframe</a> with a <code>null</code> <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset①⓪">keyframe offset</a>. <li data-md> Add the property-value pair, <var>property name</var> → <var>v</var>, to <var>k</var>. <li data-md> Append <var>k</var> to <var>property keyframes</var>. </ol> <li data-md> Apply the procedure to <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets③">compute missing keyframe offsets</a> to <var>property keyframes</var>. <li data-md> Add <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥②">keyframes</a> in <var>property keyframes</var> to <var>processed keyframes</var>. </ol> <li data-md> Sort <var>processed keyframes</var> by the <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②⑥">computed keyframe offset</a> of each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥③">keyframe</a> in increasing order. <li data-md> Merge adjacent <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥④">keyframes</a> in <var>processed keyframes</var> when they have equal <a data-link-type="dfn" href="#computed-keyframe-offsets" id="ref-for-computed-keyframe-offsets②⑦">computed keyframe offsets</a>. <li data-md> Let <var>offsets</var> be a sequence of <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-nullable-type" id="ref-for-dfn-nullable-type①">nullable</a> <code>double</code> values assigned based on the type of the <code>offset</code> member of the <var>property-indexed keyframe</var> as follows: <div class="switch"> <dl> <dt data-md><code>sequence<double?></code>, <dd data-md> The value of <code>offset</code> as-is. <dt data-md><code>double?</code>, <dd data-md> A sequence of length one with the value of <code>offset</code> as its single item, i.e. « <code>offset</code> », </dl> </div> <li data-md> Assign each value in <var>offsets</var> to the <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset①①">keyframe offset</a> of the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑤">keyframe</a> with the corresponding position in <var>processed keyframes</var> until the end of either sequence is reached. <li data-md> Let <var>easings</var> be a sequence of <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString①①">DOMString</a></code> values assigned based on the type of the <code>easing</code> member of the <var>property-indexed keyframe</var> as follows: <div class="switch"> <dl> <dt data-md><code>sequence<DOMString></code>, <dd data-md> The value of <code>easing</code> as-is. <dt data-md><code>DOMString</code>, <dd data-md> A sequence of length one with the value of <code>easing</code> as its single item, i.e. « <code>easing</code> », </dl> </div> <li data-md> If <var>easings</var> is an empty sequence, let it be a sequence of length one containing the single value "linear", i.e. « "linear" ». <li data-md> If <var>easings</var> has fewer items than <var>processed keyframes</var>, repeat the elements in <var>easings</var> successively starting from the beginning of the list until <var>easings</var> has as many items as <var>processed keyframes</var>. <div class="example" id="example-649bc6e3"><a class="self-link" href="#example-649bc6e3"></a> For example, if <var>processed keyframes</var> has five items, and <var>easings</var> is the sequence « "ease-in", "ease-out" », <var>easings</var> would be repeated to become « "ease-in", "ease-out", "ease-in", "ease-out", "ease-in" ». </div> <li data-md> If <var>easings</var> has more items than <var>processed keyframes</var>, store the excess items as <var>unused easings</var>. <li data-md> Assign each value in <var>easings</var> to a property named <code>easing</code> on the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑥">keyframe</a> with the corresponding position in <var>processed keyframes</var> until the end of <var>processed keyframes</var> is reached. <li data-md> If the <code>composite</code> member of the <var>property-indexed keyframe</var> is not an empty sequence: <ol> <li data-md> Let <var>composite modes</var> be a sequence of <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto④">CompositeOperationOrAuto</a></code> values assigned from the <code>composite</code> member of <var>property-indexed keyframe</var>. If that member is a single <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto⑤">CompositeOperationOrAuto</a></code> value operation, let <var>composite modes</var> be a sequence of length one, with the value of the <code>composite</code> as its single item. <li data-md> As with <var>easings</var>, if <var>composite modes</var> has fewer items than <var>processed keyframes</var>, repeat the elements in <var>composite modes</var> successively starting from the beginning of the list until <var>composite modes</var> has as many items as <var>processed keyframes</var>. <li data-md> Assign each value in <var>composite modes</var> that is not <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto②">auto</a></code> to the <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation⑤">keyframe-specific composite operation</a> on the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑦">keyframe</a> with the corresponding position in <var>processed keyframes</var> until the end of <var>processed keyframes</var> is reached. </ol> </ol> </dl> </div> <li data-md> If <var>processed keyframes</var> is not <a data-link-type="dfn" href="#loosely-sorted-by-offset" id="ref-for-loosely-sorted-by-offset">loosely sorted by offset</a>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①④">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑦">TypeError</a></code> and abort these steps. <li data-md> If there exist any <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑧">keyframe</a> in <var>processed keyframes</var> whose <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset①②">keyframe offset</a> is non-null and less than zero or greater than one, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①⑤">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑧">TypeError</a></code> and abort these steps. <li data-md> For each <var>frame</var> in <var>processed keyframes</var>, perform the following steps: <ol> <li data-md> For each property-value pair in <var>frame</var>, parse the property value using the syntax specified for that property. If the property value is invalid according to the syntax for the property, discard the property-value pair. User agents that provide support for diagnosing errors in content SHOULD produce an appropriate warning highlighting the invalid property value. <li data-md> Let the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-2/#easing-function" id="ref-for-easing-function①⑦">easing function</a> of <var>frame</var> be the result of parsing the <code>easing</code> property on <var>frame</var> using the CSS syntax defined for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing④">easing</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①③">EffectTiming</a></code> dictionary. If parsing the <code>easing</code> property fails, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①⑥">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑨">TypeError</a></code> and abort this procedure. Note: Using the CSS parser in both of the above steps implies that CSS comments and escaping are allowed, but are not retained when the value is successfully parsed. Note: In the case where the <code>easing</code> property fails to parse, it is important that the <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror①⓪">TypeError</a></code> is thrown after all reading the properties from <var>object</var> since failing to do so would be observable and will not match the behavior if partially open-ended dictionaries are later supported in WebIDL. </ol> <li data-md> Parse each of the values in <var>unused easings</var> using the CSS syntax defined for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing⑤">easing</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①④">EffectTiming</a></code> dictionary, and if any of the values fail to parse, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-throw" id="ref-for-dfn-throw①⑦">throw</a> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror①①">TypeError</a></code> and abort this procedure. <div class="note" role="note"> This final step is needed in order to provide consistent behavior such that a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror①②">TypeError</a></code> is thrown in all of the following cases: <pre class="highlight">elem<c- p>.</c->animate<c- p>({</c-> easing<c- o>:</c-> <c- t>'invalid'</c-> <c- p>});</c-> elem<c- p>.</c->animate<c- p>({</c-> easing<c- o>:</c-> <c- p>[</c-><c- t>'invalid'</c-><c- p>]</c-> <c- p>});</c-> elem<c- p>.</c->animate<c- p>([{</c-> easing<c- o>:</c-> <c- t>'invalid'</c-> <c- p>}]);</c-> </pre> </div> </ol> </div> <h4 class="heading settled" data-level="6.6.4" id="the-keyframeeffectoptions-dictionary">6.6.4. The <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑥">KeyframeEffectOptions</a></code> dictionary<a class="self-link" href="#the-keyframeeffectoptions-dictionary"></a></h4> Additional parameters may be passed to the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect④">KeyframeEffect(target, keyframes, options)</a></code> constructor by providing a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑦">KeyframeEffectOptions</a></code> object. <pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-keyframeeffectoptions"><code><c- g>KeyframeEffectOptions</c-></code></dfn> : <a data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①⑤"><c- n>EffectTiming</c-></a> { <a data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation③"><c- n>CompositeOperation</c-></a> <a class="idl-code" data-default=""replace"" data-link-type="dict-member" data-type="CompositeOperation" href="#dom-keyframeeffectoptions-composite" id="ref-for-dom-keyframeeffectoptions-composite"><c- g>composite</c-></a> = "replace"; <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSOMString?" href="#dom-keyframeeffectoptions-pseudoelement" id="ref-for-dom-keyframeeffectoptions-pseudoelement②"><c- g>pseudoElement</c-></a> = <c- b>null</c->; }; </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-composite"><code>composite</code></dfn>, of type <a data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation④">CompositeOperation</a>, defaulting to <code>"replace"</code> <dd data-md> The <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑦">composite operation</a> used to composite this animation with the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①⑥">effect stack</a>, as specified by one of the <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation⑤">CompositeOperation</a></code> enumeration values. This is used for all <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑨">keyframes</a> that specify an <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto③">auto</a></code> <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation⑥">keyframe-specific composite operation</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffectOptions" data-dfn-type="dict-member" data-export id="dom-keyframeeffectoptions-pseudoelement"><code>pseudoElement</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring③">CSSOMString</a>, nullable, defaulting to <code>null</code> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑥">pseudo-element</a> selector (which must be valid or <code>null</code>) used to specify the <a data-link-type="dfn" href="#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target②③">effect target</a> given the <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element⑦">target element</a>. </dl> </div> <h3 class="heading settled" data-level="6.7" id="the-compositeoperation-enumeration">6.7. The <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation⑥">CompositeOperation</a></code> and <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto⑥">CompositeOperationOrAuto</a></code> enumerations<a class="self-link" href="#the-compositeoperation-enumeration"></a></h3> The possible values of an <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect④②">keyframe effect</a>’s composition behavior are represented by the <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation⑦">CompositeOperation</a></code> enumeration. <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-compositeoperation"><code><c- g>CompositeOperation</c-></code></dfn> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace" id="ref-for-dom-compositeoperation-replace"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add" id="ref-for-dom-compositeoperation-add"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate" id="ref-for-dom-compositeoperation-accumulate"><c- s>"accumulate"</c-></a> }; </pre> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperation,CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt=""replace"|replace" id="dom-compositeoperation-replace"><code>replace</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#composite-operation-replace" id="ref-for-composite-operation-replace②">replace</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑧">composite operation</a> value such that the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①①">animation effect</a> overrides the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⑤">underlying value</a> it is combined with. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperation,CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt=""add"|add" id="dom-compositeoperation-add"><code>add</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add③">add</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑨">composite operation</a> value such that the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①②">animation effect</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition②">added</a> to the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⑥">underlying value</a> with which it is combined. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperation,CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt=""accumulate"|accumulate" id="dom-compositeoperation-accumulate"><code>accumulate</code></dfn> <dd data-md> Corresponds to the <a data-link-type="dfn" href="#composite-operation-accumulate" id="ref-for-composite-operation-accumulate">accumulate</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation②⓪">composite operation</a> value such that the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①③">animation effect</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation②">accumulated</a> onto the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⑦">underlying value</a>. </dl> The possible values of a <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑦⓪">keyframe</a>’s composition behavior share the same values as the <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation⑧">CompositeOperation</a></code> enumeration along with the additional <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto④">auto</a></code> value. <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-compositeoperationorauto"><code><c- g>CompositeOperationOrAuto</c-></code></dfn> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace" id="ref-for-dom-compositeoperation-replace①"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add" id="ref-for-dom-compositeoperation-add①"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate" id="ref-for-dom-compositeoperation-accumulate①"><c- s>"accumulate"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto⑤"><c- s>"auto"</c-></a> }; </pre> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt=""auto"|auto" id="dom-compositeoperationorauto-auto"><code>auto</code></dfn> <dd data-md> Indicates that the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation②①">composite operation</a> of the associated <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect④③">keyframe effect</a> should be used. </dl> <h3 class="heading settled" data-level="6.8" id="the-animatable-interface-mixin">6.8. The <code>Animatable</code> interface mixin<a class="self-link" href="#the-animatable-interface-mixin"></a></h3> Objects that could be the target of an <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①③">KeyframeEffect</a></code> object implement the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable②">Animatable</a></code> interface mixin. <pre class="idl highlight def"><c- b>interface</c-> <c- b>mixin</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animatable"><code><c- g>Animatable</c-></code></dfn> { <a data-link-type="idl-name" href="#animation" id="ref-for-animation⑨"><c- n>Animation</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate②"><c- g>animate</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object③"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-keyframes" id="ref-for-dom-animatable-animate-keyframes-options-keyframes"><c- g>keyframes</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="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions①"><c- n>KeyframeAnimationOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-options" id="ref-for-dom-animatable-animate-keyframes-options-options"><c- g>options</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="#animation" id="ref-for-animation①⓪"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations"><c- g>getAnimations</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-getanimationsoptions" id="ref-for-dictdef-getanimationsoptions"><c- n>GetAnimationsOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options"><c- g>options</c-></a> = {}); }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-keyframeanimationoptions"><code><c- g>KeyframeAnimationOptions</c-></code></dfn> : <a data-link-type="idl-name" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑧"><c- n>KeyframeEffectOptions</c-></a> { <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="""" data-link-type="dict-member" data-type="DOMString" href="#dom-keyframeanimationoptions-id" id="ref-for-dom-keyframeanimationoptions-id"><c- g>id</c-></a> = ""; <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline⑥"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="AnimationTimeline?" href="#dom-keyframeanimationoptions-timeline" id="ref-for-dom-keyframeanimationoptions-timeline"><c- g>timeline</c-></a>; }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-getanimationsoptions"><code><c- g>GetAnimationsOptions</c-></code></dfn> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <a class="idl-code" data-default="false" data-link-type="dict-member" data-type="boolean" href="#dom-getanimationsoptions-subtree" id="ref-for-dom-getanimationsoptions-subtree"><c- g>subtree</c-></a> = <c- b>false</c->; <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring④"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSOMString?" href="#dom-getanimationsoptions-pseudoelement" id="ref-for-dom-getanimationsoptions-pseudoelement"><c- g>pseudoElement</c-></a> = <c- b>null</c->; }; </pre> <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="animate(keyframes, options)|animate(keyframes)" id="dom-animatable-animate"><code>Animation animate(<var>keyframes</var>, <var>options</var>)</code></dfn> <dd data-md> Performs the following steps: <ol> <li data-md> Let <var>target</var> be the object on which this method was called. <li data-md> Construct a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①④">KeyframeEffect</a></code> object <var>effect</var> 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>target</var> by using the same procedure as the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect⑤">KeyframeEffect(target, keyframes, options)</a></code> constructor, passing <var>target</var> as the <var>target</var> argument, and the <var>keyframes</var> and <var>options</var> arguments as supplied. If the above procedure causes an exception to be thrown, propagate the exception and abort this procedure. <li data-md> If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions②">KeyframeAnimationOptions</a></code> object, let <var>timeline</var> be the <code>timeline</code> member of <var>options</var> or, if <code>timeline</code> member of <var>options</var> is missing, the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline⑧">default document timeline</a> of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document">node document</a> of the element on which this method was called. <li data-md> Construct a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①①">Animation</a></code> object, <var>animation</var>, 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>target</var> by using the same procedure as the <code class="idl"><a data-link-type="idl" href="#dom-animation-animation" id="ref-for-dom-animation-animation①">Animation()</a></code> constructor, passing <var>effect</var> and <var>timeline</var> as arguments of the same name. <li data-md> If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions③">KeyframeAnimationOptions</a></code> object, assign the value of the <code>id</code> member of <var>options</var> to <var>animation</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animation-id" id="ref-for-dom-animation-id①">id</a></code> attribute. <li data-md> Run the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation⑤">play an animation</a> for <var>animation</var> with the <var>auto-rewind</var> flag set to true. <li data-md> Return <var>animation</var>. </ol> <div class="informative-bg"> This section is non-normative The following code fragment: <pre class="highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mf>0</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> </pre> is roughly equivalent to: <pre class="highlight"><c- a>var</c-> effect <c- o>=</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>2000</c-><c- p>);</c-> <c- a>var</c-> animation <c- o>=</c-> <c- ow>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> elem<c- p>.</c->ownerDocument<c- p>.</c->timeline<c- p>);</c-> animation<c- p>.</c->play<c- p>();</c-> </pre> </div> <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable/animate(keyframes, options)" data-dfn-type="argument" data-export id="dom-animatable-animate-keyframes-options-keyframes"><code>keyframes</code></dfn> <dd data-md> The <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑦①">keyframes</a> to use. This value is passed to the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect⑥">KeyframeEffect(target, keyframes, options)</a></code> constructor as the <var>keyframes</var> parameter and has the same interpretation as defined for that constructor. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable/animate(keyframes, options)" data-dfn-type="argument" data-export id="dom-animatable-animate-keyframes-options-options"><code>options</code></dfn> <dd data-md> The timing and animation options for the created <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①⑤">KeyframeEffect</a></code> and <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①②">Animation</a></code>. </dl> </div> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable" data-dfn-type="method" data-export data-lt="getAnimations(options)|getAnimations()" id="dom-animatable-getanimations"><code>sequence<Animation> getAnimations(<var>options</var>)</code></dfn> <dd data-md> <ol> <li data-md> Let <var>object</var> be the object on which this method was called. <li data-md> Let <var>pseudoElement</var> be the result of <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-pseudo-element-parsing" id="ref-for-dom-keyframeeffect-pseudo-element-parsing">pseudo-element parsing</a></code> applied to <code class="idl"><a data-link-type="idl" href="#dom-getanimationsoptions-pseudoelement" id="ref-for-dom-getanimationsoptions-pseudoelement①">pseudoElement</a></code> of <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options①">options</a></code>, or <code>null</code> if <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options②">options</a></code> is not passed. <li data-md> If <var>pseudoElement</var> is not <code>null</code>, then let <var>target</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑦">pseudo-element</a> identified by <var>pseudoElement</var> with <var>object</var> as the originating element. Otherwise, let <var>target</var> be <var>object</var>. <li data-md> If <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options③">options</a></code> is passed with <code class="idl"><a data-link-type="idl" href="#dom-getanimationsoptions-subtree" id="ref-for-dom-getanimationsoptions-subtree①">subtree</a></code> set to true, then return the set of <a data-link-type="dfn" href="#relevant-animations-for-a-subtree" id="ref-for-relevant-animations-for-a-subtree">relevant animations for a subtree</a> of <var>target</var>. Otherwise, return the set of <a data-link-type="dfn" href="#relevant-animations" id="ref-for-relevant-animations">relevant animations</a> for <var>target</var>. </ol> The list returned by the above algorithm is sorted using the composite order described for the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦④">animations</a> of effects in <a href="#the-effect-stack">§ 5.4.2 The effect stack</a>. Calling this method triggers a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event①">style change event</a> for the <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element⑧">target element</a>. As a result, the returned list reflects the state after applying any pending style changes to animation such as changes to animation-related style properties that have yet to be processed. <div class="parameters"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable/getAnimations(options)" data-dfn-type="argument" data-export id="dom-animatable-getanimations-options-options"><code>options</code></dfn> <dd data-md> Parameters governing the set of animations returned by <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations①">getAnimations()</a></code>. </dl> </div> </dl> </div> <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-id"><code>id</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-DOMString" id="ref-for-idl-DOMString①③">DOMString</a>, defaulting to <code>""</code> <dd data-md> The string to assign to the generated <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①③">Animation</a></code>’s <code class="idl"><a data-link-type="idl" href="#dom-animation-id" id="ref-for-dom-animation-id②">id</a></code> attribute. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeAnimationOptions" data-dfn-type="dict-member" data-export id="dom-keyframeanimationoptions-timeline"><code>timeline</code></dfn>, of type <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline⑦">AnimationTimeline</a>, nullable <dd data-md> An optional value which, if present, specifies the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⑨">timeline</a> with which to associate the newly-created <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑤">animation</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GetAnimationsOptions" data-dfn-type="dict-member" data-export id="dom-getanimationsoptions-subtree"><code>subtree</code></dfn>, of type <a data-link-type="idl-name" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean③">boolean</a>, defaulting to <code>false</code> <dd data-md> If true, indicates that <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑥">animations</a> associated with an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①④">animation effect</a> whose <a data-link-type="dfn" href="#effect-target-target-element" id="ref-for-effect-target-target-element⑨">target element</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant②">descendant</a> of the object on which <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations②">getAnimations()</a></code> is called should also be included in the result. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GetAnimationsOptions" data-dfn-type="dict-member" data-export id="dom-getanimationsoptions-pseudoelement"><code>pseudoElement</code></dfn>, of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring⑤">CSSOMString</a>, nullable, defaulting to <code>null</code> <dd data-md> If set, indicates that the target of the operation is the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑧">pseudo-element</a> identified by this pseudo selector (e.g. <code>::before</code>) with the originating element being the object on which the function is called. </dl> </div> <h3 class="heading settled" data-level="6.9" id="extensions-to-the-document-interface">6.9. Extensions to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①①">Document</a></code> interface<a class="self-link" href="#extensions-to-the-document-interface"></a></h3> The following extensions are made to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①②">Document</a></code> interface defined in <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a>. <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/#document" id="ref-for-document①③"><c- g>Document</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#documenttimeline" id="ref-for-documenttimeline③"><c- n>DocumentTimeline</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DocumentTimeline" href="#dom-document-timeline" id="ref-for-dom-document-timeline"><c- g>timeline</c-></a>; }; </pre> <div class="attributes"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-timeline"><code>timeline</code></dfn>, of type <a data-link-type="idl-name" href="#documenttimeline" id="ref-for-documenttimeline④">DocumentTimeline</a>, readonly <dd data-md> The <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline⑤">DocumentTimeline</a></code> object representing the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline⑨">default document timeline</a>. </dl> </div> <h3 class="heading settled" data-level="6.10" id="extensions-to-the-documentorshadowroot-interface-mixin">6.10. Extensions to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot">DocumentOrShadowRoot</a></code> interface mixin<a class="self-link" href="#extensions-to-the-documentorshadowroot-interface-mixin"></a></h3> The following extensions are made to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot①">DocumentOrShadowRoot</a></code> interface mixin defined in <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a>. <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot②"><c- g>DocumentOrShadowRoot</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="#animation" id="ref-for-animation①④"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-documentorshadowroot-getanimations" id="ref-for-dom-documentorshadowroot-getanimations"><c- g>getAnimations</c-></a>(); }; </pre> <div class="methods"> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentOrShadowRoot" data-dfn-type="method" data-export data-lt="getAnimations()" id="dom-documentorshadowroot-getanimations"><code>sequence<Animation> getAnimations()</code></dfn> <dd data-md> Returns the set of <a data-link-type="dfn" href="#relevant-animations-for-a-subtree" id="ref-for-relevant-animations-for-a-subtree①">relevant animations for a subtree</a> for the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document②">document</a> or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root②">shadow root</a> on which this method is called. The returned list is sorted using the composite order described for the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑦">animations</a> of effects in <a href="#the-effect-stack">§ 5.4.2 The effect stack</a>. Calling this method triggers a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event②">style change event</a> for the document. As a result, the returned list reflects the state after applying any pending style changes to animation such as changes to animation-related style properties that have yet to be processed. </dl> </div> <h3 class="heading settled" data-level="6.11" id="extensions-to-the-element-interface">6.11. Extensions to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧">Element</a></code> interface<a class="self-link" href="#extensions-to-the-element-interface"></a></h3> Since DOM Elements can be the target of an animation, the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨">Element</a></code> interface <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a> is extended as follows: <pre class="idl highlight def"><a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⓪"><c- n>Element</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#animatable" id="ref-for-animatable③"><c- n>Animatable</c-></a>; </pre> This allows the following kind of usage. <div class="example" id="example-3abce906"> <a class="self-link" href="#example-3abce906"></a> <pre class="highlight">elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c-> <c- mf>2000</c-><c- p>);</c-> </pre> </div> <h3 class="heading settled" data-level="6.12" id="the-animationplaybackevent-interface">6.12. The <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent③">AnimationPlaybackEvent</a></code> interface<a class="self-link" href="#the-animationplaybackevent-interface"></a></h3> <a data-link-type="dfn" href="#animation-playback-events" id="ref-for-animation-playback-events②">Animation playback events</a> are represented using the <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent④">AnimationPlaybackEvent</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="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> { <a class="idl-code" data-link-type="constructor" href="#dom-animationplaybackevent-animationplaybackevent" id="ref-for-dom-animationplaybackevent-animationplaybackevent"><c- g>constructor</c-></a>(<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 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-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime③"><c- g>currentTime</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-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 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="null" data-link-type="dict-member" data-type="double?" href="#dom-animationplaybackeventinit-currenttime" id="ref-for-dom-animationplaybackeventinit-currenttime"><c- g>currentTime</c-></a> = <c- b>null</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-default="null" data-link-type="dict-member" data-type="double?" href="#dom-animationplaybackeventinit-timelinetime" id="ref-for-dom-animationplaybackeventinit-timelinetime"><c- g>timelineTime</c-></a> = <c- b>null</c->; }; </pre> <div class="constructors"> <dl> <dt data-md><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> AnimationPlaybackEvent (<var>type</var>, <var>eventInitDict</var>)</code></dfn> <dd data-md> Constructs a new <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent⑤">AnimationPlaybackEvent</a></code> object using the procedure defined for <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#constructing-events" id="ref-for-constructing-events">constructing events</a> <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a>. </dl> </div> <div class="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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③①">double</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#animation-current-time" id="ref-for-animation-current-time⑤④">current time</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑧">animation</a> that generated the event at the moment the event was queued. This will be <code>null</code> if the animation was <a data-link-type="dfn" href="#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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③②">double</a>, readonly, nullable <dd data-md> The <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑧">time value</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑥⓪">timeline</a> with which the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑧⓪">animation</a> that generated the event is associated at the moment the event was queued. This will be <code>null</code> if the animation was not associated with an <a data-link-type="dfn" href="#active-timeline" id="ref-for-active-timeline⑥">active timeline</a> at the time the event was queued. </dl> </div> <div class="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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③③">double</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://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③④">double</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="6.13" id="model-liveness">6.13. Model liveness<a class="self-link" href="#model-liveness"></a></h3> Changes made to any part of the model cause the entire timing model to be updated and any dependent style. Unless otherwise stated, invoking the methods or constructors, or getting or setting the members of interfaces defined in the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api①⓪">Web Animations API</a> does not produce a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event③">style change event</a>. Note: Other specifications that extend this specification are expected to refine the requirements on <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event④">style change events</a> by introducing circumstances where such events are triggered. For example, when the interfaces in this specification represent animations defined by CSS markup, many of their methods will need to trigger style change events in order to reflect changes to the specified style. <div class="informative-bg"> This section is non-normative Based on the above requirement and normative requirements elsewhere in this specification, the following invariants can be observed: <dl> <dt data-md>Changes made to the <a data-link-type="dfn" href="#web-animations-model" id="ref-for-web-animations-model①①">Web Animations model</a> take effect immediately <dd data-md> For example, if the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①⑥">KeyframeEffect</a></code> associated with an <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⑤">Animation</a></code> is <a data-link-type="dfn" href="#seek" id="ref-for-seek⑤">seeked</a> (see <a href="#setting-the-current-time-of-an-animation">§ 4.5.4 Setting the current time of an animation</a>) via the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api①①">Web Animations API</a>, the value returned when querying the animation’s <code>startTime</code> will reflect updated state of the model immediately. <div class="example" id="example-f6015dd0"> <a class="self-link" href="#example-f6015dd0"></a> <pre class="highlight"><c- c1>// Initially animation.effect.getComputedTiming().localTime is 3000</c-> animation<c- p>.</c->currentTime <c- o>+=</c-> <c- mf>2000</c-><c- p>;</c-> alert<c- p>(</c->animation<c- p>.</c->effect<c- p>.</c->getComputedTiming<c- p>().</c->localTime<c- p>);</c-> <c- c1>// Displays "5000"</c-> </pre> </div> <dt data-md>Querying the computed style of a property affected by animation returns the fully up-to-date state of the animation <dd data-md> For example, if the used style of an element is queried immediately after applying a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⑥">Animation</a></code> to that element, the result of the new animation will be incorporated in the value returned. <div class="example" id="example-ac9a1207"> <a class="self-link" href="#example-ac9a1207"></a> <pre class="highlight"><c- c1>// Set opacity to 0 immediately</c-> elem<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mf>0</c-> <c- p>},</c-> <c- p>{</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>});</c-> alert<c- p>(</c->window<c- p>.</c->getComputedStyle<c- p>(</c->elem<c- p>).</c->opacity<c- p>);</c-> <c- c1>// Displays "0"</c-> </pre> </div> <dt data-md>Changes made within the same task are synchronized such that the whole set of changes is rendered together <dd data-md> As a result of changes to the model taking effect immediately combined with ECMAScript’s run-to-completion semantics, there should never be a situation where, for example, only the changes to specified style are rendered without applying animation. <div class="example" id="example-a559e918"> <a class="self-link" href="#example-a559e918"></a> <pre class="highlight"><c- c1>// Fade the opacity with fallback for browsers that don’t</c-> <c- c1>// support Element.animate</c-> elem<c- p>.</c->style<c- p>.</c->opacity <c- o>=</c-> <c- t>'0'</c-><c- p>;</c-> elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mf>1</c-> <c- p>},</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mf>0</c-> <c- p>}</c-> <c- p>],</c-> <c- mf>500</c-><c- p>);</c-> </pre> </div> Note, however, that in the example above, a user agent may render a frame with none of the above changes applied. This might happen, for example, if rendering occurs in a separate process that is scheduled to run shortly after the above task completes but before the changes can be communicated to the process. <dt data-md>The value returned by the <code>currentTime</code> attribute of a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline⑥">document timeline</a> will not change within a task <dd data-md> Due to the requirement on <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑥①">timelines</a> to update their <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①④">current time</a> each time the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events④">update animations and send events</a> procedure is run, querying the <code>currentTime</code> twice within a long block of code that is executed in the same script block will return the same value as shown in the following example. <div class="example" id="example-16dafcc0"> <a class="self-link" href="#example-16dafcc0"></a> <pre class="highlight"><c- a>var</c-> a <c- o>=</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime<c- p>;</c-> <c- c1>// ... many lines of code ...</c-> <c- a>var</c-> b <c- o>=</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime<c- p>;</c-> alert<c- p>(</c->b <c- o>-</c-> a<c- p>);</c-> <c- c1>// Displays 0</c-> </pre> </div> <dt data-md>The time passed to a <code>requestAnimationFrame</code> callback will be equal to <code>document.timeline.currentTime</code> <dd data-md> Since HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing model</a> defines that the procedure to <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events⑤">update animations and send events</a> is performed prior to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks" id="ref-for-run-the-animation-frame-callbacks">running animation frame callbacks</a>, and since the time passed to such callbacks is the same <var>now</var> timestamp is passed to both procedures, the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①⑤">current time</a> of a the <a data-link-type="dfn" href="#document-default-document-timeline" id="ref-for-document-default-document-timeline①⓪">default document timeline</a> should match the time passed to <code>requestAnimationFrame</code>. <div class="example" id="example-a0637e5c"> <a class="self-link" href="#example-a0637e5c"></a> <pre class="highlight">window<c- p>.</c->requestAnimationFrame<c- p>(</c-><c- a>function</c-><c- p>(</c->now<c- p>)</c-> <c- p>{</c-> <c- c1>// Displays 0</c-> alert<c- p>(</c->now <c- o>-</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime<c- p>);</c-> <c- p>});</c-> </pre> </div> <dt data-md>Calling methods from this programming interface will generally not cause transitions to be triggered <dd data-md> Consider the following example: <div class="example" id="example-a8ba32df"> <a class="self-link" href="#example-a8ba32df"></a> <pre class="highlight"><c- c1>// Setup transition start point</c-> div<c- p>.</c->style<c- p>.</c->opacity <c- o>=</c-> <c- t>'1'</c-><c- p>;</c-> getComputedStyle<c- p>(</c->div<c- p>).</c->opacity<c- p>;</c-> <c- c1>// Setup transition end point</c-> div<c- p>.</c->style<c- p>.</c->transition <c- o>=</c-> <c- t>'opacity 1s'</c-><c- p>;</c-> div<c- p>.</c->style<c- p>.</c->opacity <c- o>=</c-> <c- t>'0'</c-><c- p>;</c-> <c- c1>// Fire an animation</c-> div<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- p>[</c-><c- mf>0.5</c-><c- p>,</c-> <c- mf>1</c-><c- p>]</c-> <c- p>},</c-> <c- mf>500</c-><c- p>);</c-> <c- c1>// Wait for the transition to end -- the following will never be called!</c-> div<c- p>.</c->addEventListener<c- p>(</c-><c- t>'transitionend'</c-><c- p>,</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c-><c- t>'transitionend'</c-><c- p>);</c-> <c- p>});</c-> </pre> </div> In this case, calling <code class="idl"><a data-link-type="idl" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate③">animate()</a></code> will not trigger a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event⑥">style change event</a>. As a result, the pending style change will be processed at the same time as the style change resulting from the new animation. Since the animation style will override the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#before-change-style" id="ref-for-before-change-style">before-change style</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#after-change-style" id="ref-for-after-change-style">after-change style</a>, no transition will be generated and the event handler for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions/#transitionend" id="ref-for-transitionend">transitionend</a> event will never be called. </dl> </div> <h2 class="heading settled" data-level="7" id="integration-with-media-fragments">7. Integration with Media Fragments<a class="self-link" href="#integration-with-media-fragments"></a></h2> The Media Fragments specification <a data-link-type="biblio" href="#biblio-media-frags" title="Media Fragments URI 1.0 (basic)">[MEDIA-FRAGS]</a> defines a means for addressing a temporal range of a media resource. The application of media fragments depends on the MIME type of the resource on which they are specified. For resources with the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/mimereg.html#mime-registration" id="ref-for-mime-registration">SVG MIME type</a> <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>, the application of temporal parameters is defined in the <a href="https://svgwg.org/specs/animation-elements/">Animation Elements</a> specification. Note: Media fragments are defined to operate on resources based on their MIME type. As a result, temporal addressing might not be supported in all situations where Web Animations content is used. <h2 class="heading settled" data-level="8" id="interaction-with-page-display">8. Interaction with page display<a class="self-link" href="#interaction-with-page-display"></a></h2> HTML permits user agents to store <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state" id="ref-for-an-entry-with-persisted-user-state">user-agent defined state</a> along with a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry" id="ref-for-session-history-entry">session history entry</a> so that as a user navigates between pages, the previous state of the page can be restored including state such as scroll position <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>. User agents that pause and resume <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element" id="ref-for-media-element①">media elements</a> when the referencing document is unloaded and traversed, are encouraged to apply consistent handling to documents containing Web Animations content. If provided, this behavior SHOULD be achieved by adjusting the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑨">time values</a> of any <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑥②">timelines</a> that track wallclock time. <a class="self-link" href="#issue-a128cfff"></a> Is this at odds with those <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑤⓪">time values</a> being relative to <code>navigationStart</code> and with <code>requestAnimationFrame</code> using the same time as <code>document.timeline.currentTime</code>? <a href="https://github.com/w3c/csswg-drafts/issues/2083">[Issue #2083]</a> <h2 class="heading settled" data-level="9" id="implementation-requirements">9. Implementation requirements<a class="self-link" href="#implementation-requirements"></a></h2> <h3 class="heading settled" data-level="9.1" id="precision-of-time-values">9.1. Precision of time values<a class="self-link" href="#precision-of-time-values"></a></h3> The internal representation of time values is implementation dependent. However, it is RECOMMENDED that user agents be able to represent input time values with microsecond precision so that a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑤①">time value</a> (which nominally represents milliseconds) of 0.001 is distinguishable from 0.0. <h3 class="heading settled" data-level="9.2" id="conformance-criteria">9.2. Conformance criteria<a class="self-link" href="#conformance-criteria"></a></h3> This specification defines an abstract model for animation and, as such, for user agents that do not support scripting, there are no conformance criteria since there is no testable surface area. User agents that do not support scripting, however, may implement additional technologies defined in terms of this specification, in which case the definitions provided in this specification will form part of the conformance criteria of the additional technology. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="conforming-scripted-web-animations-user-agent">conforming scripted Web Animations user agent</dfn> is a user agent that implements the <a data-link-type="dfn" href="#web-animations-api" id="ref-for-web-animations-api①②">Web Animations API</a> defined in <a href="#programming-interface">§ 6 Programming interface</a>. <h2 class="heading settled" data-level="10" id="acknowledgements">10. Acknowledgements<a class="self-link" href="#acknowledgements"></a></h2> Thank you to Steve Block, Michael Giuffrida, Ryan Seys, and Eric Willigers for their contributions to this specification. Thank you also to Michiel “Pomax” Kamermans for help with the equations for a proposed smooth easing function, although this feature has been deferred to a subsequent specification. Our deep gratitude goes out to <a href="http://www.endemolshine.com.au">Southern Star Animation</a> for their kind generosity and patience in introducing the editors to the processes and techniques used in producing broadcast animations. <h2 class="heading settled" data-level="11" id="changes-since-last-publication">11. Changes since last publication<a class="self-link" href="#changes-since-last-publication"></a></h2> The following changes have been made since the <a href="https://www.w3.org/TR/2023/WD-web-animations-1-20230605/">5 June 2023 Working Draft</a>: (Nothing yet) The <a href="https://github.com/w3c/csswg-drafts/commits/main/web-animations-1">changelog</a> provides a more detailed history. <h2 class="heading settled" id="animation-types">Appendix A: Animation types of existing properties<a class="self-link" href="#animation-types"></a></h2> Typically the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type①⓪">animation type</a> of a property is included along with its definition. However, for some properties defined in older or very mature specifications the animation type information is not included. All such properties are assumed to have an animation type of <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value③">by computed value</a> unless they are one of the exceptions listed below. <h3 class="heading settled" id="animating-font-weight">Animation of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a><a class="self-link" href="#animating-font-weight"></a></h3> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight①">font-weight</a> property values prior to Level 4 are <a href="https://drafts.csswg.org/css-values-4/#combining-values">combined</a> as follows: <ul> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation②">Interpolated</a> via discrete steps (multiples of 100). The interpolation happens in real number space as for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number></a>s, and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity. <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition③">Addition</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight②">font-weight</a> values is defined as <var>Vresult</var> = <var>Va</var> + <var>Vb</var> </ul> Note: This definition is obsoleted by <a data-link-type="biblio" href="#biblio-css-fonts-4" title="CSS Fonts Module Level 4">[CSS-FONTS-4]</a> where the requirement that a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight③">font-weight</a> value be a multiple of 100 is dropped. At that point the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type①③">animation type</a> for font-weight is simply <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value④">by computed value</a>. <h3 class="heading settled" id="animating-visibility">Animation of <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><a class="self-link" href="#animating-visibility"></a></h3> For the <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> property, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-visibility-visible" id="ref-for-valdef-visibility-visible">visible</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation③">interpolated</a> as a discrete step where values of <var>p</var> between 0 and 1 map to visible and other values of <var>p</var> map to the closer endpoint. If neither value is visible, then <a data-link-type="dfn" href="#discrete" id="ref-for-discrete⑤">discrete</a> animation is used. <h3 class="heading settled" id="animating-shadow-lists">Animation of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow" id="ref-for-propdef-text-shadow">text-shadow</a><a class="self-link" href="#animating-shadow-lists"></a></h3> Animation the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow①">box-shadow</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow" id="ref-for-propdef-text-shadow①">text-shadow</a> property follows the procedures for <a href="https://drafts.csswg.org/css-values-4/#combining-values">combining</a> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="shadow lists" data-lt="combining shadow lists" id="combining-shadow-lists">shadow lists</dfn> as follows: Each shadow in the list (treating none as a 0-length list) is interpolated component-wise as with <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value⑤">by computed value</a> behavior. However, if both input shadows are inset or both input shadows are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow-list uses <a data-link-type="dfn" href="#discrete" id="ref-for-discrete⑥">discrete</a> animation. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a>, whose lengths are all 0, and whose inset (or not) matches the longer list. <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition④">Addition</a> of two <a data-link-type="dfn" href="#combining-shadow-lists" id="ref-for-combining-shadow-lists">shadow lists</a> <var>Va</var> and <var>Vb</var> is defined as <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> concatenation such that <var>Vresult</var> is equal to <var>Va</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-extend" id="ref-for-list-extend">extended</a> with <var>Vb</var>. <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation③">Accumulation</a> of <a data-link-type="dfn" href="#combining-shadow-lists" id="ref-for-combining-shadow-lists①">shadow lists</a> follows the matching rules for interpolation above, performing addition on each component according to its type, or falling back to <a data-link-type="dfn" href="#discrete" id="ref-for-discrete⑦">discrete</a> animation if the inset values do not match. </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-compositeoperation-accumulate">"accumulate"</a>, in § 6.7 <li><a href="#dom-compositeoperation-accumulate">accumulate</a>, in § 6.7 <li><a href="#dom-animationreplacestate-active">"active"</a>, in § 6.4.2 <li><a href="#dom-animationreplacedstate-active">active</a>, in § 6.4.2 <li><a href="#active-after-boundary-time">active-after boundary time</a>, in § 4.6.6 <li><a href="#active-duration">active duration</a>, in § 4.6.5.2 <li><a href="#dom-computedeffecttiming-activeduration">activeDuration</a>, in § 6.5.5 <li><a href="#active-interval">active interval</a>, in § 4.6.5 <li><a href="#animation-effect-active-phase">active phase</a>, in § 4.6.6 <li><a href="#active-replace-state">active replace state</a>, in § 5.5.1 <li><a href="#active-time">active time</a>, in § 4.7.2 <li><a href="#active-timeline">active timeline</a>, in § 4.3 <li><a href="#active-time-space">active time space</a>, in § 4.6.4 <li><a href="#dom-compositeoperation-add">"add"</a>, in § 6.7 <li><a href="#dom-compositeoperation-add">add</a>, in § 6.7 <li><a href="#animation-effect-after-phase">after phase</a>, in § 4.6.6 <li><a href="#dom-playbackdirection-alternate">"alternate"</a>, in § 6.5.3 <li> alternate <ul> <li><a href="#playback-direction-alternate">dfn for playback direction</a>, in § 4.6.10 <li><a href="#dom-playbackdirection-alternate">enum-value for PlaybackDirection</a>, in § 6.5.3 </ul> <li><a href="#dom-playbackdirection-alternate-reverse">"alternate-reverse"</a>, in § 6.5.3 <li> alternate-reverse <ul> <li><a href="#playback-direction-alternate-reverse">dfn for playback direction</a>, in § 4.6.10 <li><a href="#dom-playbackdirection-alternate-reverse">enum-value for PlaybackDirection</a>, in § 6.5.3 </ul> <li><a href="#animatable">Animatable</a>, in § 6.8 <li><a href="#concept-animatable">animatable</a>, in § 5.2 <li><a href="#dom-animatable-animate">animate(keyframes)</a>, in § 6.8 <li><a href="#dom-animatable-animate">animate(keyframes, options)</a>, in § 6.8 <li><a href="#animation">Animation</a>, in § 6.4 <li><a href="#concept-animation">animation</a>, in § 4.5 <li><a href="#dom-animation-animation">Animation()</a>, in § 6.4 <li><a href="#animation-class">animation class</a>, in § 5.4.1 <li><a href="#animation-composite-order">animation composite order</a>, in § 5.4.2 <li><a href="#animation-direction">animation direction</a>, in § 4.6.6 <li><a href="#animation-effect">animation effect</a>, in § 4.6 <li><a href="#dom-animation-animation">Animation(effect)</a>, in § 6.4 <li><a href="#animationeffect">AnimationEffect</a>, in § 6.5 <li><a href="#dom-animation-animation">Animation(effect, timeline)</a>, in § 6.4 <li><a href="#animation-events">Animation events</a>, in § 4.5.18 <li><a href="#animation-frame">animation frame</a>, in § 4.4 <li><a href="#animation-model-dfn">animation model</a>, in § 3 <li><a href="#animationplaybackevent">AnimationPlaybackEvent</a>, in § 6.12 <li><a href="#dictdef-animationplaybackeventinit">AnimationPlaybackEventInit</a>, in § 6.12 <li><a href="#animation-playback-events">animation playback events</a>, in § 4.5.18.2 <li><a href="#dom-animationplaybackevent-animationplaybackevent">AnimationPlaybackEvent(type)</a>, in § 6.12 <li><a href="#dom-animationplaybackevent-animationplaybackevent">AnimationPlaybackEvent(type, eventInitDict)</a>, in § 6.12 <li><a href="#enumdef-animationplaystate">AnimationPlayState</a>, in § 6.4.1 <li><a href="#animation-property-name-to-idl-attribute-name">animation property name to IDL attribute name</a>, in § 6.6.2 <li><a href="#enumdef-animationreplacestate">AnimationReplaceState</a>, in § 6.4.2 <li><a href="#animationtimeline">AnimationTimeline</a>, in § 6.2 <li><a href="#animation-time-to-origin-relative-time">animation time to origin-relative time</a>, in § 4.5.18.1 <li><a href="#animation-time-to-timeline-time">animation time to timeline time</a>, in § 4.5.18.1 <li><a href="#animation-type">Animation type</a>, in § 5.2 <li><a href="#apply-any-pending-playback-rate">apply any pending playback rate</a>, in § 4.5.15.2 <li><a href="#animation-effect-associated-animation">associated animation</a>, in § 4.6.2 <li><a href="#animation-associated-effect">associated effect</a>, in § 4.5 <li><a href="#associated-effect-end">associated effect end</a>, in § 4.5.12 <li><a href="#animation-effect-associated-animation">associated with an animation</a>, in § 4.6.2 <li><a href="#associated-with-a-timeline">associated with a timeline</a>, in § 4.6.2 <li> "auto" <ul> <li><a href="#dom-compositeoperationorauto-auto">enum-value for CompositeOperationOrAuto</a>, in § 6.7 <li><a href="#dom-fillmode-auto">enum-value for FillMode, PlaybackDirection</a>, in § 6.5.2 </ul> <li> auto <ul> <li><a href="#dom-compositeoperationorauto-auto">enum-value for CompositeOperationOrAuto</a>, in § 6.7 <li><a href="#dom-fillmode-auto">enum-value for FillMode, PlaybackDirection</a>, in § 6.5.2 </ul> <li><a href="#dom-fillmode-backwards">"backwards"</a>, in § 6.5.2 <li> backwards <ul> <li><a href="#fill-mode-backwards">dfn for fill mode</a>, in § 4.6.8 <li><a href="#dom-fillmode-backwards">enum-value for FillMode, PlaybackDirection</a>, in § 6.5.2 </ul> <li><a href="#dictdef-basecomputedkeyframe">BaseComputedKeyframe</a>, in § 6.6 <li><a href="#dictdef-basekeyframe">BaseKeyframe</a>, in § 6.6.3 <li><a href="#dictdef-basepropertyindexedkeyframe">BasePropertyIndexedKeyframe</a>, in § 6.6.3 <li><a href="#before-active-boundary-time">before-active boundary time</a>, in § 4.6.6 <li><a href="#animation-effect-before-phase">before phase</a>, in § 4.6.6 <li><a href="#dom-fillmode-both">"both"</a>, in § 6.5.2 <li> both <ul> <li><a href="#fill-mode-both">dfn for fill mode</a>, in § 4.6.8 <li><a href="#dom-fillmode-both">enum-value for FillMode, PlaybackDirection</a>, in § 6.5.2 </ul> <li><a href="#by-computed-value">by computed value</a>, in § 5.2 <li><a href="#dom-animation-cancel">cancel()</a>, in § 6.4 <li><a href="#cancel-an-animation">cancel an animation</a>, in § 4.5.14 <li><a href="#cancel-event">cancel event</a>, in § 4.5.18.3 <li><a href="#check-the-completion-record">check the completion record</a>, in § 6.6.3 <li><a href="#combining-shadow-lists">combining shadow lists</a>, in § Unnumbered section <li><a href="#commit-computed-styles">commit computed styles</a>, in § 6.4 <li><a href="#dom-animation-commitstyles">commitStyles()</a>, in § 6.4 <li> composite <ul> <li><a href="#dom-keyframeeffect-composite">attribute for KeyframeEffect</a>, in § 6.6 <li><a href="#composite">definition of</a>, in § 5.4 <li><a href="#dom-basecomputedkeyframe-composite">dict-member for BaseComputedKeyframe</a>, in § 6.6 <li><a href="#dom-basekeyframe-composite">dict-member for BaseKeyframe</a>, in § 6.6.3 <li><a href="#dom-basepropertyindexedkeyframe-composite">dict-member for BasePropertyIndexedKeyframe</a>, in § 6.6.3 <li><a href="#dom-keyframeeffectoptions-composite">dict-member for KeyframeEffectOptions</a>, in § 6.6.4 </ul> <li><a href="#composited-value">composited value</a>, in § 5.4.3 <li><a href="#composite-operation">composite operation</a>, in § 5.4.4 <li><a href="#enumdef-compositeoperation">CompositeOperation</a>, in § 6.7 <li><a href="#composite-operation-accumulate">composite operation accumulate</a>, in § 5.4.4 <li><a href="#composite-operation-add">composite operation add</a>, in § 5.4.4 <li><a href="#enumdef-compositeoperationorauto">CompositeOperationOrAuto</a>, in § 6.7 <li><a href="#composite-operation-replace">composite operation replace</a>, in § 5.4.4 <li><a href="#animation-composite-order">composite order</a>, in § 5.4.2 <li><a href="#composite">composition</a>, in § 5.4 <li><a href="#compute-a-property-value">compute a property value</a>, in § 5.3.2 <li><a href="#dictdef-computedeffecttiming">ComputedEffectTiming</a>, in § 6.5.5 <li><a href="#computed-keyframe-offsets">computed keyframe offsets</a>, in § 5.3.3 <li><a href="#computed-keyframes">computed keyframes</a>, in § 5.3.3 <li><a href="#dom-basecomputedkeyframe-computedoffset">computedOffset</a>, in § 6.6 <li><a href="#compute-missing-keyframe-offsets">compute missing keyframe offsets</a>, in § 5.3.3 <li><a href="#conforming-scripted-web-animations-user-agent">conforming scripted Web Animations user agent</a>, in § 9.2 <li> constructor() <ul> <li><a href="#dom-animation-animation">constructor for Animation</a>, in § 6.4 <li><a href="#dom-documenttimeline-documenttimeline">constructor for DocumentTimeline</a>, in § 6.3 </ul> <li><a href="#dom-animation-animation">constructor(effect)</a>, in § 6.4 <li><a href="#dom-animation-animation">constructor(effect, timeline)</a>, in § 6.4 <li><a href="#dom-documenttimeline-documenttimeline">constructor(options)</a>, in § 6.3 <li><a href="#dom-keyframeeffect-keyframeeffect-source">constructor(source)</a>, in § 6.6 <li><a href="#dom-keyframeeffect-keyframeeffect">constructor(target, keyframes)</a>, in § 6.6 <li><a href="#dom-keyframeeffect-keyframeeffect">constructor(target, keyframes, options)</a>, in § 6.6 <li><a href="#dom-animationplaybackevent-animationplaybackevent">constructor(type)</a>, in § 6.12 <li><a href="#dom-animationplaybackevent-animationplaybackevent">constructor(type, eventInitDict)</a>, in § 6.12 <li><a href="#current">current</a>, in § 4.6.6 <li><a href="#current-finished-promise">current finished promise</a>, in § 4.5.11 <li><a href="#dom-computedeffecttiming-currentiteration">currentIteration</a>, in § 6.5.5 <li><a href="#current-iteration-index">current iteration index</a>, in § 4.7.5 <li><a href="#current-ready-promise">current ready promise</a>, in § 4.5.7 <li> current time <ul> <li><a href="#animation-current-time">dfn for animation</a>, in § 4.5 <li><a href="#timeline-current-time">dfn for timeline</a>, in § 4.3 </ul> <li> currentTime <ul> <li><a href="#dom-animation-currenttime">attribute for Animation</a>, in § 6.4 <li><a href="#dom-animationplaybackevent-currenttime">attribute for AnimationPlaybackEvent</a>, in § 6.12 <li><a href="#dom-animationtimeline-currenttime">attribute for AnimationTimeline</a>, in § 6.2 <li><a href="#dom-animationplaybackeventinit-currenttime">dict-member for AnimationPlaybackEventInit</a>, in § 6.12 </ul> <li><a href="#document-default-document-timeline">default document timeline</a>, in § 4.3.1.1 <li> delay <ul> <li><a href="#dom-effecttiming-delay">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-delay">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#directed-progress">directed progress</a>, in § 4.7.6 <li> direction <ul> <li><a href="#dom-effecttiming-direction">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-direction">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#discrete">discrete</a>, in § 5.2 <li><a href="#animation-document-for-timing">document for timing</a>, in § 4.5 <li><a href="#document-timeline">document timeline</a>, in § 4.3.1 <li><a href="#documenttimeline">DocumentTimeline</a>, in § 6.3 <li><a href="#dom-documenttimeline-documenttimeline">DocumentTimeline()</a>, in § 6.3 <li><a href="#dom-documenttimeline-documenttimeline">DocumentTimeline(options)</a>, in § 6.3 <li><a href="#dictdef-documenttimelineoptions">DocumentTimelineOptions</a>, in § 6.3 <li><a href="#document-time-space">document time space</a>, in § 4.6.4 <li> duration <ul> <li><a href="#dom-effecttiming-duration">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-duration">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li> easing <ul> <li><a href="#dom-basecomputedkeyframe-easing">dict-member for BaseComputedKeyframe</a>, in § 6.6 <li><a href="#dom-basekeyframe-easing">dict-member for BaseKeyframe</a>, in § 6.6.3 <li><a href="#dom-basepropertyindexedkeyframe-easing">dict-member for BasePropertyIndexedKeyframe</a>, in § 6.6.3 <li><a href="#dom-effecttiming-easing">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-easing">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#dom-animation-effect">effect</a>, in § 6.4 <li><a href="#animation-effect-effect-easing-function">effect easing function</a>, in § 4.6.11 <li><a href="#effective-playback-rate">effective playback rate</a>, in § 4.5.15.2 <li><a href="#effect-stack">effect stack</a>, in § 5.4.2 <li><a href="#keyframe-effect-effect-target">effect target</a>, in § 5.3 <li><a href="#dictdef-effecttiming">EffectTiming</a>, in § 6.5.1 <li><a href="#effect-value">effect value</a>, in § 5.1 <li><a href="#end-delay">end delay</a>, in § 4.6.5.3 <li> endDelay <ul> <li><a href="#dom-effecttiming-enddelay">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-enddelay">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#animation-effect-end-time">end time</a>, in § 4.6.5.3 <li><a href="#dom-computedeffecttiming-endtime">endTime</a>, in § 6.5.5 <li> fill <ul> <li><a href="#dom-effecttiming-fill">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-fill">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#fill-mode">fill mode</a>, in § 4.6.8 <li><a href="#enumdef-fillmode">FillMode</a>, in § 6.5.2 <li><a href="#dom-animation-finish">finish()</a>, in § 6.4 <li><a href="#finish-an-animation">finish an animation</a>, in § 4.5.13 <li><a href="#dom-animationplaystate-finished">"finished"</a>, in § 6.4.1 <li> finished <ul> <li><a href="#dom-animation-finished">attribute for Animation</a>, in § 6.4 <li><a href="#play-state-finished">dfn for play state</a>, in § 4.5.17 <li><a href="#dom-animationplaystate-finished">enum-value for AnimationPlayState</a>, in § 6.4.1 </ul> <li><a href="#play-state-finished">finished play state</a>, in § 4.5.17 <li><a href="#finish-event">finish event</a>, in § 4.5.18.3 <li><a href="#finish-notification-steps">finish notification steps</a>, in § 4.5.12 <li><a href="#dom-fillmode-forwards">"forwards"</a>, in § 6.5.2 <li> forwards <ul> <li><a href="#fill-mode-forwards">dfn for fill mode</a>, in § 4.6.8 <li><a href="#dom-fillmode-forwards">enum-value for FillMode, PlaybackDirection</a>, in § 6.5.2 </ul> <li> getAnimations() <ul> <li><a href="#dom-animatable-getanimations">method for Animatable</a>, in § 6.8 <li><a href="#dom-documentorshadowroot-getanimations">method for DocumentOrShadowRoot</a>, in § 6.10 </ul> <li><a href="#dom-animatable-getanimations">getAnimations(options)</a>, in § 6.8 <li><a href="#dictdef-getanimationsoptions">GetAnimationsOptions</a>, in § 6.8 <li><a href="#dom-animationeffect-getcomputedtiming">getComputedTiming()</a>, in § 6.5 <li><a href="#dom-keyframeeffect-getkeyframes">getKeyframes()</a>, in § 6.6 <li><a href="#dom-animationeffect-gettiming">getTiming()</a>, in § 6.5 <li><a href="#global-animation-list">global animation list</a>, in § 4.5 <li><a href="#animation-hold-time">hold time</a>, in § 4.5 <li> id <ul> <li><a href="#dom-animation-id">attribute for Animation</a>, in § 6.4 <li><a href="#dom-keyframeanimationoptions-id">dict-member for KeyframeAnimationOptions</a>, in § 6.8 </ul> <li><a href="#idl-attribute-name-to-animation-property-name">IDL attribute name to animation property name</a>, in § 6.6.2 <li><a href="#dom-animationplaystate-idle">"idle"</a>, in § 6.4.1 <li> idle <ul> <li><a href="#play-state-idle">dfn for play state</a>, in § 4.5.17 <li><a href="#dom-animationplaystate-idle">enum-value for AnimationPlayState</a>, in § 6.4.1 </ul> <li><a href="#animation-effect-idle-phase">idle phase</a>, in § 4.6.6 <li><a href="#play-state-idle">idle play state</a>, in § 4.5.17 <li><a href="#inactive-timeline">inactive timeline</a>, in § 4.3 <li><a href="#in-effect">in effect</a>, in § 4.6.6 <li><a href="#in-play">in play</a>, in § 4.6.6 <li><a href="#iteration-count">iteration count</a>, in § 4.6.9.2 <li><a href="#iteration-duration">iteration duration</a>, in § 4.6.9.1 <li><a href="#current-iteration-index">iteration index</a>, in § 4.7.5 <li><a href="#iteration-interval">iteration interval</a>, in § 4.6.9.1 <li><a href="#iteration-progress">iteration progress</a>, in § 4.7.8 <li> iterations <ul> <li><a href="#dom-effecttiming-iterations">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-iterations">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#iteration-start">iteration start</a>, in § 4.6.9.2 <li> iterationStart <ul> <li><a href="#dom-effecttiming-iterationstart">dict-member for EffectTiming</a>, in § 6.5.1 <li><a href="#dom-optionaleffecttiming-iterationstart">dict-member for OptionalEffectTiming</a>, in § 6.5.1 </ul> <li><a href="#iteration-time">iteration time</a>, in § 4.6.4 <li><a href="#iteration-time-space">iteration time space</a>, in § 4.6.4 <li><a href="#keyframe">keyframe</a>, in § 5.3.1 <li><a href="#dictdef-keyframeanimationoptions">KeyframeAnimationOptions</a>, in § 6.8 <li><a href="#keyframe-effect">keyframe effect</a>, in § 5.3 <li><a href="#keyframeeffect">KeyframeEffect</a>, in § 6.6 <li><a href="#dictdef-keyframeeffectoptions">KeyframeEffectOptions</a>, in § 6.6.4 <li><a href="#dom-keyframeeffect-keyframeeffect-source">KeyframeEffect(source)</a>, in § 6.6 <li><a href="#dom-keyframeeffect-keyframeeffect">KeyframeEffect(target, keyframes)</a>, in § 6.6 <li><a href="#dom-keyframeeffect-keyframeeffect">KeyframeEffect(target, keyframes, options)</a>, in § 6.6 <li><a href="#keyframe-offset">keyframe offset</a>, in § 5.3.1 <li><a href="#keyframe-specific-composite-operation">keyframe-specific composite operation</a>, in § 5.3.1 <li><a href="#keyframe-specific-easing-function">keyframe-specific easing function</a>, in § 5.3.1 <li><a href="#local-time">local time</a>, in § 4.6.3 <li><a href="#dom-computedeffecttiming-localtime">localTime</a>, in § 6.5.5 <li><a href="#local-time-space">local time space</a>, in § 4.6.4 <li><a href="#loosely-sorted-by-offset">loosely sorted by offset</a>, in § 5.3.1 <li><a href="#monotonically-increasing-timeline">monotonically increasing</a>, in § 4.3 <li><a href="#monotonically-increasing-timeline">monotonically increasing timeline</a>, in § 4.3 <li><a href="#neutral-value-for-composition">neutral value for composition</a>, in § 5.3.4 <li><a href="#dom-fillmode-none">"none"</a>, in § 6.5.2 <li> none <ul> <li><a href="#fill-mode-none">dfn for fill mode</a>, in § 4.6.8 <li><a href="#dom-fillmode-none">enum-value for FillMode, PlaybackDirection</a>, in § 6.5.2 </ul> <li><a href="#dom-playbackdirection-normal">"normal"</a>, in § 6.5.3 <li> normal <ul> <li><a href="#playback-direction-normal">dfn for playback direction</a>, in § 4.6.10 <li><a href="#dom-playbackdirection-normal">enum-value for PlaybackDirection</a>, in § 6.5.3 </ul> <li><a href="#not-animatable">not animatable</a>, in § 5.2 <li> offset <ul> <li><a href="#dom-basecomputedkeyframe-offset">dict-member for BaseComputedKeyframe</a>, in § 6.6 <li><a href="#dom-basekeyframe-offset">dict-member for BaseKeyframe</a>, in § 6.6.3 <li><a href="#dom-basepropertyindexedkeyframe-offset">dict-member for BasePropertyIndexedKeyframe</a>, in § 6.6.3 </ul> <li><a href="#offsetk">offsetk</a>, in § 5.3.3 <li><a href="#dom-animation-oncancel">oncancel</a>, in § 6.4 <li><a href="#dom-animation-onfinish">onfinish</a>, in § 6.4 <li><a href="#dom-animation-onremove">onremove</a>, in § 6.4 <li><a href="#dictdef-optionaleffecttiming">OptionalEffectTiming</a>, in § 6.5.1 <li><a href="#origin-time">origin time</a>, in § 4.3.1 <li><a href="#dom-documenttimelineoptions-origintime">originTime</a>, in § 6.3 <li><a href="#overall-progress">overall progress</a>, in § 4.7.3 <li><a href="#dom-animation-pause">pause()</a>, in § 6.4 <li><a href="#pause-an-animation">pause an animation</a>, in § 4.5.9 <li><a href="#dom-animationplaystate-paused">"paused"</a>, in § 6.4.1 <li> paused <ul> <li><a href="#play-state-paused">dfn for play state</a>, in § 4.5.17 <li><a href="#dom-animationplaystate-paused">enum-value for AnimationPlayState</a>, in § 6.4.1 </ul> <li><a href="#play-state-paused">paused play state</a>, in § 4.5.17 <li><a href="#dom-animation-pending">pending</a>, in § 6.4 <li><a href="#pending-animation-event-queue">pending animation event queue</a>, in § 4.5.18 <li><a href="#pending-pause-task">pending pause task</a>, in § 4.5.9 <li><a href="#pending-playback-rate">pending playback rate</a>, in § 4.5.15.2 <li><a href="#pending-play-task">pending play task</a>, in § 4.5.8 <li><a href="#dom-animation-persist">persist()</a>, in § 6.4 <li><a href="#dom-animationreplacestate-persisted">"persisted"</a>, in § 6.4.2 <li><a href="#dom-animationreplacedstate-persisted">persisted</a>, in § 6.4.2 <li><a href="#persisted-replace-state">persisted replace state</a>, in § 5.5.1 <li><a href="#dom-animation-play">play()</a>, in § 6.4 <li><a href="#play-an-animation">play an animation</a>, in § 4.5.8 <li><a href="#playback-control">playback control</a>, in § 4.5 <li><a href="#playback-direction">playback direction</a>, in § 4.6.10 <li><a href="#enumdef-playbackdirection">PlaybackDirection</a>, in § 6.5.3 <li><a href="#playback-rate">playback rate</a>, in § 4.5.15 <li><a href="#dom-animation-playbackrate">playbackRate</a>, in § 6.4 <li><a href="#animation-play-state">play state</a>, in § 4.5.17 <li><a href="#dom-animation-playstate">playState</a>, in § 6.4 <li><a href="#previous-current-time">previous current time</a>, in § 4.5.12 <li><a href="#process-a-keyframe-like-object">process a keyframe-like object</a>, in § 6.6.3 <li><a href="#process-a-keyframes-argument">process a keyframes argument</a>, in § 6.6.3 <li><a href="#dom-computedeffecttiming-progress">progress</a>, in § 6.5.5 <li> pseudoElement <ul> <li><a href="#dom-keyframeeffect-pseudoelement">attribute for KeyframeEffect</a>, in § 6.6 <li><a href="#dom-getanimationsoptions-pseudoelement">dict-member for GetAnimationsOptions</a>, in § 6.8 <li><a href="#dom-keyframeeffectoptions-pseudoelement">dict-member for KeyframeEffectOptions</a>, in § 6.6.4 </ul> <li><a href="#dom-keyframeeffect-pseudo-element-parsing">pseudo-element parsing</a>, in § 6.6 <li> ready <ul> <li><a href="#dom-animation-ready">attribute for Animation</a>, in § 6.4 <li><a href="#ready">definition of</a>, in § 4.5.6 </ul> <li><a href="#animation-relevant">relevant</a>, in § 4.6.7 <li><a href="#relevant-animations">relevant animations</a>, in § 4.6.7 <li><a href="#relevant-animations-for-a-subtree">relevant animations for a subtree</a>, in § 4.6.7 <li><a href="#dom-animationreplacestate-removed">"removed"</a>, in § 6.4.2 <li><a href="#dom-animationreplacedstate-removed">removed</a>, in § 6.4.2 <li><a href="#removed-replace-state">removed replace state</a>, in § 5.5.1 <li><a href="#remove-event">remove event</a>, in § 4.5.18.3 <li><a href="#remove-replaced-animations">remove replaced animations</a>, in § 5.5.2 <li><a href="#repeatable-list">repeatable list</a>, in § 5.2 <li><a href="#dom-compositeoperation-replace">"replace"</a>, in § 6.7 <li><a href="#dom-compositeoperation-replace">replace</a>, in § 6.7 <li><a href="#replaceable-animation">replaceable</a>, in § 5.5.2 <li><a href="#replaceable-animation">replaceable animation</a>, in § 5.5.2 <li><a href="#replace-state">replace state</a>, in § 5.5.1 <li><a href="#dom-animation-replacestate">replaceState</a>, in § 6.4 <li><a href="#animation-reset-an-animations-pending-tasks">reset an animation’s pending tasks</a>, in § 4.5.14 <li><a href="#dom-playbackdirection-reverse">"reverse"</a>, in § 6.5.3 <li> reverse <ul> <li><a href="#playback-direction-reverse">dfn for playback direction</a>, in § 4.6.10 <li><a href="#dom-playbackdirection-reverse">enum-value for PlaybackDirection</a>, in § 6.5.3 </ul> <li><a href="#dom-animation-reverse">reverse()</a>, in § 6.4 <li><a href="#reverse-an-animation">reverse an animation</a>, in § 4.5.16 <li><a href="#dom-animationplaystate-running">"running"</a>, in § 6.4.1 <li> running <ul> <li><a href="#play-state-running">dfn for play state</a>, in § 4.5.17 <li><a href="#dom-animationplaystate-running">enum-value for AnimationPlayState</a>, in § 6.4.1 </ul> <li><a href="#play-state-running">running play state</a>, in § 4.5.17 <li><a href="#scheduled-event-time">scheduled event time</a>, in § 4.5.18 <li><a href="#seamlessly-update-the-playback-rate">seamlessly update the playback rate</a>, in § 4.5.15.2 <li><a href="#seek">seek</a>, in § 4.5.4 <li><a href="#dom-keyframeeffect-setkeyframes">setKeyframes(keyframes)</a>, in § 6.6 <li><a href="#animation-set-the-associated-effect-of-an-animation">set the associated effect of an animation</a>, in § 4.5.3 <li><a href="#animation-set-the-current-time">set the current time</a>, in § 4.5.4 <li><a href="#set-the-playback-rate">set the playback rate</a>, in § 4.5.15.1 <li><a href="#set-the-start-time">set the start time</a>, in § 4.5.5 <li><a href="#animation-set-the-timeline-of-an-animation">set the timeline of an animation</a>, in § 4.5.2 <li><a href="#combining-shadow-lists">shadow lists</a>, in § Unnumbered section <li><a href="#animation-silently-set-the-current-time">silently set the current time</a>, in § 4.5.4 <li><a href="#simple-iteration-progress">simple iteration progress</a>, in § 4.7.4 <li><a href="#start-delay">start delay</a>, in § 4.6.5.1 <li><a href="#animation-start-time">start time</a>, in § 4.5 <li><a href="#dom-animation-starttime">startTime</a>, in § 6.4 <li><a href="#dom-getanimationsoptions-subtree">subtree</a>, in § 6.8 <li><a href="#dom-keyframeeffect-target">target</a>, in § 6.6 <li><a href="#effect-target-target-element">target element</a>, in § 5.3 <li><a href="#target-property">target property</a>, in § 5.1 <li><a href="#effect-target-target-pseudo-selector">target pseudo-selector</a>, in § 5.3 <li> timeline <ul> <li><a href="#dom-animation-timeline">attribute for Animation</a>, in § 6.4 <li><a href="#dom-document-timeline">attribute for Document</a>, in § 6.9 <li><a href="#timeline">definition of</a>, in § 4.3 <li><a href="#dom-keyframeanimationoptions-timeline">dict-member for KeyframeAnimationOptions</a>, in § 6.8 </ul> <li><a href="#timeline-associated-with-a-document">timeline associated with a document</a>, in § 4.3 <li> timelineTime <ul> <li><a href="#dom-animationplaybackevent-timelinetime">attribute for AnimationPlaybackEvent</a>, in § 6.12 <li><a href="#dom-animationplaybackeventinit-timelinetime">dict-member for AnimationPlaybackEventInit</a>, in § 6.12 </ul> <li><a href="#timeline-time-to-origin-relative-time">timeline time to origin-relative time</a>, in § 4.3 <li><a href="#time-spaces">time spaces</a>, in § 4.6.4 <li><a href="#time-value">time value</a>, in § 4.2 <li><a href="#timing-model-dfn">timing model</a>, in § 3 <li><a href="#timing-nodes">timing nodes</a>, in § 4 <li><a href="#transformed-progress">transformed progress</a>, in § 4.7.7 <li><a href="#underlying-value">underlying value</a>, in § 5.4.3 <li><a href="#unresolved">unresolved</a>, in § 4.2 <li><a href="#update-an-animations-finished-state">update an animation’s finished state</a>, in § 4.5.12 <li><a href="#update-animations-and-send-events">update animations and send events</a>, in § 4.4 <li><a href="#dom-animation-updateplaybackrate">updatePlaybackRate(playbackRate)</a>, in § 6.4 <li><a href="#update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation effect</a>, in § 6.5.4 <li><a href="#dom-animationeffect-updatetiming">updateTiming()</a>, in § 6.5 <li><a href="#dom-animationeffect-updatetiming">updateTiming(timing)</a>, in § 6.5 <li><a href="#web-animations-animation-model">Web Animations animation model</a>, in § 5 <li><a href="#web-animations-api">Web Animations API</a>, in § 1 <li><a href="#web-animations-model">Web Animations model</a>, in § 1 <li><a href="#web-animations-timing-model">Web Animations timing model</a>, in § 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>animation-fill-mode <li>animation-name <li>events from CSS animations </ul> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-2]</a> defines the following terms: <ul> <li>CSSAnimation <li>owning element (animation) </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>background-image <li>background-origin <li>border-bottom-width <li>border-color <li>border-left-width <li>border-right-width <li>border-top <li>border-top-color <li>border-top-width <li>border-width <li>box-shadow </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>Animation Origin <li>computed value <li>longhand property <li>shorthand property <li>Transition Origin </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>transparent </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>display <li>visibility <li>visible </ul> <li> <a data-link-type="biblio">[CSS-EASING-2]</a> defines the following terms: <ul> <li><easing-function> <li>before flag <li>easing function <li>input progress value <li>linear easing function </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font-size <li>font-weight </ul> <li> <a data-link-type="biblio">[CSS-PROPERTIES-VALUES-API-1]</a> defines the following terms: <ul> <li>registerProperty(definition) <li>syntax definition <li>universal syntax definition </ul> <li> <a data-link-type="biblio">[CSS-SHADOW-PARTS-1]</a> defines the following terms: <ul> <li>::part() </ul> <li> <a data-link-type="biblio">[CSS-STYLE-ATTR]</a> defines the following terms: <ul> <li>style attribute </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-shadow </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li>transform </ul> <li> <a data-link-type="biblio">[CSS-TRANSITIONS-1]</a> defines the following terms: <ul> <li>after-change style <li>before-change style <li>events from CSS transitions <li>style change event <li>transitionend </ul> <li> <a data-link-type="biblio">[CSS-TRANSITIONS-2]</a> defines the following terms: <ul> <li>owning element (transition) </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><number> <li>em <li>interpolate <li>interpolation <li>not additive <li>value accumulation <li>value addition </ul> <li> <a data-link-type="biblio">[CSS-VARIABLES-2]</a> defines the following terms: <ul> <li><custom-property-name> <li>custom property </ul> <li> <a data-link-type="biblio">[CSS-WILL-CHANGE-1]</a> defines the following terms: <ul> <li>will-change </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>equivalent physical property <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS21]</a> defines the following terms: <ul> <li>stacking context </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>float </ul> <li> <a data-link-type="biblio">[CSSOM]</a> defines the following terms: <ul> <li>CSSOMString <li>CSS declaration block <li>CSS property to IDL attribute <li>IDL attribute to CSS property <li>owner node <li>serialize a CSS value <li>set a CSS declaration <li>update style attribute for </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>DocumentOrShadowRoot <li>Element <li>Event <li>EventInit <li>EventTarget <li>connected <li>constructing events <li>create an event <li>descendant <li>dispatch <li>document <li>has an attribute <li>inclusive descendant <li>node document <li>shadow root <li>type </ul> <li> <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms: <ul> <li>[[DefineOwnProperty]] <li>[[Get]] <li>completion record specification type <li>EnumerableOwnNames <li>GetIterator <li>GetMethod <li>IteratorStep <li>IteratorValue <li>Promise <li>Promise object <li>Type <li>well known symbols </ul> <li> <a data-link-type="biblio">[HR-TIME]</a> defines the following terms: <ul> <li>DOMHighResTimeStamp </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>CEReactions <li>Document <li>EventHandler <li>Window <li>active document <li>an entry with persisted user state <li>animation frame callbacks <li>being rendered <li>current global object <li>document associated with a window <li>document.open() <li>DOM manipulation task source <li>event loop processing model <li>media element <li>perform a microtask checkpoint <li>queue a microtask <li>queue a task <li>relevant Realm <li>run the animation frame callbacks <li>session history entry <li>time origin </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>exist <li>extend <li>iterate <li>list <li>ordered set </ul> <li> <a data-link-type="biblio">[MOTION-1]</a> defines the following terms: <ul> <li>offset </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li><pseudo-element-selector> <li>invalid selector <li>originating element <li>pseudo-element </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>SVG MIME type </ul> <li> <a data-link-type="biblio">[WEB-ANIMATIONS-2]</a> defines the following terms: <ul> <li>iteration composite operation <li>iteration composite operation accumulate </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>AbortError <li>DOMException <li>DOMString <li>Exposed <li>InvalidStateError <li>NoModificationAllowedError <li>Promise <li>RangeError <li>SyntaxError <li>TypeError <li>[EnforceRange] <li>a new promise <li>boolean <li>convert ecmascript to idl value <li>create a new resolved Promise <li>DOMString to es <li>double <li>es to dictionary <li>es to DOMString <li>nullable <li>object <li>reject a promise <li>resolve <li>resolve a promise <li>sequence <li>throw <li>undefined <li>unrestricted double </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-animations-2">[CSS-ANIMATIONS-2] <dd>David Baron; Brian Birtles. <a href="https://drafts.csswg.org/css-animations-2/"><cite>CSS Animations Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations-2/">https://drafts.csswg.org/css-animations-2/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-cascade-3">[CSS-CASCADE-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-3/"><cite>CSS Cascading and Inheritance Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-3/">https://drafts.csswg.org/css-cascade-3/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://drafts.csswg.org/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</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-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> <dt id="biblio-css-logical-1">[CSS-LOGICAL-1] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-logical-1/"><cite>CSS Logical Properties and Values Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a> <dt id="biblio-css-properties-values-api-1">[CSS-PROPERTIES-VALUES-API-1] <dd>Tab Atkins Jr.; Alan Stearns; Greg Whitworth. <a href="https://drafts.css-houdini.org/css-properties-values-api-1/"><cite>CSS Properties and Values API Level 1</cite></a>. URL: <a href="https://drafts.css-houdini.org/css-properties-values-api-1/">https://drafts.css-houdini.org/css-properties-values-api-1/</a> <dt id="biblio-css-shadow-parts-1">[CSS-SHADOW-PARTS-1] <dd>Tab Atkins Jr.; Fergal Daly. <a href="https://drafts.csswg.org/css-shadow-parts/"><cite>CSS Shadow Parts</cite></a>. URL: <a href="https://drafts.csswg.org/css-shadow-parts/">https://drafts.csswg.org/css-shadow-parts/</a> <dt id="biblio-css-style-attr">[CSS-STYLE-ATTR] <dd>Tantek Çelik; Elika Etemad. <a href="https://drafts.csswg.org/css-style-attr/"><cite>CSS Style Attributes</cite></a>. URL: <a href="https://drafts.csswg.org/css-style-attr/">https://drafts.csswg.org/css-style-attr/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-4/">https://drafts.csswg.org/css-text-decor-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-transitions-2">[CSS-TRANSITIONS-2] <dd>David Baron; Brian Birtles. <a href="https://drafts.csswg.org/css-transitions-2/"><cite>CSS Transitions Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-transitions-2/">https://drafts.csswg.org/css-transitions-2/</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-css-variables-2">[CSS-VARIABLES-2] <dd><a href="https://drafts.csswg.org/css-variables-2/"><cite>CSS Custom Properties for Cascading Variables Module Level 2</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-variables-2/">https://drafts.csswg.org/css-variables-2/</a> <dt id="biblio-css-will-change-1">[CSS-WILL-CHANGE-1] <dd>Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-will-change/"><cite>CSS Will Change Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-will-change/">https://drafts.csswg.org/css-will-change/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom">[CSSOM] <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-ecmascript">[ECMASCRIPT] <dd><a href="https://tc39.es/ecma262/multipage/"><cite>ECMAScript Language Specification</cite></a>. URL: <a href="https://tc39.es/ecma262/multipage/">https://tc39.es/ecma262/multipage/</a> <dt id="biblio-hr-time">[HR-TIME] <dd>Yoav Weiss. <a href="https://w3c.github.io/hr-time/"><cite>High Resolution Time</cite></a>. URL: <a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/</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-media-frags">[MEDIA-FRAGS] <dd>Raphaël Troncy; et al. <a href="https://www.w3.org/TR/media-frags/"><cite>Media Fragments URI 1.0 (basic)</cite></a>. 25 September 2012. REC. URL: <a href="https://www.w3.org/TR/media-frags/">https://www.w3.org/TR/media-frags/</a> <dt id="biblio-motion-1">[MOTION-1] <dd>Tab Atkins Jr.; Dirk Schulze; Jihye Hong. <a href="https://drafts.fxtf.org/motion-1/"><cite>Motion Path Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/motion-1/">https://drafts.fxtf.org/motion-1/</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-select">[SELECT] <dd>Tantek Çelik; et al. <a href="https://drafts.csswg.org/selectors-3/"><cite>Selectors Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/selectors-3/">https://drafts.csswg.org/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/"><cite>Selectors Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a> <dt id="biblio-svg11">[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</cite></a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://svgwg.org/svg2-draft/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. URL: <a href="https://svgwg.org/svg2-draft/">https://svgwg.org/svg2-draft/</a> <dt id="biblio-web-animations-2">[WEB-ANIMATIONS-2] <dd>Brian Birtles; Robert Flack. <a href="https://drafts.csswg.org/web-animations-2/"><cite>Web Animations Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/web-animations-2/">https://drafts.csswg.org/web-animations-2/</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> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1] <dd>Simon Fraser; et al. <a href="https://drafts.csswg.org/css-transforms/"><cite>CSS Transforms Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-transforms/">https://drafts.csswg.org/css-transforms/</a> <dt id="biblio-css21">[CSS21] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-smil-animation">[SMIL-ANIMATION] <dd>Patrick Schmitz; Aaron Cohen. <a href="https://www.w3.org/TR/smil-animation/"><cite>SMIL Animation</cite></a>. 4 September 2001. REC. URL: <a href="https://www.w3.org/TR/smil-animation/">https://www.w3.org/TR/smil-animation/</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>interface</c-> <a href="#animationtimeline"><code><c- g>AnimationTimeline</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-double"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationtimeline-currenttime"><c- g>currentTime</c-></a>; }; <c- b>dictionary</c-> <a href="#dictdef-documenttimelineoptions"><code><c- g>DocumentTimelineOptions</c-></code></a> { <a data-link-type="idl-name" href="https://w3c.github.io/hr-time/#dom-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="DOMHighResTimeStamp" href="#dom-documenttimelineoptions-origintime"><c- g>originTime</c-></a> = 0; }; [<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="#documenttimeline"><code><c- g>DocumentTimeline</c-></code></a> : <a data-link-type="idl-name" href="#animationtimeline"><c- n>AnimationTimeline</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-documenttimeline-documenttimeline"><c- g>constructor</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-documenttimelineoptions"><c- n>DocumentTimelineOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-documenttimeline-documenttimeline-options-options"><c- g>options</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>interface</c-> <a class="idl-code" data-link-type="interface" href="#animation"><c- g>Animation</c-></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget"><c- n>EventTarget</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-animation-animation"><c- g>constructor</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-effect"><c- g>effect</c-></a> = <c- b>null</c->, <c- b>optional</c-> <a data-link-type="idl-name" href="#animationtimeline"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-timeline"><c- g>timeline</c-></a>); <c- b>attribute</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="DOMString" href="#dom-animation-id"><c- g>id</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="#animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="AnimationEffect?" href="#dom-animation-effect"><c- g>effect</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="#animationtimeline"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="AnimationTimeline?" href="#dom-animation-timeline"><c- g>timeline</c-></a>; <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-type="double?" href="#dom-animation-starttime"><c- g>startTime</c-></a>; <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-type="double?" href="#dom-animation-currenttime"><c- g>currentTime</c-></a>; <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-type="double" href="#dom-animation-playbackrate"><c- g>playbackRate</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-animationplaystate"><c- n>AnimationPlayState</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationPlayState" href="#dom-animation-playstate"><c- g>playState</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-animationreplacestate"><c- n>AnimationReplaceState</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationReplaceState" href="#dom-animation-replacestate"><c- g>replaceState</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-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-animation-pending"><c- g>pending</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-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="#animation"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-ready"><c- g>ready</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-promise"><c- b>Promise</c-></a><<a data-link-type="idl-name" href="#animation"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-finished"><c- g>finished</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onfinish"><c- g>onfinish</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-oncancel"><c- g>oncancel</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onremove"><c- g>onremove</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-animation-cancel"><c- g>cancel</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-animation-finish"><c- g>finish</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-animation-play"><c- g>play</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-animation-pause"><c- g>pause</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-animation-updateplaybackrate"><c- g>updatePlaybackRate</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="argument" href="#dom-animation-updateplaybackrate-playbackrate-playbackrate"><c- g>playbackRate</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-animation-reverse"><c- g>reverse</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-animation-persist"><c- g>persist</c-></a>(); [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions"><c- g>CEReactions</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-animation-commitstyles"><c- g>commitStyles</c-></a>(); }; <c- b>enum</c-> <a href="#enumdef-animationplaystate"><code><c- g>AnimationPlayState</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-idle"><c- s>"idle"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-running"><c- s>"running"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-paused"><c- s>"paused"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-animationplaystate-finished"><c- s>"finished"</c-></a> }; <c- b>enum</c-> <a href="#enumdef-animationreplacestate"><code><c- g>AnimationReplaceState</c-></code></a> { <a href="#dom-animationreplacestate-active"><code><c- s>"active"</c-></code></a>, <a href="#dom-animationreplacestate-removed"><code><c- s>"removed"</c-></code></a>, <a href="#dom-animationreplacestate-persisted"><code><c- s>"persisted"</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="#animationeffect"><code><c- g>AnimationEffect</c-></code></a> { <a data-link-type="idl-name" href="#dictdef-effecttiming"><c- n>EffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-gettiming"><c- g>getTiming</c-></a>(); <a data-link-type="idl-name" href="#dictdef-computedeffecttiming"><c- n>ComputedEffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-getcomputedtiming"><c- g>getComputedTiming</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-updatetiming"><c- g>updateTiming</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-optionaleffecttiming"><c- n>OptionalEffectTiming</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animationeffect-updatetiming-timing-timing"><c- g>timing</c-></a> = {}); }; <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="#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-default="0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-delay"><c- g>delay</c-></a> = 0; <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="0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-enddelay"><c- g>endDelay</c-></a> = 0; <a data-link-type="idl-name" href="#enumdef-fillmode"><c- n>FillMode</c-></a> <a class="idl-code" data-default=""auto"" data-link-type="dict-member" data-type="FillMode" href="#dom-effecttiming-fill"><c- g>fill</c-></a> = "auto"; <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="0.0" data-link-type="dict-member" data-type="double" href="#dom-effecttiming-iterationstart"><c- g>iterationStart</c-></a> = 0.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> <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="unrestricted double" href="#dom-effecttiming-iterations"><c- g>iterations</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 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 DOMString)" href="#dom-effecttiming-duration"><c- g>duration</c-></a> = "auto"; <a data-link-type="idl-name" href="#enumdef-playbackdirection"><c- n>PlaybackDirection</c-></a> <a class="idl-code" data-default=""normal"" data-link-type="dict-member" data-type="PlaybackDirection" href="#dom-effecttiming-direction"><c- g>direction</c-></a> = "normal"; <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=""linear"" data-link-type="dict-member" data-type="DOMString" href="#dom-effecttiming-easing"><c- g>easing</c-></a> = "linear"; }; <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="#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-delay"><code><c- g>delay</c-></code></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-enddelay"><code><c- g>endDelay</c-></code></a>; <a data-link-type="idl-name" href="#enumdef-fillmode"><c- n>FillMode</c-></a> <a data-type="FillMode" href="#dom-optionaleffecttiming-fill"><code><c- g>fill</c-></code></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-iterationstart"><code><c- g>iterationStart</c-></code></a>; <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> <a data-type="unrestricted double" href="#dom-optionaleffecttiming-iterations"><code><c- g>iterations</c-></code></a>; (<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 class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>) <a data-type="(unrestricted double or DOMString)" href="#dom-optionaleffecttiming-duration"><code><c- g>duration</c-></code></a>; <a data-link-type="idl-name" href="#enumdef-playbackdirection"><c- n>PlaybackDirection</c-></a> <a data-type="PlaybackDirection" href="#dom-optionaleffecttiming-direction"><code><c- g>direction</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 data-type="DOMString" href="#dom-optionaleffecttiming-easing"><code><c- g>easing</c-></code></a>; }; <c- b>enum</c-> <a href="#enumdef-fillmode"><code><c- g>FillMode</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-none"><c- s>"none"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-forwards"><c- s>"forwards"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-backwards"><c- s>"backwards"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-both"><c- s>"both"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-fillmode-auto"><c- s>"auto"</c-></a> }; <c- b>enum</c-> <a href="#enumdef-playbackdirection"><code><c- g>PlaybackDirection</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-normal"><c- s>"normal"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-reverse"><c- s>"reverse"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-alternate"><c- s>"alternate"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-playbackdirection-alternate-reverse"><c- s>"alternate-reverse"</c-></a> }; <c- b>dictionary</c-> <a href="#dictdef-computedeffecttiming"><code><c- g>ComputedEffectTiming</c-></code></a> : <a data-link-type="idl-name" href="#dictdef-effecttiming"><c- n>EffectTiming</c-></a> { <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> <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double" href="#dom-computedeffecttiming-endtime"><c- g>endTime</c-></a>; <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> <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double" href="#dom-computedeffecttiming-activeduration"><c- g>activeDuration</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-computedeffecttiming-localtime"><c- g>localTime</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-computedeffecttiming-progress"><c- g>progress</c-></a>; <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>? <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double?" href="#dom-computedeffecttiming-currentiteration"><c- g>currentIteration</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>interface</c-> <a class="idl-code" data-link-type="interface" href="#keyframeeffect"><c- g>KeyframeEffect</c-></a> : <a data-link-type="idl-name" href="#animationeffect"><c- n>AnimationEffect</c-></a> { <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect"><c- g>constructor</c-></a>(<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"><c- g>target</c-></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"><c- g>keyframes</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="#dictdef-keyframeeffectoptions"><c- n>KeyframeEffectOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"><c- g>options</c-></a> = {}); <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect-source"><c- g>constructor</c-></a>(<a data-link-type="idl-name" href="#keyframeeffect"><c- n>KeyframeEffect</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-source-source"><c- g>source</c-></a>); <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="Element?" href="#dom-keyframeeffect-target"><c- g>target</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSOMString?" href="#dom-keyframeeffect-pseudoelement"><c- g>pseudoElement</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="#enumdef-compositeoperation"><c- n>CompositeOperation</c-></a> <a class="idl-code" data-link-type="attribute" data-type="CompositeOperation" href="#dom-keyframeeffect-composite"><c- g>composite</c-></a>; <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-keyframeeffect-getkeyframes"><c- g>getKeyframes</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-keyframeeffect-setkeyframes"><c- g>setKeyframes</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a>? <a href="#dom-keyframeeffect-setkeyframes-keyframes-keyframes"><code><c- g>keyframes</c-></code></a>); }; <c- b>dictionary</c-> <a href="#dictdef-basecomputedkeyframe"><code><c- g>BaseComputedKeyframe</c-></code></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a>? <a data-default="null" data-type="double?" href="#dom-basecomputedkeyframe-offset"><code><c- g>offset</c-></code></a> = <c- b>null</c->; <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-basecomputedkeyframe-computedoffset"><code><c- g>computedOffset</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 data-default=""linear"" data-type="DOMString" href="#dom-basecomputedkeyframe-easing"><code><c- g>easing</c-></code></a> = "linear"; <a data-link-type="idl-name" href="#enumdef-compositeoperationorauto"><c- n>CompositeOperationOrAuto</c-></a> <a data-default=""auto"" data-type="CompositeOperationOrAuto" href="#dom-basecomputedkeyframe-composite"><code><c- g>composite</c-></code></a> = "auto"; }; <c- b>dictionary</c-> <a href="#dictdef-basepropertyindexedkeyframe"><code><c- g>BasePropertyIndexedKeyframe</c-></code></a> { (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a>? <c- b>or</c-> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</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-default="[]" data-type="(double? or sequence<double?>)" href="#dom-basepropertyindexedkeyframe-offset"><code><c- g>offset</c-></code></a> = []; (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a> <c- b>or</c-> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a>>) <a data-default="[]" data-type="(DOMString or sequence<DOMString>)" href="#dom-basepropertyindexedkeyframe-easing"><code><c- g>easing</c-></code></a> = []; (<a data-link-type="idl-name" href="#enumdef-compositeoperationorauto"><c- n>CompositeOperationOrAuto</c-></a> <c- b>or</c-> <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="#enumdef-compositeoperationorauto"><c- n>CompositeOperationOrAuto</c-></a>>) <a data-default="[]" data-type="(CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>)" href="#dom-basepropertyindexedkeyframe-composite"><code><c- g>composite</c-></code></a> = []; }; <c- b>dictionary</c-> <a href="#dictdef-basekeyframe"><code><c- g>BaseKeyframe</c-></code></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a>? <a data-default="null" data-type="double?" href="#dom-basekeyframe-offset"><code><c- g>offset</c-></code></a> = <c- b>null</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-DOMString"><c- b>DOMString</c-></a> <a data-default=""linear"" data-type="DOMString" href="#dom-basekeyframe-easing"><code><c- g>easing</c-></code></a> = "linear"; <a data-link-type="idl-name" href="#enumdef-compositeoperationorauto"><c- n>CompositeOperationOrAuto</c-></a> <a data-default=""auto"" data-type="CompositeOperationOrAuto" href="#dom-basekeyframe-composite"><code><c- g>composite</c-></code></a> = "auto"; }; <c- b>dictionary</c-> <a href="#dictdef-keyframeeffectoptions"><code><c- g>KeyframeEffectOptions</c-></code></a> : <a data-link-type="idl-name" href="#dictdef-effecttiming"><c- n>EffectTiming</c-></a> { <a data-link-type="idl-name" href="#enumdef-compositeoperation"><c- n>CompositeOperation</c-></a> <a class="idl-code" data-default=""replace"" data-link-type="dict-member" data-type="CompositeOperation" href="#dom-keyframeeffectoptions-composite"><c- g>composite</c-></a> = "replace"; <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSOMString?" href="#dom-keyframeeffectoptions-pseudoelement"><c- g>pseudoElement</c-></a> = <c- b>null</c->; }; <c- b>enum</c-> <a href="#enumdef-compositeoperation"><code><c- g>CompositeOperation</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate"><c- s>"accumulate"</c-></a> }; <c- b>enum</c-> <a href="#enumdef-compositeoperationorauto"><code><c- g>CompositeOperationOrAuto</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate"><c- s>"accumulate"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperationorauto-auto"><c- s>"auto"</c-></a> }; <c- b>interface</c-> <c- b>mixin</c-> <a href="#animatable"><code><c- g>Animatable</c-></code></a> { <a data-link-type="idl-name" href="#animation"><c- n>Animation</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animatable-animate"><c- g>animate</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-keyframes"><c- g>keyframes</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="#dictdef-keyframeanimationoptions"><c- n>KeyframeAnimationOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-options"><c- g>options</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="#animation"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-animatable-getanimations"><c- g>getAnimations</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-getanimationsoptions"><c- n>GetAnimationsOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animatable-getanimations-options-options"><c- g>options</c-></a> = {}); }; <c- b>dictionary</c-> <a href="#dictdef-keyframeanimationoptions"><code><c- g>KeyframeAnimationOptions</c-></code></a> : <a data-link-type="idl-name" href="#dictdef-keyframeeffectoptions"><c- n>KeyframeEffectOptions</c-></a> { <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="""" data-link-type="dict-member" data-type="DOMString" href="#dom-keyframeanimationoptions-id"><c- g>id</c-></a> = ""; <a data-link-type="idl-name" href="#animationtimeline"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="AnimationTimeline?" href="#dom-keyframeanimationoptions-timeline"><c- g>timeline</c-></a>; }; <c- b>dictionary</c-> <a href="#dictdef-getanimationsoptions"><code><c- g>GetAnimationsOptions</c-></code></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-default="false" data-link-type="dict-member" data-type="boolean" href="#dom-getanimationsoptions-subtree"><c- g>subtree</c-></a> = <c- b>false</c->; <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSOMString?" href="#dom-getanimationsoptions-pseudoelement"><c- g>pseudoElement</c-></a> = <c- b>null</c->; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/#document"><c- g>Document</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#documenttimeline"><c- n>DocumentTimeline</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DocumentTimeline" href="#dom-document-timeline"><c- g>timeline</c-></a>; }; <c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#documentorshadowroot"><c- g>DocumentOrShadowRoot</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="#animation"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-documentorshadowroot-getanimations"><c- g>getAnimations</c-></a>(); }; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#animatable"><c- n>Animatable</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>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 class="idl-code" data-link-type="constructor" href="#dom-animationplaybackevent-animationplaybackevent"><c- g>constructor</c-></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 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-animationplaybackevent-currenttime"><c- g>currentTime</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-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 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="null" data-link-type="dict-member" data-type="double?" href="#dom-animationplaybackeventinit-currenttime"><c- g>currentTime</c-></a> = <c- b>null</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-default="null" data-link-type="dict-member" data-type="double?" 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"> There must be a better term than "origin time"— it’s too similar to "time origin". <a href="https://github.com/w3c/csswg-drafts/issues/2079">[Issue #2079]</a> <a class="issue-return" href="#issue-9fa706cb" title="Jump to section">↵</a></div> <div class="issue"> In the presence of certain easing functions, the input <a data-link-type="dfn" href="#iteration-progress">iteration progress</a> to an animation effect is not limited to the range [0, 1]. Currently, however, keyframe offsets are limited to the range [0, 1] and property values are simply extrapolated for input iteration progress values outside this range. We have considered removing this restriction since some cases exist where it is useful to be able to specify non-linear changes in property values at <a data-link-type="dfn" href="#iteration-progress">iteration progress</a> values outside the range [0, 1]. One example is an animation that interpolates from green to yellow but has an overshoot easing function that makes it temporarily interpolate “beyond” yellow to red before settling back to yellow. While this effect could be achieved by modification of the keyframes and easing function, this approach seems to break the model’s separation of timing concerns from animation effects. It is not clear how this effect should be achieved but we note that allowing keyframe offsets outside [0, 1] can make the currently specified behavior, where keyframes at offset 0 and 1 are synthesized as necessary, inconsistent. See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section 4 (Keyframe offsets outside [0, 1]) of minuted discussion from Tokyo 2013 F2F</a>. <a href="https://github.com/w3c/csswg-drafts/issues/2081"><https://github.com/w3c/csswg-drafts/issues/2081></a> <a class="issue-return" href="#issue-4c8c2050" title="Jump to section">↵</a> </div> <div class="issue"> The definition of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered">being rendered</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> with regards to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display">display: contents</a> is still <a href="https://github.com/whatwg/html/issues/1837">under discussion</a>. For the purpose of this procedure, we assume that an element with display: contents that otherwise would have associated layout boxes (i.e. it is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected">connected</a> and not part of a display: none subtree) is being rendered. <a class="issue-return" href="#issue-8f3b970c" 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 effect from its animation? <a href="https://github.com/w3c/csswg-drafts/issues/2082">[Issue #2082]</a> <a class="issue-return" href="#issue-178c6cfa" title="Jump to section">↵</a></div> <div class="issue"> What should we do if the [[type]] is break, continue, or return? Can it be? <a class="issue-return" href="#issue-47a68024" title="Jump to section">↵</a></div> <div class="issue"> Is this at odds with those <a data-link-type="dfn" href="#time-value">time values</a> being relative to <code>navigationStart</code> and with <code>requestAnimationFrame</code> using the same time as <code>document.timeline.currentTime</code>? <a href="https://github.com/w3c/csswg-drafts/issues/2083">[Issue #2083]</a> <a class="issue-return" href="#issue-a128cfff" title="Jump to section">↵</a></div> </div> <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 = { "0570259e": {"dfnID":"0570259e","dfnText":"float","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-float"},{"id":"ref-for-propdef-float\u2460"}],"title":"6.6.2. Property names and IDL names"}],"url":"https://drafts.csswg.org/css2/#propdef-float"}, "07cd5a09": {"dfnID":"07cd5a09","dfnText":"Document","external":true,"refSections":[{"refs":[{"id":"ref-for-document"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-document\u2460"}],"title":"4.3.1.1. The default document timeline"},{"refs":[{"id":"ref-for-document\u2461"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-document\u2462"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-document\u2463"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-document\u2464"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-document\u2465"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-document\u2466"},{"id":"ref-for-document\u2467"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-document\u2468"},{"id":"ref-for-document\u2460\u24ea"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-document\u2460\u2460"},{"id":"ref-for-document\u2460\u2461"},{"id":"ref-for-document\u2460\u2462"}],"title":"6.9. Extensions to the Document interface"}],"url":"https://html.spec.whatwg.org/#document"}, "0e9f636b": {"dfnID":"0e9f636b","dfnText":"DOMHighResTimeStamp","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domhighrestimestamp"},{"id":"ref-for-dom-domhighrestimestamp\u2460"}],"title":"6.3. The DocumentTimeline interface"}],"url":"https://w3c.github.io/hr-time/#dom-domhighrestimestamp"}, "11e0b87f": {"dfnID":"11e0b87f","dfnText":"unrestricted double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-unrestricted-double"},{"id":"ref-for-idl-unrestricted-double\u2460"},{"id":"ref-for-idl-unrestricted-double\u2461"},{"id":"ref-for-idl-unrestricted-double\u2462"},{"id":"ref-for-idl-unrestricted-double\u2463"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-idl-unrestricted-double\u2464"},{"id":"ref-for-idl-unrestricted-double\u2465"},{"id":"ref-for-idl-unrestricted-double\u2466"},{"id":"ref-for-idl-unrestricted-double\u2467"},{"id":"ref-for-idl-unrestricted-double\u2468"},{"id":"ref-for-idl-unrestricted-double\u2460\u24ea"}],"title":"6.5.5. The ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-idl-unrestricted-double\u2460\u2460"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-idl-unrestricted-double\u2460\u2461"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://webidl.spec.whatwg.org/#idl-unrestricted-double"}, "1243a891": {"dfnID":"1243a891","dfnText":"exist","external":true,"refSections":[{"refs":[{"id":"ref-for-map-exists"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-map-exists\u2460"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-map-exists\u2461"},{"id":"ref-for-map-exists\u2462"},{"id":"ref-for-map-exists\u2463"},{"id":"ref-for-map-exists\u2464"},{"id":"ref-for-map-exists\u2465"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"https://infra.spec.whatwg.org/#map-exists"}, "129bdae8": {"dfnID":"129bdae8","dfnText":"Event","external":true,"refSections":[{"refs":[{"id":"ref-for-event"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"https://dom.spec.whatwg.org/#event"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"},{"id":"ref-for-propdef-visibility\u2460"}],"title":"Animation of visibility"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "1372f92a": {"dfnID":"1372f92a","dfnText":"dispatch","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-event-dispatch"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-concept-event-dispatch\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-concept-event-dispatch\u2461"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-concept-event-dispatch\u2462"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://dom.spec.whatwg.org/#concept-event-dispatch"}, "16310992": {"dfnID":"16310992","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"}],"title":"Animation of font-weight"}],"url":"https://drafts.csswg.org/css-values-4/#number-value"}, "1700ddab": {"dfnID":"1700ddab","dfnText":"Type","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-ecmascript-data-types-and-values"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values"}, "198f1537": {"dfnID":"198f1537","dfnText":"custom property","external":true,"refSections":[{"refs":[{"id":"ref-for-custom-property"},{"id":"ref-for-custom-property\u2460"}],"title":"5.2.1. Custom Properties"}],"url":"https://drafts.csswg.org/css-variables-2/#custom-property"}, "24c4db74": {"dfnID":"24c4db74","dfnText":"border-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top"},{"id":"ref-for-propdef-border-top\u2460"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top"}, "29071a54": {"dfnID":"29071a54","dfnText":"[[DefineOwnProperty]]","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc"}],"title":"6.6. The KeyframeEffect interface"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc"}, "296f3551": {"dfnID":"296f3551","dfnText":"Element","external":true,"refSections":[{"refs":[{"id":"ref-for-element"},{"id":"ref-for-element\u2460"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-element\u2461"}],"title":"5.3.2. Computing property values"},{"refs":[{"id":"ref-for-element\u2462"},{"id":"ref-for-element\u2463"},{"id":"ref-for-element\u2464"},{"id":"ref-for-element\u2465"},{"id":"ref-for-element\u2466"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-element\u2467"},{"id":"ref-for-element\u2468"},{"id":"ref-for-element\u2460\u24ea"}],"title":"6.11. Extensions to the Element interface"}],"url":"https://dom.spec.whatwg.org/#element"}, "2988c385": {"dfnID":"2988c385","dfnText":"::part()","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-part"}],"title":"5.3. Keyframe effects"}],"url":"https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part"}, "2bc0cdf4": {"dfnID":"2bc0cdf4","dfnText":"EventTarget","external":true,"refSections":[{"refs":[{"id":"ref-for-eventtarget"}],"title":"6.4. The Animation interface"}],"url":"https://dom.spec.whatwg.org/#eventtarget"}, "313bb160": {"dfnID":"313bb160","dfnText":"transparent","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-transparent"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://drafts.csswg.org/css-color-4/#valdef-color-transparent"}, "31ccd1a9": {"dfnID":"31ccd1a9","dfnText":"longhand property","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-longhand\u2460"}],"title":"5.3.4. The effect value of a keyframe effect"}],"url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "32060dd5": {"dfnID":"32060dd5","dfnText":"value accumulation","external":true,"refSections":[{"refs":[{"id":"ref-for-accumulation"},{"id":"ref-for-accumulation\u2460"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-accumulation\u2461"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"},{"refs":[{"id":"ref-for-accumulation\u2462"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://drafts.csswg.org/css-values-4/#accumulation"}, "33392039": {"dfnID":"33392039","dfnText":"CSS property to IDL attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-css-property-to-idl-attribute"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-css-property-to-idl-attribute\u2460"}],"title":"6.6.2. Property names and IDL names"}],"url":"https://drafts.csswg.org/cssom/#css-property-to-idl-attribute"}, "34de5360": {"dfnID":"34de5360","dfnText":"will-change","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-will-change"}],"title":"5.6. Side effects of animation"}],"url":"https://drafts.csswg.org/css-will-change-1/#propdef-will-change"}, "3642b848": {"dfnID":"3642b848","dfnText":"value addition","external":true,"refSections":[{"refs":[{"id":"ref-for-addition"},{"id":"ref-for-addition\u2460"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-addition\u2461"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"},{"refs":[{"id":"ref-for-addition\u2462"}],"title":"Animation of font-weight"},{"refs":[{"id":"ref-for-addition\u2463"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://drafts.csswg.org/css-values-4/#addition"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "38e29f7d": {"dfnID":"38e29f7d","dfnText":"events from CSS transitions","external":true,"refSections":[{"refs":[{"id":"ref-for-transition-events"}],"title":"4.5.18. Animation events"}],"url":"https://drafts.csswg.org/css-transitions/#transition-events"}, "38e5beff": {"dfnID":"38e5beff","dfnText":"events from CSS animations","external":true,"refSections":[{"refs":[{"id":"ref-for-events"}],"title":"4.5.18. Animation events"}],"url":"https://drafts.csswg.org/css-animations/#events"}, "39002d6e": {"dfnID":"39002d6e","dfnText":"media element","external":true,"refSections":[{"refs":[{"id":"ref-for-media-element"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-media-element\u2460"}],"title":"8. Interaction with page display"}],"url":"https://html.spec.whatwg.org/multipage/embedded-content.html#media-element"}, "3b1682d5": {"dfnID":"3b1682d5","dfnText":"background-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-origin"}],"title":"5.2. Animating properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin"}, "3b90bdcd": {"dfnID":"3b90bdcd","dfnText":"resolve","external":true,"refSections":[{"refs":[{"id":"ref-for-resolve"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-resolve\u2460"},{"id":"ref-for-resolve\u2461"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-resolve\u2462"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-resolve\u2463"},{"id":"ref-for-resolve\u2464"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-resolve\u2465"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-resolve\u2466"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-resolve\u2467"},{"id":"ref-for-resolve\u2468"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-resolve\u2460\u24ea"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-resolve\u2460\u2460"}],"title":"4.5.17. Play states"}],"url":"https://webidl.spec.whatwg.org/#resolve"}, "3f0b4366": {"dfnID":"3f0b4366","dfnText":"offset","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-offset"},{"id":"ref-for-propdef-offset\u2460"}],"title":"6.6.2. Property names and IDL names"}],"url":"https://drafts.fxtf.org/motion-1/#propdef-offset"}, "3fcc582f": {"dfnID":"3fcc582f","dfnText":"shadow root","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-shadow-root"},{"id":"ref-for-concept-shadow-root\u2460"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-concept-shadow-root\u2461"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"}],"url":"https://dom.spec.whatwg.org/#concept-shadow-root"}, "402ed79d": {"dfnID":"402ed79d","dfnText":"CEReactions","external":true,"refSections":[{"refs":[{"id":"ref-for-cereactions"}],"title":"6.4. The Animation interface"}],"url":"https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions"}, "43fa9cb5": {"dfnID":"43fa9cb5","dfnText":"owning element (animation)","external":true,"refSections":[{"refs":[{"id":"ref-for-owning-element"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://drafts.csswg.org/css-animations-2/#owning-element"}, "44a7708c": {"dfnID":"44a7708c","dfnText":"EventInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-eventinit"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "45999d1c": {"dfnID":"45999d1c","dfnText":"NoModificationAllowedError","external":true,"refSections":[{"refs":[{"id":"ref-for-nomodificationallowederror"}],"title":"6.4. The Animation interface"}],"url":"https://webidl.spec.whatwg.org/#nomodificationallowederror"}, "477f75a5": {"dfnID":"477f75a5","dfnText":"after-change style","external":true,"refSections":[{"refs":[{"id":"ref-for-after-change-style"}],"title":"6.13. Model liveness"}],"url":"https://drafts.csswg.org/css-transitions-1/#after-change-style"}, "487da3cf": {"dfnID":"487da3cf","dfnText":"SVG MIME type","external":true,"refSections":[{"refs":[{"id":"ref-for-mime-registration"}],"title":"7. Integration with Media Fragments"}],"url":"https://svgwg.org/svg2-draft/mimereg.html#mime-registration"}, "48d5260c": {"dfnID":"48d5260c","dfnText":"DOMString to es","external":true,"refSections":[{"refs":[{"id":"ref-for-DOMString-to-es"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://webidl.spec.whatwg.org/#DOMString-to-es"}, "4a16f115": {"dfnID":"4a16f115","dfnText":"border-top-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "500f2c1d": {"dfnID":"500f2c1d","dfnText":"border-top-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-color"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color"}, "509dbb50": {"dfnID":"509dbb50","dfnText":"being rendered","external":true,"refSections":[{"refs":[{"id":"ref-for-being-rendered"},{"id":"ref-for-being-rendered\u2460"}],"title":"6.4. The Animation interface"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#being-rendered"}, "5216e1a0": {"dfnID":"5216e1a0","dfnText":"node document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-node-document"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://dom.spec.whatwg.org/#concept-node-document"}, "53079ce3": {"dfnID":"53079ce3","dfnText":"queue a microtask","external":true,"refSections":[{"refs":[{"id":"ref-for-queue-a-microtask"}],"title":"4.5.12. Updating the finished state"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask"}, "5372cca8": {"dfnID":"5372cca8","dfnText":"boolean","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-boolean"},{"id":"ref-for-idl-boolean\u2460"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-idl-boolean\u2461"},{"id":"ref-for-idl-boolean\u2462"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://webidl.spec.whatwg.org/#idl-boolean"}, "57cd22d5": {"dfnID":"57cd22d5","dfnText":"CSSAnimation","external":true,"refSections":[{"refs":[{"id":"ref-for-cssanimation"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://drafts.csswg.org/css-animations-2/#cssanimation"}, "5991ccfb": {"dfnID":"5991ccfb","dfnText":"relevant Realm","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-relevant-realm"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2460"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2461"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2462"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2463"},{"id":"ref-for-concept-relevant-realm\u2464"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2465"},{"id":"ref-for-concept-relevant-realm\u2466"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5d0d5068": {"dfnID":"5d0d5068","dfnText":"set a CSS declaration","external":true,"refSections":[{"refs":[{"id":"ref-for-set-a-css-declaration"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/cssom-1/#set-a-css-declaration"}, "5d7209e9": {"dfnID":"5d7209e9","dfnText":"Window","external":true,"refSections":[{"refs":[{"id":"ref-for-window"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-window\u2460"},{"id":"ref-for-window\u2461"}],"title":"6.4. The Animation interface"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"}, "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"},{"id":"ref-for-idl-undefined\u2463"},{"id":"ref-for-idl-undefined\u2464"},{"id":"ref-for-idl-undefined\u2465"},{"id":"ref-for-idl-undefined\u2466"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-idl-undefined\u2467"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-idl-undefined\u2468"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://webidl.spec.whatwg.org/#idl-undefined"}, "5fced98b": {"dfnID":"5fced98b","dfnText":"CSSOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-cssomstring"},{"id":"ref-for-cssomstring\u2460"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-cssomstring\u2461"},{"id":"ref-for-cssomstring\u2462"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-cssomstring\u2463"},{"id":"ref-for-cssomstring\u2464"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "6295808f": {"dfnID":"6295808f","dfnText":"equivalent physical property","external":true,"refSections":[{"refs":[{"id":"ref-for-logical-to-physical"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical"}, "63a2817a": {"dfnID":"63a2817a","dfnText":"es to dictionary","external":true,"refSections":[{"refs":[{"id":"ref-for-es-to-dictionary"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://webidl.spec.whatwg.org/#es-to-dictionary"}, "6420cb11": {"dfnID":"6420cb11","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-visibility-visible"},{"id":"ref-for-valdef-visibility-visible\u2460"},{"id":"ref-for-valdef-visibility-visible\u2461"}],"title":"Animation of visibility"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-visible"}, "64629ded": {"dfnID":"64629ded","dfnText":"easing function","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function"},{"id":"ref-for-easing-function\u2460"},{"id":"ref-for-easing-function\u2461"}],"title":"4.6.11. Easing (effect timing transformations)"},{"refs":[{"id":"ref-for-easing-function\u2462"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-easing-function\u2463"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-easing-function\u2464"},{"id":"ref-for-easing-function\u2465"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-easing-function\u2466"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-easing-function\u2467"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-easing-function\u2468"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-easing-function\u2460\u24ea"},{"id":"ref-for-easing-function\u2460\u2460"},{"id":"ref-for-easing-function\u2460\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-easing-function\u2460\u2462"},{"id":"ref-for-easing-function\u2460\u2463"},{"id":"ref-for-easing-function\u2460\u2464"},{"id":"ref-for-easing-function\u2460\u2465"},{"id":"ref-for-easing-function\u2460\u2466"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://drafts.csswg.org/css-easing-2/#easing-function"}, "649608b9": {"dfnID":"649608b9","dfnText":"list","external":true,"refSections":[{"refs":[{"id":"ref-for-list"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://infra.spec.whatwg.org/#list"}, "64f037e9": {"dfnID":"64f037e9","dfnText":"IteratorStep","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-iteratorstep"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep"}, "667787b5": {"dfnID":"667787b5","dfnText":"convert ecmascript to idl value","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-convert-ecmascript-to-idl-value"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value"}, "6916104d": {"dfnID":"6916104d","dfnText":"box-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-shadow"},{"id":"ref-for-propdef-box-shadow\u2460"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"}, "69165ede": {"dfnID":"69165ede","dfnText":"Transition Origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-transition"}],"title":"5.4.5. Applying the composited result"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-transition"}, "692595fe": {"dfnID":"692595fe","dfnText":"ordered set","external":true,"refSections":[{"refs":[{"id":"ref-for-ordered-set"},{"id":"ref-for-ordered-set\u2460"}],"title":"6.4. The Animation interface"}],"url":"https://infra.spec.whatwg.org/#ordered-set"}, "6dd1a164": {"dfnID":"6dd1a164","dfnText":"not additive","external":true,"refSections":[{"refs":[{"id":"ref-for-not-additive"}],"title":"5.2. Animating properties"}],"url":"https://drafts.csswg.org/css-values-4/#not-additive"}, "73759fff": {"dfnID":"73759fff","dfnText":"border-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "73d26fd4": {"dfnID":"73d26fd4","dfnText":"serialize a CSS value","external":true,"refSections":[{"refs":[{"id":"ref-for-serialize-a-css-value"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://drafts.csswg.org/cssom/#serialize-a-css-value"}, "75fb6e95": {"dfnID":"75fb6e95","dfnText":"session history entry","external":true,"refSections":[{"refs":[{"id":"ref-for-session-history-entry"}],"title":"8. Interaction with page display"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry"}, "797018a7": {"dfnID":"797018a7","dfnText":"InvalidStateError","external":true,"refSections":[{"refs":[{"id":"ref-for-invalidstateerror"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-invalidstateerror\u2460"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-invalidstateerror\u2461"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-invalidstateerror\u2462"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-invalidstateerror\u2463"},{"id":"ref-for-invalidstateerror\u2464"}],"title":"6.4. The Animation interface"}],"url":"https://webidl.spec.whatwg.org/#invalidstateerror"}, "799fd407": {"dfnID":"799fd407","dfnText":"invalid selector","external":true,"refSections":[{"refs":[{"id":"ref-for-invalid-selector"},{"id":"ref-for-invalid-selector\u2460"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://drafts.csswg.org/selectors-4/#invalid-selector"}, "7c3eaab1": {"dfnID":"7c3eaab1","dfnText":"input progress value","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function-input-progress-value"}],"title":"4.7.7. Calculating the transformed progress"}],"url":"https://drafts.csswg.org/css-easing-2/#easing-function-input-progress-value"}, "7c44ff01": {"dfnID":"7c44ff01","dfnText":"event loop processing model","external":true,"refSections":[{"refs":[{"id":"ref-for-event-loop-processing-model"}],"title":"6.13. Model liveness"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model"}, "7c65f8b4": {"dfnID":"7c65f8b4","dfnText":"IteratorValue","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-iteratorvalue"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue"}, "7fed7499": {"dfnID":"7fed7499","dfnText":"iteration composite operation accumulate","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-composite-operation-accumulate"}],"title":"4.6.9.2. Controlling iteration"}],"url":"https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate"}, "8000726e": {"dfnID":"8000726e","dfnText":"border-left-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "8095a819": {"dfnID":"8095a819","dfnText":"<easing-function>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-easing-function"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-typedef-easing-function\u2460"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"https://drafts.csswg.org/css-easing-2/#typedef-easing-function"}, "82805a4e": {"dfnID":"82805a4e","dfnText":"originating element","external":true,"refSections":[{"refs":[{"id":"ref-for-originating-element"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-originating-element\u2460"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://drafts.csswg.org/selectors-4/#originating-element"}, "82ca3efc": {"dfnID":"82ca3efc","dfnText":"TypeError","external":true,"refSections":[{"refs":[{"id":"ref-for-exceptiondef-typeerror"},{"id":"ref-for-exceptiondef-typeerror\u2460"},{"id":"ref-for-exceptiondef-typeerror\u2461"},{"id":"ref-for-exceptiondef-typeerror\u2462"},{"id":"ref-for-exceptiondef-typeerror\u2463"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-exceptiondef-typeerror\u2464"},{"id":"ref-for-exceptiondef-typeerror\u2465"},{"id":"ref-for-exceptiondef-typeerror\u2466"},{"id":"ref-for-exceptiondef-typeerror\u2467"},{"id":"ref-for-exceptiondef-typeerror\u2468"},{"id":"ref-for-exceptiondef-typeerror\u2460\u24ea"},{"id":"ref-for-exceptiondef-typeerror\u2460\u2460"},{"id":"ref-for-exceptiondef-typeerror\u2460\u2461"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://webidl.spec.whatwg.org/#exceptiondef-typeerror"}, "8603b31a": {"dfnID":"8603b31a","dfnText":"perform a microtask checkpoint","external":true,"refSections":[{"refs":[{"id":"ref-for-perform-a-microtask-checkpoint"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-perform-a-microtask-checkpoint\u2460"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-perform-a-microtask-checkpoint\u2461"}],"title":"4.5.9. Pausing an animation"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint"}, "8855a9aa": {"dfnID":"8855a9aa","dfnText":"DOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-DOMString"},{"id":"ref-for-idl-DOMString\u2460"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-idl-DOMString\u2461"},{"id":"ref-for-idl-DOMString\u2462"},{"id":"ref-for-idl-DOMString\u2463"},{"id":"ref-for-idl-DOMString\u2464"},{"id":"ref-for-idl-DOMString\u2465"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-idl-DOMString\u2466"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-idl-DOMString\u2467"},{"id":"ref-for-idl-DOMString\u2468"},{"id":"ref-for-idl-DOMString\u2460\u24ea"},{"id":"ref-for-idl-DOMString\u2460\u2460"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-idl-DOMString\u2460\u2461"},{"id":"ref-for-idl-DOMString\u2460\u2462"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-idl-DOMString\u2460\u2463"}],"title":"6.12. 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":"6.2. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-Exposed\u2460"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-Exposed\u2461"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-Exposed\u2462"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-Exposed\u2463"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-Exposed\u2464"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "8c800cdf": {"dfnID":"8c800cdf","dfnText":"double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-double"},{"id":"ref-for-idl-double\u2460"}],"title":"6.2. The AnimationTimeline 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":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-idl-double\u2468"},{"id":"ref-for-idl-double\u2460\u24ea"},{"id":"ref-for-idl-double\u2460\u2460"},{"id":"ref-for-idl-double\u2460\u2461"},{"id":"ref-for-idl-double\u2460\u2462"},{"id":"ref-for-idl-double\u2460\u2463"},{"id":"ref-for-idl-double\u2460\u2464"},{"id":"ref-for-idl-double\u2460\u2465"},{"id":"ref-for-idl-double\u2460\u2466"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-idl-double\u2460\u2467"},{"id":"ref-for-idl-double\u2460\u2468"},{"id":"ref-for-idl-double\u2461\u24ea"},{"id":"ref-for-idl-double\u2461\u2460"}],"title":"6.5.5. The ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-idl-double\u2461\u2461"},{"id":"ref-for-idl-double\u2461\u2462"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-idl-double\u2461\u2463"},{"id":"ref-for-idl-double\u2461\u2464"},{"id":"ref-for-idl-double\u2461\u2465"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-idl-double\u2461\u2466"},{"id":"ref-for-idl-double\u2461\u2467"},{"id":"ref-for-idl-double\u2461\u2468"},{"id":"ref-for-idl-double\u2462\u24ea"},{"id":"ref-for-idl-double\u2462\u2460"},{"id":"ref-for-idl-double\u2462\u2461"},{"id":"ref-for-idl-double\u2462\u2462"},{"id":"ref-for-idl-double\u2462\u2463"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"https://webidl.spec.whatwg.org/#idl-double"}, "8ca0c013": {"dfnID":"8ca0c013","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "9256379a": {"dfnID":"9256379a","dfnText":"completion record specification type","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-completion-record-specification-type"},{"id":"ref-for-sec-completion-record-specification-type\u2460"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type"}, "960970ee": {"dfnID":"960970ee","dfnText":"iteration composite operation","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-composite-operation"}],"title":"4.6.9.2. Controlling iteration"},{"refs":[{"id":"ref-for-iteration-composite-operation\u2460"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"https://drafts.csswg.org/web-animations-2/#iteration-composite-operation"}, "9638f92b": {"dfnID":"9638f92b","dfnText":"connected","external":true,"refSections":[{"refs":[{"id":"ref-for-connected"}],"title":"6.4. The Animation interface"}],"url":"https://dom.spec.whatwg.org/#connected"}, "97189927": {"dfnID":"97189927","dfnText":"run the animation frame callbacks","external":true,"refSections":[{"refs":[{"id":"ref-for-run-the-animation-frame-callbacks"}],"title":"6.13. Model liveness"}],"url":"https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks"}, "9790a62f": {"dfnID":"9790a62f","dfnText":"[[Get]]","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver"}, "983c572a": {"dfnID":"983c572a","dfnText":"universal syntax definition","external":true,"refSections":[{"refs":[{"id":"ref-for-universal-syntax-definition"}],"title":"5.2.1. Custom Properties"}],"url":"https://drafts.css-houdini.org/css-properties-values-api-1/#universal-syntax-definition"}, "989f9ee6": {"dfnID":"989f9ee6","dfnText":"border-right-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-width"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "98f3298d": {"dfnID":"98f3298d","dfnText":"[EnforceRange]","external":true,"refSections":[{"refs":[{"id":"ref-for-EnforceRange"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"https://webidl.spec.whatwg.org/#EnforceRange"}, "9a5099a7": {"dfnID":"9a5099a7","dfnText":"owning element (transition)","external":true,"refSections":[{"refs":[{"id":"ref-for-owning-element\u2460"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://drafts.csswg.org/css-transitions-2/#owning-element"}, "9a517a7d": {"dfnID":"9a517a7d","dfnText":"queue a task","external":true,"refSections":[{"refs":[{"id":"ref-for-queue-a-task"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-queue-a-task\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-queue-a-task\u2461"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task"}, "9ac2aadf": {"dfnID":"9ac2aadf","dfnText":"DocumentOrShadowRoot","external":true,"refSections":[{"refs":[{"id":"ref-for-documentorshadowroot"},{"id":"ref-for-documentorshadowroot\u2460"},{"id":"ref-for-documentorshadowroot\u2461"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"}],"url":"https://dom.spec.whatwg.org/#documentorshadowroot"}, "9bfc28f6": {"dfnID":"9bfc28f6","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-pseudo-element\u2460"},{"id":"ref-for-pseudo-element\u2461"},{"id":"ref-for-pseudo-element\u2462"},{"id":"ref-for-pseudo-element\u2463"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-pseudo-element\u2464"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-pseudo-element\u2465"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-pseudo-element\u2466"},{"id":"ref-for-pseudo-element\u2467"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "9cce47fd": {"dfnID":"9cce47fd","dfnText":"sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-sequence"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-idl-sequence\u2460"},{"id":"ref-for-idl-sequence\u2461"},{"id":"ref-for-idl-sequence\u2462"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-idl-sequence\u2463"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-idl-sequence\u2464"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"}],"url":"https://webidl.spec.whatwg.org/#idl-sequence"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"5.2.1. Custom Properties"},{"refs":[{"id":"ref-for-computed-value\u2461"},{"id":"ref-for-computed-value\u2462"},{"id":"ref-for-computed-value\u2463"},{"id":"ref-for-computed-value\u2464"}],"title":"5.3.2. Computing property values"},{"refs":[{"id":"ref-for-computed-value\u2465"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-computed-value\u2466"}],"title":"5.4.5. Applying the composited result"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9d09d04c": {"dfnID":"9d09d04c","dfnText":"type","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-event-type"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-dom-event-type\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-dom-event-type\u2461"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://dom.spec.whatwg.org/#dom-event-type"}, "9eea711c": {"dfnID":"9eea711c","dfnText":"has an attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-element-attribute-has"}],"title":"6.4. The Animation interface"}],"url":"https://dom.spec.whatwg.org/#concept-element-attribute-has"}, "a0331ebc": {"dfnID":"a0331ebc","dfnText":"linear easing function","external":true,"refSections":[{"refs":[{"id":"ref-for-linear-easing-function"}],"title":"4.6.11. Easing (effect timing transformations)"}],"url":"https://drafts.csswg.org/css-easing-2/#linear-easing-function"}, "a06e5a78": {"dfnID":"a06e5a78","dfnText":"CSS declaration block","external":true,"refSections":[{"refs":[{"id":"ref-for-css-declaration-block"},{"id":"ref-for-css-declaration-block\u2460"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/cssom-1/#css-declaration-block"}, "a194a9ee": {"dfnID":"a194a9ee","dfnText":"Animation Origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-animation"}],"title":"5.4.5. Applying the composited result"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation"}, "a1ac87bf": {"dfnID":"a1ac87bf","dfnText":"constructing events","external":true,"refSections":[{"refs":[{"id":"ref-for-constructing-events"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"https://dom.spec.whatwg.org/#constructing-events"}, "a2768cf5": {"dfnID":"a2768cf5","dfnText":"active document","external":true,"refSections":[{"refs":[{"id":"ref-for-active-document"}],"title":"4.3.1. Document timelines"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#active-document"}, "a4fb436f": {"dfnID":"a4fb436f","dfnText":"resolve a promise","external":true,"refSections":[{"refs":[{"id":"ref-for-resolve"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-resolve\u2460"},{"id":"ref-for-resolve\u2461"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-resolve\u2462"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-resolve\u2463"},{"id":"ref-for-resolve\u2464"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-resolve\u2465"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-resolve\u2466"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-resolve\u2467"},{"id":"ref-for-resolve\u2468"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-resolve\u2460\u24ea"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-resolve\u2460\u2460"}],"title":"4.5.17. Play states"}],"url":"https://webidl.spec.whatwg.org/#resolve"}, "a50c2771": {"dfnID":"a50c2771","dfnText":"stacking context","external":true,"refSections":[{"refs":[{"id":"ref-for-x43"}],"title":"5.6. Side effects of animation"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#x43"}, "a7fe0181": {"dfnID":"a7fe0181","dfnText":"style attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-style-attribute"},{"id":"ref-for-style-attribute\u2460"},{"id":"ref-for-style-attribute\u2461"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/css-style-attr/#style-attribute"}, "a8fe91d7": {"dfnID":"a8fe91d7","dfnText":"font-weight","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-weight"},{"id":"ref-for-propdef-font-weight\u2460"},{"id":"ref-for-propdef-font-weight\u2461"},{"id":"ref-for-propdef-font-weight\u2462"},{"id":"ref-for-propdef-font-weight\u2463"}],"title":"Animation of font-weight"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-weight"}, "a973e0fe": {"dfnID":"a973e0fe","dfnText":"document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document"},{"id":"ref-for-concept-document\u2460"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-concept-document\u2461"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"}],"url":"https://dom.spec.whatwg.org/#concept-document"}, "active-after-boundary-time": {"dfnID":"active-after-boundary-time","dfnText":"active-after boundary time","external":false,"refSections":[{"refs":[{"id":"ref-for-active-after-boundary-time"},{"id":"ref-for-active-after-boundary-time\u2460"}],"title":"4.6.6. Animation effect phases and states"}],"url":"#active-after-boundary-time"}, "active-duration": {"dfnID":"active-duration","dfnText":"active duration","external":false,"refSections":[{"refs":[{"id":"ref-for-active-duration"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-active-duration\u2460"},{"id":"ref-for-active-duration\u2461"}],"title":"4.6.5. The active interval"},{"refs":[{"id":"ref-for-active-duration\u2462"},{"id":"ref-for-active-duration\u2463"}],"title":"4.6.5.2. The active duration"},{"refs":[{"id":"ref-for-active-duration\u2464"}],"title":"4.6.5.3. The end delay and animation effect end time"},{"refs":[{"id":"ref-for-active-duration\u2465"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-active-duration\u2466"},{"id":"ref-for-active-duration\u2467"},{"id":"ref-for-active-duration\u2468"},{"id":"ref-for-active-duration\u2460\u24ea"}],"title":"4.6.9.1. Iteration intervals"},{"refs":[{"id":"ref-for-active-duration\u2460\u2460"}],"title":"4.6.9.2. Controlling iteration"},{"refs":[{"id":"ref-for-active-duration\u2460\u2461"},{"id":"ref-for-active-duration\u2460\u2462"},{"id":"ref-for-active-duration\u2460\u2463"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-active-duration\u2460\u2464"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-active-duration\u2460\u2465"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-active-duration\u2460\u2466"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#active-duration"}, "active-interval": {"dfnID":"active-interval","dfnText":"active interval","external":false,"refSections":[{"refs":[{"id":"ref-for-active-interval"},{"id":"ref-for-active-interval\u2460"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-active-interval\u2461"},{"id":"ref-for-active-interval\u2462"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-active-interval\u2463"},{"id":"ref-for-active-interval\u2464"},{"id":"ref-for-active-interval\u2465"},{"id":"ref-for-active-interval\u2466"},{"id":"ref-for-active-interval\u2467"}],"title":"4.6.5. The active interval"},{"refs":[{"id":"ref-for-active-interval\u2468"}],"title":"4.6.5.1. The start delay"},{"refs":[{"id":"ref-for-active-interval\u2460\u24ea"},{"id":"ref-for-active-interval\u2460\u2460"}],"title":"4.6.5.2. The active duration"},{"refs":[{"id":"ref-for-active-interval\u2460\u2461"},{"id":"ref-for-active-interval\u2460\u2462"},{"id":"ref-for-active-interval\u2460\u2463"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-active-interval\u2460\u2464"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-active-interval\u2460\u2465"},{"id":"ref-for-active-interval\u2460\u2466"}],"title":"4.6.9.1. Iteration intervals"},{"refs":[{"id":"ref-for-active-interval\u2460\u2467"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-active-interval\u2460\u2468"},{"id":"ref-for-active-interval\u2461\u24ea"},{"id":"ref-for-active-interval\u2461\u2460"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-active-interval\u2461\u2461"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#active-interval"}, "active-replace-state": {"dfnID":"active-replace-state","dfnText":"active","external":false,"refSections":[{"refs":[{"id":"ref-for-active-replace-state"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-active-replace-state\u2460"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-active-replace-state\u2461"}],"title":"6.4.2. The AnimationReplaceState enumeration"}],"url":"#active-replace-state"}, "active-time": {"dfnID":"active-time","dfnText":"active time","external":false,"refSections":[{"refs":[{"id":"ref-for-active-time"},{"id":"ref-for-active-time\u2460"},{"id":"ref-for-active-time\u2461"},{"id":"ref-for-active-time\u2462"},{"id":"ref-for-active-time\u2463"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-active-time\u2464"},{"id":"ref-for-active-time\u2465"},{"id":"ref-for-active-time\u2466"},{"id":"ref-for-active-time\u2467"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-active-time\u2468"},{"id":"ref-for-active-time\u2460\u24ea"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-active-time\u2460\u2460"},{"id":"ref-for-active-time\u2460\u2461"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-active-time\u2460\u2462"},{"id":"ref-for-active-time\u2460\u2463"}],"title":"4.7.3. Calculating the overall progress"},{"refs":[{"id":"ref-for-active-time\u2460\u2464"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-active-time\u2460\u2465"}],"title":"4.7.5. Calculating the current iteration index"}],"url":"#active-time"}, "active-time-space": {"dfnID":"active-time-space","dfnText":"active time space","external":false,"refSections":[{"refs":[{"id":"ref-for-active-time-space"}],"title":"4.6.4. Time spaces"}],"url":"#active-time-space"}, "active-timeline": {"dfnID":"active-timeline","dfnText":"active","external":false,"refSections":[{"refs":[{"id":"ref-for-active-timeline"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-active-timeline\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-active-timeline\u2461"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-active-timeline\u2462"},{"id":"ref-for-active-timeline\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-active-timeline\u2464"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-active-timeline\u2465"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#active-timeline"}, "ad337600": {"dfnID":"ad337600","dfnText":"<pseudo-element-selector>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-pseudo-element-selector"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://drafts.csswg.org/selectors-4/#typedef-pseudo-element-selector"}, "animatable": {"dfnID":"animatable","dfnText":"Animatable","external":false,"refSections":[{"refs":[{"id":"ref-for-animatable"},{"id":"ref-for-animatable\u2460"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-animatable\u2461"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-animatable\u2462"}],"title":"6.11. Extensions to the Element interface"}],"url":"#animatable"}, "animation": {"dfnID":"animation","dfnText":"Animation","external":false,"refSections":[{"refs":[{"id":"ref-for-animation"},{"id":"ref-for-animation\u2460"},{"id":"ref-for-animation\u2461"},{"id":"ref-for-animation\u2462"},{"id":"ref-for-animation\u2463"},{"id":"ref-for-animation\u2464"},{"id":"ref-for-animation\u2465"},{"id":"ref-for-animation\u2466"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animation\u2467"}],"title":"6.6.1. Creating a new KeyframeEffect object"},{"refs":[{"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"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-animation\u2460\u2463"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"},{"refs":[{"id":"ref-for-animation\u2460\u2464"},{"id":"ref-for-animation\u2460\u2465"}],"title":"6.13. Model liveness"}],"url":"#animation"}, "animation-associated-effect": {"dfnID":"animation-associated-effect","dfnText":"associated effect","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-associated-effect"}],"title":"4.1.1. Stateless"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460"},{"id":"ref-for-animation-associated-effect\u2461"},{"id":"ref-for-animation-associated-effect\u2462"},{"id":"ref-for-animation-associated-effect\u2463"},{"id":"ref-for-animation-associated-effect\u2464"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-animation-associated-effect\u2465"},{"id":"ref-for-animation-associated-effect\u2466"},{"id":"ref-for-animation-associated-effect\u2467"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2468"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460\u24ea"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460\u2460"},{"id":"ref-for-animation-associated-effect\u2460\u2461"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460\u2462"},{"id":"ref-for-animation-associated-effect\u2460\u2463"},{"id":"ref-for-animation-associated-effect\u2460\u2464"},{"id":"ref-for-animation-associated-effect\u2460\u2465"},{"id":"ref-for-animation-associated-effect\u2460\u2466"},{"id":"ref-for-animation-associated-effect\u2460\u2467"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-animation-associated-effect\u2460\u2468"},{"id":"ref-for-animation-associated-effect\u2461\u24ea"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-associated-effect\u2461\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animation-associated-effect\u2461\u2461"}],"title":"4.5.18.2. Animation playback events"},{"refs":[{"id":"ref-for-animation-associated-effect\u2461\u2462"}],"title":"4.6.2. Associated animation and timeline"},{"refs":[{"id":"ref-for-animation-associated-effect\u2461\u2463"},{"id":"ref-for-animation-associated-effect\u2461\u2464"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-animation-associated-effect\u2461\u2465"}],"title":"4.6.9.3. Interval timing"},{"refs":[{"id":"ref-for-animation-associated-effect\u2461\u2466"},{"id":"ref-for-animation-associated-effect\u2461\u2467"},{"id":"ref-for-animation-associated-effect\u2461\u2468"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animation-associated-effect\u2462\u24ea"},{"id":"ref-for-animation-associated-effect\u2462\u2460"},{"id":"ref-for-animation-associated-effect\u2462\u2461"},{"id":"ref-for-animation-associated-effect\u2462\u2462"}],"title":"6.4. The Animation interface"}],"url":"#animation-associated-effect"}, "animation-class": {"dfnID":"animation-class","dfnText":"animation class","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-class"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-animation-class\u2460"}],"title":"5.4.1. Animation classes"},{"refs":[{"id":"ref-for-animation-class\u2461"},{"id":"ref-for-animation-class\u2462"}],"title":"5.4.2. The effect stack"},{"refs":[{"id":"ref-for-animation-class\u2463"},{"id":"ref-for-animation-class\u2464"}],"title":"5.4.5. Applying the composited result"}],"url":"#animation-class"}, "animation-composite-order": {"dfnID":"animation-composite-order","dfnText":"composite order","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-composite-order"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-animation-composite-order\u2460"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animation-composite-order\u2461"}],"title":"6.4. The Animation interface"}],"url":"#animation-composite-order"}, "animation-current-time": {"dfnID":"animation-current-time","dfnText":"current time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-current-time"},{"id":"ref-for-animation-current-time\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-animation-current-time\u2461"},{"id":"ref-for-animation-current-time\u2462"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-animation-current-time\u2463"},{"id":"ref-for-animation-current-time\u2464"},{"id":"ref-for-animation-current-time\u2465"},{"id":"ref-for-animation-current-time\u2466"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2467"}],"title":"4.5.2. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2468"},{"id":"ref-for-animation-current-time\u2460\u24ea"},{"id":"ref-for-animation-current-time\u2460\u2460"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2460\u2461"},{"id":"ref-for-animation-current-time\u2460\u2462"},{"id":"ref-for-animation-current-time\u2460\u2463"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"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":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2460\u2467"},{"id":"ref-for-animation-current-time\u2460\u2468"},{"id":"ref-for-animation-current-time\u2461\u24ea"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2461\u2460"},{"id":"ref-for-animation-current-time\u2461\u2461"},{"id":"ref-for-animation-current-time\u2461\u2462"},{"id":"ref-for-animation-current-time\u2461\u2463"},{"id":"ref-for-animation-current-time\u2461\u2464"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-animation-current-time\u2461\u2465"},{"id":"ref-for-animation-current-time\u2461\u2466"},{"id":"ref-for-animation-current-time\u2461\u2467"},{"id":"ref-for-animation-current-time\u2461\u2468"},{"id":"ref-for-animation-current-time\u2462\u24ea"},{"id":"ref-for-animation-current-time\u2462\u2460"},{"id":"ref-for-animation-current-time\u2462\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-current-time\u2462\u2462"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2462\u2463"},{"id":"ref-for-animation-current-time\u2462\u2464"},{"id":"ref-for-animation-current-time\u2462\u2465"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-animation-current-time\u2462\u2466"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2462\u2467"},{"id":"ref-for-animation-current-time\u2462\u2468"},{"id":"ref-for-animation-current-time\u2463\u24ea"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-animation-current-time\u2463\u2460"},{"id":"ref-for-animation-current-time\u2463\u2461"},{"id":"ref-for-animation-current-time\u2463\u2462"},{"id":"ref-for-animation-current-time\u2463\u2463"},{"id":"ref-for-animation-current-time\u2463\u2464"},{"id":"ref-for-animation-current-time\u2463\u2465"},{"id":"ref-for-animation-current-time\u2463\u2466"},{"id":"ref-for-animation-current-time\u2463\u2467"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-animation-current-time\u2463\u2468"},{"id":"ref-for-animation-current-time\u2464\u24ea"}],"title":"4.6.3. Local time"},{"refs":[{"id":"ref-for-animation-current-time\u2464\u2460"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-animation-current-time\u2464\u2461"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animation-current-time\u2464\u2462"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animation-current-time\u2464\u2463"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#animation-current-time"}, "animation-direction": {"dfnID":"animation-direction","dfnText":"animation direction","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-direction"},{"id":"ref-for-animation-direction\u2460"},{"id":"ref-for-animation-direction\u2461"}],"title":"4.6.6. Animation effect phases and states"}],"url":"#animation-direction"}, "animation-document-for-timing": {"dfnID":"animation-document-for-timing","dfnText":"document for timing","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-document-for-timing"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-animation-document-for-timing\u2460"},{"id":"ref-for-animation-document-for-timing\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-document-for-timing\u2462"},{"id":"ref-for-animation-document-for-timing\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animation-document-for-timing\u2464"},{"id":"ref-for-animation-document-for-timing\u2465"}],"title":"5.5.2. Removing replaced animations"}],"url":"#animation-document-for-timing"}, "animation-effect": {"dfnID":"animation-effect","dfnText":"animation effect","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-animation-effect\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-animation-effect\u2461"},{"id":"ref-for-animation-effect\u2462"},{"id":"ref-for-animation-effect\u2463"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-animation-effect\u2464"},{"id":"ref-for-animation-effect\u2465"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-animation-effect\u2466"},{"id":"ref-for-animation-effect\u2467"}],"title":"4.6.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"}],"title":"4.6.2. Associated animation and timeline"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2461"},{"id":"ref-for-animation-effect\u2460\u2462"},{"id":"ref-for-animation-effect\u2460\u2463"}],"title":"4.6.3. Local time"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2464"},{"id":"ref-for-animation-effect\u2460\u2465"},{"id":"ref-for-animation-effect\u2460\u2466"},{"id":"ref-for-animation-effect\u2460\u2467"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2468"},{"id":"ref-for-animation-effect\u2461\u24ea"}],"title":"4.6.5. The active interval"},{"refs":[{"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"}],"title":"4.6.5.3. The end delay and animation effect end time"},{"refs":[{"id":"ref-for-animation-effect\u2461\u2464"},{"id":"ref-for-animation-effect\u2461\u2465"},{"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"},{"id":"ref-for-animation-effect\u2463\u2462"},{"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"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-effect\u2463\u2468"},{"id":"ref-for-animation-effect\u2464\u24ea"},{"id":"ref-for-animation-effect\u2464\u2460"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-animation-effect\u2464\u2461"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"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"},{"id":"ref-for-animation-effect\u2464\u2467"}],"title":"4.6.9.2. Controlling iteration"},{"refs":[{"id":"ref-for-animation-effect\u2464\u2468"},{"id":"ref-for-animation-effect\u2465\u24ea"}],"title":"4.6.10. Direction control"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2460"},{"id":"ref-for-animation-effect\u2465\u2461"}],"title":"4.6.11. Easing (effect timing transformations)"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2462"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2463"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2464"}],"title":"4.7.8. Yielding the iteration progress"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2465"}],"title":"5. Animation model"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2466"},{"id":"ref-for-animation-effect\u2465\u2467"}],"title":"5.1. Introduction"},{"refs":[{"id":"ref-for-animation-effect\u2465\u2468"},{"id":"ref-for-animation-effect\u2466\u24ea"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2460"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2461"},{"id":"ref-for-animation-effect\u2466\u2462"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2463"}],"title":"5.4.2. The effect stack"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2464"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2465"},{"id":"ref-for-animation-effect\u2466\u2466"},{"id":"ref-for-animation-effect\u2466\u2467"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animation-effect\u2466\u2468"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-animation-effect\u2467\u24ea"},{"id":"ref-for-animation-effect\u2467\u2460"},{"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"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animation-effect\u2467\u2465"},{"id":"ref-for-animation-effect\u2467\u2466"},{"id":"ref-for-animation-effect\u2467\u2467"},{"id":"ref-for-animation-effect\u2467\u2468"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-animation-effect\u2468\u24ea"},{"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"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-animation-effect\u2460\u24ea\u24ea"},{"id":"ref-for-animation-effect\u2460\u24ea\u2460"}],"title":"6.5.2. The FillMode enumeration"},{"refs":[{"id":"ref-for-animation-effect\u2460\u24ea\u2461"},{"id":"ref-for-animation-effect\u2460\u24ea\u2462"},{"id":"ref-for-animation-effect\u2460\u24ea\u2463"},{"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"}],"title":"6.5.5. The ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-animation-effect\u2460\u24ea\u2468"},{"id":"ref-for-animation-effect\u2460\u2460\u24ea"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2460\u2460"},{"id":"ref-for-animation-effect\u2460\u2460\u2461"},{"id":"ref-for-animation-effect\u2460\u2460\u2462"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"},{"refs":[{"id":"ref-for-animation-effect\u2460\u2460\u2463"}],"title":"6.8. The Animatable interface mixin"}],"url":"#animation-effect"}, "animation-effect-active-phase": {"dfnID":"animation-effect-active-phase","dfnText":"active phase","external":false,"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"},{"id":"ref-for-animation-effect-active-phase\u2462"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-effect-active-phase\u2463"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-animation-effect-active-phase\u2464"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-animation-effect-active-phase\u2465"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-animation-effect-active-phase\u2466"}],"title":"5.6. Side effects of animation"}],"url":"#animation-effect-active-phase"}, "animation-effect-after-phase": {"dfnID":"animation-effect-after-phase","dfnText":"after phase","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-after-phase"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2460"},{"id":"ref-for-animation-effect-after-phase\u2461"},{"id":"ref-for-animation-effect-after-phase\u2462"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2463"},{"id":"ref-for-animation-effect-after-phase\u2464"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2465"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2466"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2467"}],"title":"4.7.5. Calculating the current iteration index"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2468"}],"title":"4.7.7. Calculating the transformed progress"},{"refs":[{"id":"ref-for-animation-effect-after-phase\u2460\u24ea"}],"title":"5.6. Side effects of animation"}],"url":"#animation-effect-after-phase"}, "animation-effect-associated-animation": {"dfnID":"animation-effect-associated-animation","dfnText":"associated with an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-associated-animation"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2460"},{"id":"ref-for-animation-effect-associated-animation\u2461"}],"title":"4.6.2. Associated animation and timeline"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2462"},{"id":"ref-for-animation-effect-associated-animation\u2463"}],"title":"4.6.3. Local time"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2464"},{"id":"ref-for-animation-effect-associated-animation\u2465"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2466"}],"title":"4.6.5.1. The start delay"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2467"},{"id":"ref-for-animation-effect-associated-animation\u2468"},{"id":"ref-for-animation-effect-associated-animation\u2460\u24ea"},{"id":"ref-for-animation-effect-associated-animation\u2460\u2460"},{"id":"ref-for-animation-effect-associated-animation\u2460\u2461"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2460\u2462"},{"id":"ref-for-animation-effect-associated-animation\u2460\u2463"},{"id":"ref-for-animation-effect-associated-animation\u2460\u2464"}],"title":"5.4.2. The effect stack"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2460\u2465"},{"id":"ref-for-animation-effect-associated-animation\u2460\u2466"}],"title":"5.4.5. Applying the composited result"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2460\u2467"},{"id":"ref-for-animation-effect-associated-animation\u2460\u2468"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2461\u24ea"},{"id":"ref-for-animation-effect-associated-animation\u2461\u2460"},{"id":"ref-for-animation-effect-associated-animation\u2461\u2461"},{"id":"ref-for-animation-effect-associated-animation\u2461\u2462"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animation-effect-associated-animation\u2461\u2463"},{"id":"ref-for-animation-effect-associated-animation\u2461\u2464"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#animation-effect-associated-animation"}, "animation-effect-before-phase": {"dfnID":"animation-effect-before-phase","dfnText":"before phase","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-before-phase"}],"title":"4.6. Animation effects"},{"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":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2463"},{"id":"ref-for-animation-effect-before-phase\u2464"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2465"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2466"}],"title":"4.7.3. Calculating the overall progress"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2467"}],"title":"4.7.7. Calculating the transformed progress"},{"refs":[{"id":"ref-for-animation-effect-before-phase\u2468"}],"title":"5.6. Side effects of animation"}],"url":"#animation-effect-before-phase"}, "animation-effect-effect-easing-function": {"dfnID":"animation-effect-effect-easing-function","dfnText":"effect easing function","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-effect-easing-function"}],"title":"4.6.11. Easing (effect timing transformations)"},{"refs":[{"id":"ref-for-animation-effect-effect-easing-function\u2460"}],"title":"4.7.7. Calculating the transformed progress"}],"url":"#animation-effect-effect-easing-function"}, "animation-effect-end-time": {"dfnID":"animation-effect-end-time","dfnText":"end time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-effect-end-time"},{"id":"ref-for-animation-effect-end-time\u2460"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-animation-effect-end-time\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-effect-end-time\u2462"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-animation-effect-end-time\u2463"}],"title":"4.6.5.3. The end delay and animation effect end time"},{"refs":[{"id":"ref-for-animation-effect-end-time\u2464"},{"id":"ref-for-animation-effect-end-time\u2465"},{"id":"ref-for-animation-effect-end-time\u2466"},{"id":"ref-for-animation-effect-end-time\u2467"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-effect-end-time\u2468"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-animation-effect-end-time\u2460\u24ea"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#animation-effect-end-time"}, "animation-effect-idle-phase": {"dfnID":"animation-effect-idle-phase","dfnText":"idle phase","external":false,"refSections":[],"url":"#animation-effect-idle-phase"}, "animation-events": {"dfnID":"animation-events","dfnText":"Animation events","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-events"},{"id":"ref-for-animation-events\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-animation-events\u2461"},{"id":"ref-for-animation-events\u2462"},{"id":"ref-for-animation-events\u2463"}],"title":"4.5.18. Animation events"}],"url":"#animation-events"}, "animation-frame": {"dfnID":"animation-frame","dfnText":"animation frame","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-frame"},{"id":"ref-for-animation-frame\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-animation-frame\u2461"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-animation-frame\u2462"}],"title":"4.6.6. Animation effect phases and states"}],"url":"#animation-frame"}, "animation-hold-time": {"dfnID":"animation-hold-time","dfnText":"hold time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-hold-time"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-animation-hold-time\u2460"},{"id":"ref-for-animation-hold-time\u2461"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2462"}],"title":"4.5.2. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2463"},{"id":"ref-for-animation-hold-time\u2464"},{"id":"ref-for-animation-hold-time\u2465"},{"id":"ref-for-animation-hold-time\u2466"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2467"},{"id":"ref-for-animation-hold-time\u2468"},{"id":"ref-for-animation-hold-time\u2460\u24ea"},{"id":"ref-for-animation-hold-time\u2460\u2460"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2460\u2461"},{"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"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2461\u2460"},{"id":"ref-for-animation-hold-time\u2461\u2461"},{"id":"ref-for-animation-hold-time\u2461\u2462"},{"id":"ref-for-animation-hold-time\u2461\u2463"},{"id":"ref-for-animation-hold-time\u2461\u2464"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2461\u2465"},{"id":"ref-for-animation-hold-time\u2461\u2466"},{"id":"ref-for-animation-hold-time\u2461\u2467"},{"id":"ref-for-animation-hold-time\u2461\u2468"},{"id":"ref-for-animation-hold-time\u2462\u24ea"},{"id":"ref-for-animation-hold-time\u2462\u2460"},{"id":"ref-for-animation-hold-time\u2462\u2461"},{"id":"ref-for-animation-hold-time\u2462\u2462"},{"id":"ref-for-animation-hold-time\u2462\u2463"},{"id":"ref-for-animation-hold-time\u2462\u2464"},{"id":"ref-for-animation-hold-time\u2462\u2465"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-hold-time\u2462\u2466"},{"id":"ref-for-animation-hold-time\u2462\u2467"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2462\u2468"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animation-hold-time\u2463\u24ea"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"}],"url":"#animation-hold-time"}, "animation-model-dfn": {"dfnID":"animation-model-dfn","dfnText":"animation model","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-model-dfn"},{"id":"ref-for-animation-model-dfn\u2460"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-animation-model-dfn\u2461"}],"title":"4. Timing model"},{"refs":[{"id":"ref-for-animation-model-dfn\u2462"}],"title":"5. Animation model"}],"url":"#animation-model-dfn"}, "animation-play-state": {"dfnID":"animation-play-state","dfnText":"play states","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-play-state"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-animation-play-state\u2460"},{"id":"ref-for-animation-play-state\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-play-state\u2462"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animation-play-state\u2463"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-animation-play-state\u2464"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-animation-play-state\u2465"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-animation-play-state\u2466"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-animation-play-state\u2467"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animation-play-state\u2468"}],"title":"6.4. The Animation interface"}],"url":"#animation-play-state"}, "animation-playback-events": {"dfnID":"animation-playback-events","dfnText":"animation playback events","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-playback-events"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-animation-playback-events\u2460"}],"title":"4.5.18.2. Animation playback events"},{"refs":[{"id":"ref-for-animation-playback-events\u2461"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#animation-playback-events"}, "animation-property-name-to-idl-attribute-name": {"dfnID":"animation-property-name-to-idl-attribute-name","dfnText":"animation property name to IDL attribute name","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-property-name-to-idl-attribute-name"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-animation-property-name-to-idl-attribute-name\u2460"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#animation-property-name-to-idl-attribute-name"}, "animation-relevant": {"dfnID":"animation-relevant","dfnText":"relevant","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-relevant"}],"title":"4.6.7. Relevant animations"}],"url":"#animation-relevant"}, "animation-reset-an-animations-pending-tasks": {"dfnID":"animation-reset-an-animations-pending-tasks","dfnText":"reset an animation\u2019s pending tasks","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-reset-an-animations-pending-tasks"}],"title":"4.5.14. Canceling an animation"}],"url":"#animation-reset-an-animations-pending-tasks"}, "animation-set-the-associated-effect-of-an-animation": {"dfnID":"animation-set-the-associated-effect-of-an-animation","dfnText":"set the associated effect of an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-set-the-associated-effect-of-an-animation"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-animation-set-the-associated-effect-of-an-animation\u2460"},{"id":"ref-for-animation-set-the-associated-effect-of-an-animation\u2461"}],"title":"6.4. The Animation interface"}],"url":"#animation-set-the-associated-effect-of-an-animation"}, "animation-set-the-current-time": {"dfnID":"animation-set-the-current-time","dfnText":"set the current time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-set-the-current-time"},{"id":"ref-for-animation-set-the-current-time\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-set-the-current-time\u2461"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-animation-set-the-current-time\u2462"}],"title":"6.4. The Animation interface"}],"url":"#animation-set-the-current-time"}, "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":[{"refs":[{"id":"ref-for-animation-set-the-timeline-of-an-animation"},{"id":"ref-for-animation-set-the-timeline-of-an-animation\u2460"}],"title":"6.4. The Animation interface"}],"url":"#animation-set-the-timeline-of-an-animation"}, "animation-silently-set-the-current-time": {"dfnID":"animation-silently-set-the-current-time","dfnText":"silently set the current time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-silently-set-the-current-time"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-animation-silently-set-the-current-time\u2460"}],"title":"4.5.13. Finishing an animation"}],"url":"#animation-silently-set-the-current-time"}, "animation-start-time": {"dfnID":"animation-start-time","dfnText":"start time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-start-time"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-animation-start-time\u2460"},{"id":"ref-for-animation-start-time\u2461"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2462"}],"title":"4.5.2. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2463"},{"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"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2460\u24ea"},{"id":"ref-for-animation-start-time\u2460\u2460"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2460\u2461"},{"id":"ref-for-animation-start-time\u2460\u2462"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"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"},{"id":"ref-for-animation-start-time\u2461\u24ea"},{"id":"ref-for-animation-start-time\u2461\u2460"}],"title":"4.5.8. Playing an animation"},{"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"},{"id":"ref-for-animation-start-time\u2461\u2464"},{"id":"ref-for-animation-start-time\u2461\u2465"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2461\u2466"},{"id":"ref-for-animation-start-time\u2461\u2467"},{"id":"ref-for-animation-start-time\u2461\u2468"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animation-start-time\u2462\u24ea"},{"id":"ref-for-animation-start-time\u2462\u2460"},{"id":"ref-for-animation-start-time\u2462\u2461"},{"id":"ref-for-animation-start-time\u2462\u2462"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2462\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2462\u2464"},{"id":"ref-for-animation-start-time\u2462\u2465"},{"id":"ref-for-animation-start-time\u2462\u2466"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2462\u2467"},{"id":"ref-for-animation-start-time\u2462\u2468"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-animation-start-time\u2463\u24ea"},{"id":"ref-for-animation-start-time\u2463\u2460"},{"id":"ref-for-animation-start-time\u2463\u2461"},{"id":"ref-for-animation-start-time\u2463\u2462"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-animation-start-time\u2463\u2463"},{"id":"ref-for-animation-start-time\u2463\u2464"},{"id":"ref-for-animation-start-time\u2463\u2465"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-animation-start-time\u2463\u2466"},{"id":"ref-for-animation-start-time\u2463\u2467"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-animation-start-time\u2463\u2468"},{"id":"ref-for-animation-start-time\u2464\u24ea"}],"title":"4.6.5. The active interval"},{"refs":[{"id":"ref-for-animation-start-time\u2464\u2460"},{"id":"ref-for-animation-start-time\u2464\u2461"}],"title":"4.6.5.1. The start delay"},{"refs":[{"id":"ref-for-animation-start-time\u2464\u2462"},{"id":"ref-for-animation-start-time\u2464\u2463"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animation-start-time\u2464\u2464"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-animation-start-time\u2464\u2465"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#animation-start-time"}, "animation-time-to-origin-relative-time": {"dfnID":"animation-time-to-origin-relative-time","dfnText":"convert\n a timeline time to an origin-relative time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-time-to-origin-relative-time"}],"title":"4.5.12. Updating the finished state"}],"url":"#animation-time-to-origin-relative-time"}, "animation-time-to-timeline-time": {"dfnID":"animation-time-to-timeline-time","dfnText":"convert\n an animation time to timeline time","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-time-to-timeline-time"}],"title":"4.5.18.1. Sorting animation events"}],"url":"#animation-time-to-timeline-time"}, "animation-type": {"dfnID":"animation-type","dfnText":"Animation type","external":false,"refSections":[{"refs":[{"id":"ref-for-animation-type"}],"title":"5.1. Introduction"},{"refs":[{"id":"ref-for-animation-type\u2460"},{"id":"ref-for-animation-type\u2461"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-animation-type\u2462"},{"id":"ref-for-animation-type\u2463"}],"title":"5.2.1. Custom Properties"},{"refs":[{"id":"ref-for-animation-type\u2464"},{"id":"ref-for-animation-type\u2465"},{"id":"ref-for-animation-type\u2466"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-animation-type\u2467"},{"id":"ref-for-animation-type\u2468"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-animation-type\u2460\u24ea"},{"id":"ref-for-animation-type\u2460\u2460"},{"id":"ref-for-animation-type\u2460\u2461"}],"title":"Appendix A: Animation types of existing properties"},{"refs":[{"id":"ref-for-animation-type\u2460\u2462"}],"title":"Animation of font-weight"}],"url":"#animation-type"}, "animationeffect": {"dfnID":"animationeffect","dfnText":"AnimationEffect","external":false,"refSections":[{"refs":[{"id":"ref-for-animationeffect"},{"id":"ref-for-animationeffect\u2460"},{"id":"ref-for-animationeffect\u2461"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animationeffect\u2462"},{"id":"ref-for-animationeffect\u2463"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-animationeffect\u2464"},{"id":"ref-for-animationeffect\u2465"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-animationeffect\u2466"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-animationeffect\u2467"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#animationeffect"}, "animationplaybackevent": {"dfnID":"animationplaybackevent","dfnText":"AnimationPlaybackEvent","external":false,"refSections":[{"refs":[{"id":"ref-for-animationplaybackevent"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-animationplaybackevent\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-animationplaybackevent\u2461"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-animationplaybackevent\u2462"},{"id":"ref-for-animationplaybackevent\u2463"},{"id":"ref-for-animationplaybackevent\u2464"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#animationplaybackevent"}, "animationtimeline": {"dfnID":"animationtimeline","dfnText":"AnimationTimeline","external":false,"refSections":[{"refs":[{"id":"ref-for-animationtimeline"},{"id":"ref-for-animationtimeline\u2460"}],"title":"6.2. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-animationtimeline\u2461"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-animationtimeline\u2462"},{"id":"ref-for-animationtimeline\u2463"},{"id":"ref-for-animationtimeline\u2464"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-animationtimeline\u2465"},{"id":"ref-for-animationtimeline\u2466"}],"title":"6.8. The Animatable interface mixin"}],"url":"#animationtimeline"}, "apply-any-pending-playback-rate": {"dfnID":"apply-any-pending-playback-rate","dfnText":"apply any pending playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-apply-any-pending-playback-rate"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2460"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2461"},{"id":"ref-for-apply-any-pending-playback-rate\u2462"},{"id":"ref-for-apply-any-pending-playback-rate\u2463"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2464"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2465"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2466"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-apply-any-pending-playback-rate\u2467"},{"id":"ref-for-apply-any-pending-playback-rate\u2468"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"}],"url":"#apply-any-pending-playback-rate"}, "associated-effect-end": {"dfnID":"associated-effect-end","dfnText":"associated effect end","external":false,"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":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2463"},{"id":"ref-for-associated-effect-end\u2464"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2465"},{"id":"ref-for-associated-effect-end\u2466"},{"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":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-associated-effect-end\u2460\u2461"},{"id":"ref-for-associated-effect-end\u2460\u2462"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2460\u2463"},{"id":"ref-for-associated-effect-end\u2460\u2464"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-associated-effect-end\u2460\u2465"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-associated-effect-end\u2460\u2466"},{"id":"ref-for-associated-effect-end\u2460\u2467"}],"title":"6.4. The Animation interface"}],"url":"#associated-effect-end"}, "associated-with-a-timeline": {"dfnID":"associated-with-a-timeline","dfnText":"associated with a timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-associated-with-a-timeline"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-associated-with-a-timeline\u2460"}],"title":"4.6. Animation effects"}],"url":"#associated-with-a-timeline"}, "b4cfa5ce": {"dfnID":"b4cfa5ce","dfnText":"throw","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-throw"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2460"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2461"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2462"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2463"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-dfn-throw\u2464"},{"id":"ref-for-dfn-throw\u2465"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-dfn-throw\u2466"},{"id":"ref-for-dfn-throw\u2467"},{"id":"ref-for-dfn-throw\u2468"},{"id":"ref-for-dfn-throw\u2460\u24ea"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-dfn-throw\u2460\u2460"},{"id":"ref-for-dfn-throw\u2460\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dfn-throw\u2460\u2462"},{"id":"ref-for-dfn-throw\u2460\u2463"},{"id":"ref-for-dfn-throw\u2460\u2464"},{"id":"ref-for-dfn-throw\u2460\u2465"},{"id":"ref-for-dfn-throw\u2460\u2466"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://webidl.spec.whatwg.org/#dfn-throw"}, "b5623a35": {"dfnID":"b5623a35","dfnText":"update style attribute for","external":true,"refSections":[{"refs":[{"id":"ref-for-update-style-attribute-for"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/cssom-1/#update-style-attribute-for"}, "b6c2fbcd": {"dfnID":"b6c2fbcd","dfnText":"nullable","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-nullable-type"},{"id":"ref-for-dfn-nullable-type\u2460"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://webidl.spec.whatwg.org/#dfn-nullable-type"}, "b7b00b81": {"dfnID":"b7b00b81","dfnText":"GetIterator","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-getiterator"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator"}, "b932e852": {"dfnID":"b932e852","dfnText":"create an event","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-event-create"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-concept-event-create\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-concept-event-create\u2461"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://dom.spec.whatwg.org/#concept-event-create"}, "baa76d7b": {"dfnID":"baa76d7b","dfnText":"animation-fill-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-fill-mode"}],"title":"4.6.8. Fill behavior and fill modes"}],"url":"https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode"}, "bdbd19d1": {"dfnID":"bdbd19d1","dfnText":"Promise","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-promise"},{"id":"ref-for-idl-promise\u2460"}],"title":"6.4. The Animation interface"}],"url":"https://webidl.spec.whatwg.org/#idl-promise"}, "be2d2b4c": {"dfnID":"be2d2b4c","dfnText":"SyntaxError","external":true,"refSections":[{"refs":[{"id":"ref-for-syntaxerror"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://webidl.spec.whatwg.org/#syntaxerror"}, "before-active-boundary-time": {"dfnID":"before-active-boundary-time","dfnText":"before-active boundary time","external":false,"refSections":[{"refs":[{"id":"ref-for-before-active-boundary-time"},{"id":"ref-for-before-active-boundary-time\u2460"}],"title":"4.6.6. Animation effect phases and states"}],"url":"#before-active-boundary-time"}, "by-computed-value": {"dfnID":"by-computed-value","dfnText":"by computed value","external":false,"refSections":[{"refs":[{"id":"ref-for-by-computed-value"},{"id":"ref-for-by-computed-value\u2460"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-by-computed-value\u2461"}],"title":"5.2.1. Custom Properties"},{"refs":[{"id":"ref-for-by-computed-value\u2462"}],"title":"Appendix A: Animation types of existing properties"},{"refs":[{"id":"ref-for-by-computed-value\u2463"}],"title":"Animation of font-weight"},{"refs":[{"id":"ref-for-by-computed-value\u2464"}],"title":"Animation of box-shadow and text-shadow"}],"url":"#by-computed-value"}, "c2cf7c95": {"dfnID":"c2cf7c95","dfnText":"before flag","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function-before-flag"}],"title":"4.7.7. Calculating the transformed progress"}],"url":"https://drafts.csswg.org/css-easing-2/#easing-function-before-flag"}, "c5762918": {"dfnID":"c5762918","dfnText":"IDL attribute to CSS property","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-attribute-to-css-property"}],"title":"6.6.2. Property names and IDL names"}],"url":"https://drafts.csswg.org/cssom/#idl-attribute-to-css-property"}, "c5c51387": {"dfnID":"c5c51387","dfnText":"transitionend","external":true,"refSections":[{"refs":[{"id":"ref-for-transitionend"}],"title":"6.13. Model liveness"}],"url":"https://drafts.csswg.org/css-transitions/#transitionend"}, "c69b256f": {"dfnID":"c69b256f","dfnText":"reject a promise","external":true,"refSections":[{"refs":[{"id":"ref-for-reject"},{"id":"ref-for-reject\u2460"}],"title":"4.5.14. Canceling an animation"}],"url":"https://webidl.spec.whatwg.org/#reject"}, "c974a599": {"dfnID":"c974a599","dfnText":"interpolation","external":true,"refSections":[{"refs":[{"id":"ref-for-interpolation"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-interpolation\u2460"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-interpolation\u2461"}],"title":"Animation of font-weight"},{"refs":[{"id":"ref-for-interpolation\u2462"}],"title":"Animation of visibility"}],"url":"https://drafts.csswg.org/css-values-4/#interpolation"}, "c9ecad15": {"dfnID":"c9ecad15","dfnText":"border-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-width"},{"id":"ref-for-propdef-border-width\u2460"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width"}, "cac5e928": {"dfnID":"cac5e928","dfnText":"animation frame callbacks","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-frames"},{"id":"ref-for-animation-frames\u2460"}],"title":"1.2. Relationship to other specifications"}],"url":"https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames"}, "cancel-an-animation": {"dfnID":"cancel-an-animation","dfnText":"cancel an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-cancel-an-animation"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-cancel-an-animation\u2460"}],"title":"6.4. The Animation interface"}],"url":"#cancel-an-animation"}, "cancel-event": {"dfnID":"cancel-event","dfnText":"cancel","external":false,"refSections":[{"refs":[{"id":"ref-for-cancel-event"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-cancel-event\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-cancel-event\u2461"}],"title":"4.5.18.3. Types of animation playback events"},{"refs":[{"id":"ref-for-cancel-event\u2462"}],"title":"6.4. The Animation interface"}],"url":"#cancel-event"}, "ce3d2bbb": {"dfnID":"ce3d2bbb","dfnText":"current global object","external":true,"refSections":[{"refs":[{"id":"ref-for-current-global-object"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-current-global-object\u2460"}],"title":"5.2.1. Custom Properties"},{"refs":[{"id":"ref-for-current-global-object\u2461"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-current-global-object\u2462"},{"id":"ref-for-current-global-object\u2463"}],"title":"6.4. The Animation interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object"}, "cfb5cfc9": {"dfnID":"cfb5cfc9","dfnText":"syntax definition","external":true,"refSections":[{"refs":[{"id":"ref-for-syntax-definition"}],"title":"5.2.1. Custom Properties"}],"url":"https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-definition"}, "check-the-completion-record": {"dfnID":"check-the-completion-record","dfnText":"check the completion record","external":false,"refSections":[{"refs":[{"id":"ref-for-check-the-completion-record"},{"id":"ref-for-check-the-completion-record\u2460"},{"id":"ref-for-check-the-completion-record\u2461"},{"id":"ref-for-check-the-completion-record\u2462"},{"id":"ref-for-check-the-completion-record\u2463"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#check-the-completion-record"}, "combining-shadow-lists": {"dfnID":"combining-shadow-lists","dfnText":"shadow lists","external":false,"refSections":[{"refs":[{"id":"ref-for-combining-shadow-lists"},{"id":"ref-for-combining-shadow-lists\u2460"}],"title":"Animation of box-shadow and text-shadow"}],"url":"#combining-shadow-lists"}, "commit-computed-styles": {"dfnID":"commit-computed-styles","dfnText":"commit computed styles","external":false,"refSections":[{"refs":[{"id":"ref-for-commit-computed-styles"},{"id":"ref-for-commit-computed-styles\u2460"}],"title":"6.4. The Animation interface"}],"url":"#commit-computed-styles"}, "composite": {"dfnID":"composite","dfnText":"compositing","external":false,"refSections":[{"refs":[{"id":"ref-for-composite"}],"title":"5.4. Combining effects"}],"url":"#composite"}, "composite-operation": {"dfnID":"composite-operation","dfnText":"composite operation","external":false,"refSections":[{"refs":[{"id":"ref-for-composite-operation"},{"id":"ref-for-composite-operation\u2460"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-composite-operation\u2461"},{"id":"ref-for-composite-operation\u2462"},{"id":"ref-for-composite-operation\u2463"},{"id":"ref-for-composite-operation\u2464"},{"id":"ref-for-composite-operation\u2465"},{"id":"ref-for-composite-operation\u2466"},{"id":"ref-for-composite-operation\u2467"},{"id":"ref-for-composite-operation\u2468"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-composite-operation\u2460\u24ea"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-composite-operation\u2460\u2460"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-composite-operation\u2460\u2461"},{"id":"ref-for-composite-operation\u2460\u2462"},{"id":"ref-for-composite-operation\u2460\u2463"},{"id":"ref-for-composite-operation\u2460\u2464"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-composite-operation\u2460\u2465"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-composite-operation\u2460\u2466"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-composite-operation\u2460\u2467"},{"id":"ref-for-composite-operation\u2460\u2468"},{"id":"ref-for-composite-operation\u2461\u24ea"},{"id":"ref-for-composite-operation\u2461\u2460"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#composite-operation"}, "composite-operation-accumulate": {"dfnID":"composite-operation-accumulate","dfnText":"accumulate","external":false,"refSections":[{"refs":[{"id":"ref-for-composite-operation-accumulate"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#composite-operation-accumulate"}, "composite-operation-add": {"dfnID":"composite-operation-add","dfnText":"add","external":false,"refSections":[{"refs":[{"id":"ref-for-composite-operation-add"},{"id":"ref-for-composite-operation-add\u2460"},{"id":"ref-for-composite-operation-add\u2461"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-composite-operation-add\u2462"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#composite-operation-add"}, "composite-operation-replace": {"dfnID":"composite-operation-replace","dfnText":"replace","external":false,"refSections":[{"refs":[{"id":"ref-for-composite-operation-replace"},{"id":"ref-for-composite-operation-replace\u2460"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-composite-operation-replace\u2461"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#composite-operation-replace"}, "composited-value": {"dfnID":"composited-value","dfnText":"composited value","external":false,"refSections":[{"refs":[{"id":"ref-for-composited-value"},{"id":"ref-for-composited-value\u2460"},{"id":"ref-for-composited-value\u2461"},{"id":"ref-for-composited-value\u2462"},{"id":"ref-for-composited-value\u2463"}],"title":"5.4.5. Applying the composited result"}],"url":"#composited-value"}, "compute-a-property-value": {"dfnID":"compute-a-property-value","dfnText":"compute a property value","external":false,"refSections":[{"refs":[{"id":"ref-for-compute-a-property-value"},{"id":"ref-for-compute-a-property-value\u2460"}],"title":"5.3.2. Computing property values"},{"refs":[{"id":"ref-for-compute-a-property-value\u2461"},{"id":"ref-for-compute-a-property-value\u2462"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"#compute-a-property-value"}, "compute-missing-keyframe-offsets": {"dfnID":"compute-missing-keyframe-offsets","dfnText":"compute missing keyframe offsets","external":false,"refSections":[{"refs":[{"id":"ref-for-compute-missing-keyframe-offsets"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-compute-missing-keyframe-offsets\u2460"},{"id":"ref-for-compute-missing-keyframe-offsets\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-compute-missing-keyframe-offsets\u2462"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#compute-missing-keyframe-offsets"}, "computed-keyframe-offsets": {"dfnID":"computed-keyframe-offsets","dfnText":"computed keyframe offsets","external":false,"refSections":[{"refs":[{"id":"ref-for-computed-keyframe-offsets"},{"id":"ref-for-computed-keyframe-offsets\u2460"},{"id":"ref-for-computed-keyframe-offsets\u2461"},{"id":"ref-for-computed-keyframe-offsets\u2462"},{"id":"ref-for-computed-keyframe-offsets\u2463"},{"id":"ref-for-computed-keyframe-offsets\u2464"},{"id":"ref-for-computed-keyframe-offsets\u2465"},{"id":"ref-for-computed-keyframe-offsets\u2466"},{"id":"ref-for-computed-keyframe-offsets\u2467"},{"id":"ref-for-computed-keyframe-offsets\u2468"},{"id":"ref-for-computed-keyframe-offsets\u2460\u24ea"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-computed-keyframe-offsets\u2460\u2460"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2461"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2462"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2463"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2464"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2465"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2466"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2467"},{"id":"ref-for-computed-keyframe-offsets\u2460\u2468"},{"id":"ref-for-computed-keyframe-offsets\u2461\u24ea"},{"id":"ref-for-computed-keyframe-offsets\u2461\u2460"},{"id":"ref-for-computed-keyframe-offsets\u2461\u2461"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-computed-keyframe-offsets\u2461\u2462"},{"id":"ref-for-computed-keyframe-offsets\u2461\u2463"},{"id":"ref-for-computed-keyframe-offsets\u2461\u2464"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-computed-keyframe-offsets\u2461\u2465"},{"id":"ref-for-computed-keyframe-offsets\u2461\u2466"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#computed-keyframe-offsets"}, "computed-keyframes": {"dfnID":"computed-keyframes","dfnText":"computed keyframes","external":false,"refSections":[{"refs":[{"id":"ref-for-computed-keyframes"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-computed-keyframes\u2460"},{"id":"ref-for-computed-keyframes\u2461"},{"id":"ref-for-computed-keyframes\u2462"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-computed-keyframes\u2463"},{"id":"ref-for-computed-keyframes\u2464"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#computed-keyframes"}, "concept-animatable": {"dfnID":"concept-animatable","dfnText":"animatable","external":false,"refSections":[{"refs":[{"id":"ref-for-concept-animatable"}],"title":"5.1. Introduction"}],"url":"#concept-animatable"}, "concept-animation": {"dfnID":"concept-animation","dfnText":"animation","external":false,"refSections":[{"refs":[{"id":"ref-for-concept-animation"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-concept-animation\u2460"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-concept-animation\u2461"},{"id":"ref-for-concept-animation\u2462"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-concept-animation\u2463"},{"id":"ref-for-concept-animation\u2464"},{"id":"ref-for-concept-animation\u2465"},{"id":"ref-for-concept-animation\u2466"},{"id":"ref-for-concept-animation\u2467"},{"id":"ref-for-concept-animation\u2468"},{"id":"ref-for-concept-animation\u2460\u24ea"},{"id":"ref-for-concept-animation\u2460\u2460"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2461"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2462"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2463"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2464"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2465"},{"id":"ref-for-concept-animation\u2460\u2466"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2467"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-concept-animation\u2460\u2468"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-concept-animation\u2461\u24ea"},{"id":"ref-for-concept-animation\u2461\u2460"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-concept-animation\u2461\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-concept-animation\u2461\u2462"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-concept-animation\u2461\u2463"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-concept-animation\u2461\u2464"},{"id":"ref-for-concept-animation\u2461\u2465"},{"id":"ref-for-concept-animation\u2461\u2466"},{"id":"ref-for-concept-animation\u2461\u2467"},{"id":"ref-for-concept-animation\u2461\u2468"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-concept-animation\u2462\u24ea"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2460"},{"id":"ref-for-concept-animation\u2462\u2461"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2462"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2463"},{"id":"ref-for-concept-animation\u2462\u2464"}],"title":"4.5.18.2. Animation playback events"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2465"}],"title":"4.5.18.3. Types of animation playback events"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2466"}],"title":"4.6.2. Associated animation and timeline"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2467"}],"title":"4.6.3. Local time"},{"refs":[{"id":"ref-for-concept-animation\u2462\u2468"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-concept-animation\u2463\u24ea"}],"title":"4.6.5.1. The start delay"},{"refs":[{"id":"ref-for-concept-animation\u2463\u2460"},{"id":"ref-for-concept-animation\u2463\u2461"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-concept-animation\u2463\u2462"},{"id":"ref-for-concept-animation\u2463\u2463"},{"id":"ref-for-concept-animation\u2463\u2464"},{"id":"ref-for-concept-animation\u2463\u2465"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-concept-animation\u2463\u2466"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-concept-animation\u2463\u2467"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-concept-animation\u2463\u2468"}],"title":"5.4.1. Animation classes"},{"refs":[{"id":"ref-for-concept-animation\u2464\u24ea"},{"id":"ref-for-concept-animation\u2464\u2460"}],"title":"5.4.5. Applying the composited result"},{"refs":[{"id":"ref-for-concept-animation\u2464\u2461"},{"id":"ref-for-concept-animation\u2464\u2462"},{"id":"ref-for-concept-animation\u2464\u2463"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-concept-animation\u2464\u2464"},{"id":"ref-for-concept-animation\u2464\u2465"},{"id":"ref-for-concept-animation\u2464\u2466"},{"id":"ref-for-concept-animation\u2464\u2467"},{"id":"ref-for-concept-animation\u2464\u2468"},{"id":"ref-for-concept-animation\u2465\u24ea"},{"id":"ref-for-concept-animation\u2465\u2460"},{"id":"ref-for-concept-animation\u2465\u2461"},{"id":"ref-for-concept-animation\u2465\u2462"},{"id":"ref-for-concept-animation\u2465\u2463"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-concept-animation\u2465\u2464"},{"id":"ref-for-concept-animation\u2465\u2465"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-concept-animation\u2465\u2466"},{"id":"ref-for-concept-animation\u2465\u2467"},{"id":"ref-for-concept-animation\u2465\u2468"},{"id":"ref-for-concept-animation\u2466\u24ea"},{"id":"ref-for-concept-animation\u2466\u2460"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-concept-animation\u2466\u2461"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-concept-animation\u2466\u2462"}],"title":"6.5.5. The ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-concept-animation\u2466\u2463"},{"id":"ref-for-concept-animation\u2466\u2464"},{"id":"ref-for-concept-animation\u2466\u2465"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-concept-animation\u2466\u2466"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"},{"refs":[{"id":"ref-for-concept-animation\u2466\u2467"},{"id":"ref-for-concept-animation\u2466\u2468"},{"id":"ref-for-concept-animation\u2467\u24ea"},{"id":"ref-for-concept-animation\u2467\u2460"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#concept-animation"}, "conforming-scripted-web-animations-user-agent": {"dfnID":"conforming-scripted-web-animations-user-agent","dfnText":"conforming scripted Web Animations user agent","external":false,"refSections":[],"url":"#conforming-scripted-web-animations-user-agent"}, "current": {"dfnID":"current","dfnText":"current","external":false,"refSections":[{"refs":[{"id":"ref-for-current"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-current\u2460"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-current\u2461"}],"title":"5.6. Side effects of animation"}],"url":"#current"}, "current-finished-promise": {"dfnID":"current-finished-promise","dfnText":"current finished promise","external":false,"refSections":[{"refs":[{"id":"ref-for-current-finished-promise"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-current-finished-promise\u2460"}],"title":"4.5.11. The current finished promise"},{"refs":[{"id":"ref-for-current-finished-promise\u2461"},{"id":"ref-for-current-finished-promise\u2462"},{"id":"ref-for-current-finished-promise\u2463"},{"id":"ref-for-current-finished-promise\u2464"},{"id":"ref-for-current-finished-promise\u2465"},{"id":"ref-for-current-finished-promise\u2466"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-current-finished-promise\u2467"},{"id":"ref-for-current-finished-promise\u2468"},{"id":"ref-for-current-finished-promise\u2460\u24ea"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-current-finished-promise\u2460\u2460"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-current-finished-promise\u2460\u2461"}],"title":"6.4. The Animation interface"}],"url":"#current-finished-promise"}, "current-iteration-index": {"dfnID":"current-iteration-index","dfnText":"current iteration index","external":false,"refSections":[{"refs":[{"id":"ref-for-current-iteration-index"},{"id":"ref-for-current-iteration-index\u2460"},{"id":"ref-for-current-iteration-index\u2461"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-current-iteration-index\u2462"}],"title":"4. Timing model"},{"refs":[{"id":"ref-for-current-iteration-index\u2463"}],"title":"4.7.5. Calculating the current iteration index"},{"refs":[{"id":"ref-for-current-iteration-index\u2464"}],"title":"4.7.6. Calculating the directed progress"},{"refs":[{"id":"ref-for-current-iteration-index\u2465"}],"title":"5. Animation model"},{"refs":[{"id":"ref-for-current-iteration-index\u2466"}],"title":"5.1. Introduction"},{"refs":[{"id":"ref-for-current-iteration-index\u2467"},{"id":"ref-for-current-iteration-index\u2468"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-current-iteration-index\u2460\u24ea"},{"id":"ref-for-current-iteration-index\u2460\u2460"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#current-iteration-index"}, "current-ready-promise": {"dfnID":"current-ready-promise","dfnText":"current ready promise","external":false,"refSections":[{"refs":[{"id":"ref-for-current-ready-promise"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-current-ready-promise\u2460"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-current-ready-promise\u2461"},{"id":"ref-for-current-ready-promise\u2462"},{"id":"ref-for-current-ready-promise\u2463"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-current-ready-promise\u2464"},{"id":"ref-for-current-ready-promise\u2465"},{"id":"ref-for-current-ready-promise\u2466"},{"id":"ref-for-current-ready-promise\u2467"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-current-ready-promise\u2468"},{"id":"ref-for-current-ready-promise\u2460\u24ea"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-current-ready-promise\u2460\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-current-ready-promise\u2460\u2461"},{"id":"ref-for-current-ready-promise\u2460\u2462"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-current-ready-promise\u2460\u2463"},{"id":"ref-for-current-ready-promise\u2460\u2464"},{"id":"ref-for-current-ready-promise\u2460\u2465"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-current-ready-promise\u2460\u2466"}],"title":"6.4. The Animation interface"}],"url":"#current-ready-promise"}, "d0f1dfc3": {"dfnID":"d0f1dfc3","dfnText":"create a new resolved Promise","external":true,"refSections":[{"refs":[{"id":"ref-for-a-promise-resolved-with"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-a-promise-resolved-with\u2460"}],"title":"4.5.14. Canceling an animation"}],"url":"https://webidl.spec.whatwg.org/#a-promise-resolved-with"}, "d25dfb2c": {"dfnID":"d25dfb2c","dfnText":"AbortError","external":true,"refSections":[{"refs":[{"id":"ref-for-aborterror"},{"id":"ref-for-aborterror\u2460"}],"title":"4.5.14. Canceling an animation"}],"url":"https://webidl.spec.whatwg.org/#aborterror"}, "d665a7eb": {"dfnID":"d665a7eb","dfnText":"EnumerableOwnNames","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-enumerableownnames"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames"}, "d6dfd46e": {"dfnID":"d6dfd46e","dfnText":"Promise object","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-promise-objects"},{"id":"ref-for-sec-promise-objects\u2460"},{"id":"ref-for-sec-promise-objects\u2461"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-sec-promise-objects\u2462"},{"id":"ref-for-sec-promise-objects\u2463"}],"title":"4.5.11. The current finished promise"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects"}, "d8586311": {"dfnID":"d8586311","dfnText":"interpolate","external":true,"refSections":[{"refs":[{"id":"ref-for-interpolation"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-interpolation\u2460"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-interpolation\u2461"}],"title":"Animation of font-weight"},{"refs":[{"id":"ref-for-interpolation\u2462"}],"title":"Animation of visibility"}],"url":"https://drafts.csswg.org/css-values-4/#interpolation"}, "d858be3f": {"dfnID":"d858be3f","dfnText":"Promise","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-promise-objects"},{"id":"ref-for-sec-promise-objects\u2460"},{"id":"ref-for-sec-promise-objects\u2461"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-sec-promise-objects\u2462"},{"id":"ref-for-sec-promise-objects\u2463"}],"title":"4.5.11. The current finished promise"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects"}, "d8f8bd6e": {"dfnID":"d8f8bd6e","dfnText":"extend","external":true,"refSections":[{"refs":[{"id":"ref-for-list-extend"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://infra.spec.whatwg.org/#list-extend"}, "d984b6fe": {"dfnID":"d984b6fe","dfnText":"animation-name","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-name"}],"title":"5.4.1. Animation classes"}],"url":"https://drafts.csswg.org/css-animations-1/#propdef-animation-name"}, "da8b8e0e": {"dfnID":"da8b8e0e","dfnText":"descendant","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-descendant"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-concept-tree-descendant\u2460"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-concept-tree-descendant\u2461"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://dom.spec.whatwg.org/#concept-tree-descendant"}, "dacde8b5": {"dfnID":"dacde8b5","dfnText":"a new promise","external":true,"refSections":[{"refs":[{"id":"ref-for-a-new-promise"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-a-new-promise\u2460"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-a-new-promise\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-a-new-promise\u2462"}],"title":"4.5.14. Canceling 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":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-idl-DOMException\u2460"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-idl-DOMException\u2461"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-idl-DOMException\u2462"},{"id":"ref-for-idl-DOMException\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-idl-DOMException\u2464"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-idl-DOMException\u2465"},{"id":"ref-for-idl-DOMException\u2466"},{"id":"ref-for-idl-DOMException\u2467"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-idl-DOMException\u2468"}],"title":"6.6. The KeyframeEffect interface"}],"url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, "dd0f8cfb": {"dfnID":"dd0f8cfb","dfnText":"border-bottom-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "de335fc4": {"dfnID":"de335fc4","dfnText":"before-change style","external":true,"refSections":[{"refs":[{"id":"ref-for-before-change-style"}],"title":"6.13. Model liveness"}],"url":"https://drafts.csswg.org/css-transitions-1/#before-change-style"}, "dictdef-animationplaybackeventinit": {"dfnID":"dictdef-animationplaybackeventinit","dfnText":"AnimationPlaybackEventInit","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-animationplaybackeventinit"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#dictdef-animationplaybackeventinit"}, "dictdef-basecomputedkeyframe": {"dfnID":"dictdef-basecomputedkeyframe","dfnText":"BaseComputedKeyframe","external":false,"refSections":[],"url":"#dictdef-basecomputedkeyframe"}, "dictdef-basekeyframe": {"dfnID":"dictdef-basekeyframe","dfnText":"BaseKeyframe","external":false,"refSections":[],"url":"#dictdef-basekeyframe"}, "dictdef-basepropertyindexedkeyframe": {"dfnID":"dictdef-basepropertyindexedkeyframe","dfnText":"BasePropertyIndexedKeyframe","external":false,"refSections":[],"url":"#dictdef-basepropertyindexedkeyframe"}, "dictdef-computedeffecttiming": {"dfnID":"dictdef-computedeffecttiming","dfnText":"ComputedEffectTiming","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-computedeffecttiming"},{"id":"ref-for-dictdef-computedeffecttiming\u2460"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dictdef-computedeffecttiming\u2461"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#dictdef-computedeffecttiming"}, "dictdef-documenttimelineoptions": {"dfnID":"dictdef-documenttimelineoptions","dfnText":"DocumentTimelineOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-documenttimelineoptions"}],"title":"6.3. The DocumentTimeline interface"}],"url":"#dictdef-documenttimelineoptions"}, "dictdef-effecttiming": {"dfnID":"dictdef-effecttiming","dfnText":"EffectTiming","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-effecttiming"},{"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":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2464"},{"id":"ref-for-dictdef-effecttiming\u2465"},{"id":"ref-for-dictdef-effecttiming\u2466"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2467"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2468"}],"title":"6.5.5. The ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2460\u24ea"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2460\u2460"}],"title":"6.6.1. Creating a new KeyframeEffect object"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2460\u2461"},{"id":"ref-for-dictdef-effecttiming\u2460\u2462"},{"id":"ref-for-dictdef-effecttiming\u2460\u2463"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-dictdef-effecttiming\u2460\u2464"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"}],"url":"#dictdef-effecttiming"}, "dictdef-getanimationsoptions": {"dfnID":"dictdef-getanimationsoptions","dfnText":"GetAnimationsOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-getanimationsoptions"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dictdef-getanimationsoptions"}, "dictdef-keyframeanimationoptions": {"dfnID":"dictdef-keyframeanimationoptions","dfnText":"KeyframeAnimationOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-keyframeanimationoptions"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-dictdef-keyframeanimationoptions\u2460"},{"id":"ref-for-dictdef-keyframeanimationoptions\u2461"},{"id":"ref-for-dictdef-keyframeanimationoptions\u2462"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dictdef-keyframeanimationoptions"}, "dictdef-keyframeeffectoptions": {"dfnID":"dictdef-keyframeeffectoptions","dfnText":"KeyframeEffectOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-keyframeeffectoptions"},{"id":"ref-for-dictdef-keyframeeffectoptions\u2460"},{"id":"ref-for-dictdef-keyframeeffectoptions\u2461"},{"id":"ref-for-dictdef-keyframeeffectoptions\u2462"},{"id":"ref-for-dictdef-keyframeeffectoptions\u2463"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dictdef-keyframeeffectoptions\u2464"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-dictdef-keyframeeffectoptions\u2465"},{"id":"ref-for-dictdef-keyframeeffectoptions\u2466"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-dictdef-keyframeeffectoptions\u2467"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dictdef-keyframeeffectoptions"}, "dictdef-optionaleffecttiming": {"dfnID":"dictdef-optionaleffecttiming","dfnText":"OptionalEffectTiming","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-optionaleffecttiming"},{"id":"ref-for-dictdef-optionaleffecttiming\u2460"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dictdef-optionaleffecttiming\u2461"},{"id":"ref-for-dictdef-optionaleffecttiming\u2462"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dictdef-optionaleffecttiming\u2463"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dictdef-optionaleffecttiming"}, "directed-progress": {"dfnID":"directed-progress","dfnText":"directed progress","external":false,"refSections":[{"refs":[{"id":"ref-for-directed-progress"}],"title":"4.6.10. Direction control"},{"refs":[{"id":"ref-for-directed-progress\u2460"},{"id":"ref-for-directed-progress\u2461"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-directed-progress\u2462"},{"id":"ref-for-directed-progress\u2463"},{"id":"ref-for-directed-progress\u2464"}],"title":"4.7.7. Calculating the transformed progress"}],"url":"#directed-progress"}, "discrete": {"dfnID":"discrete","dfnText":"discrete","external":false,"refSections":[{"refs":[{"id":"ref-for-discrete"},{"id":"ref-for-discrete\u2460"},{"id":"ref-for-discrete\u2461"},{"id":"ref-for-discrete\u2462"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-discrete\u2463"}],"title":"5.2.1. Custom Properties"},{"refs":[{"id":"ref-for-discrete\u2464"}],"title":"Animation of visibility"},{"refs":[{"id":"ref-for-discrete\u2465"},{"id":"ref-for-discrete\u2466"}],"title":"Animation of box-shadow and text-shadow"}],"url":"#discrete"}, "document-default-document-timeline": {"dfnID":"document-default-document-timeline","dfnText":"default document timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-document-default-document-timeline"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2460"},{"id":"ref-for-document-default-document-timeline\u2461"}],"title":"4.3.1.1. The default document timeline"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2462"}],"title":"4.3.1.2. Relationship to wall-clock time"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2463"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2464"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2465"},{"id":"ref-for-document-default-document-timeline\u2466"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2467"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2468"}],"title":"6.9. Extensions to the Document interface"},{"refs":[{"id":"ref-for-document-default-document-timeline\u2460\u24ea"}],"title":"6.13. Model liveness"}],"url":"#document-default-document-timeline"}, "document-time-space": {"dfnID":"document-time-space","dfnText":"document time space","external":false,"refSections":[],"url":"#document-time-space"}, "document-timeline": {"dfnID":"document-timeline","dfnText":"document timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-document-timeline"},{"id":"ref-for-document-timeline\u2460"},{"id":"ref-for-document-timeline\u2461"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-document-timeline\u2462"}],"title":"4.3.1.1. The default document timeline"},{"refs":[{"id":"ref-for-document-timeline\u2463"}],"title":"4.3.1.2. Relationship to wall-clock time"},{"refs":[{"id":"ref-for-document-timeline\u2464"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-document-timeline\u2465"}],"title":"6.13. Model liveness"}],"url":"#document-timeline"}, "documenttimeline": {"dfnID":"documenttimeline","dfnText":"DocumentTimeline","external":false,"refSections":[{"refs":[{"id":"ref-for-documenttimeline"},{"id":"ref-for-documenttimeline\u2460"},{"id":"ref-for-documenttimeline\u2461"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-documenttimeline\u2462"},{"id":"ref-for-documenttimeline\u2463"},{"id":"ref-for-documenttimeline\u2464"}],"title":"6.9. Extensions to the Document interface"}],"url":"#documenttimeline"}, "dom-animatable-animate": {"dfnID":"dom-animatable-animate","dfnText":"Animation animate(keyframes, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animatable-animate"},{"id":"ref-for-dom-animatable-animate\u2460"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-dom-animatable-animate\u2461"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-dom-animatable-animate\u2462"}],"title":"6.13. Model liveness"}],"url":"#dom-animatable-animate"}, "dom-animatable-animate-keyframes-options-keyframes": {"dfnID":"dom-animatable-animate-keyframes-options-keyframes","dfnText":"keyframes","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animatable-animate-keyframes-options-keyframes"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-animatable-animate-keyframes-options-keyframes"}, "dom-animatable-animate-keyframes-options-options": {"dfnID":"dom-animatable-animate-keyframes-options-options","dfnText":"options","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animatable-animate-keyframes-options-options"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-animatable-animate-keyframes-options-options"}, "dom-animatable-getanimations": {"dfnID":"dom-animatable-getanimations","dfnText":"sequence<Animation> getAnimations(options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animatable-getanimations"},{"id":"ref-for-dom-animatable-getanimations\u2460"},{"id":"ref-for-dom-animatable-getanimations\u2461"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-animatable-getanimations"}, "dom-animatable-getanimations-options-options": {"dfnID":"dom-animatable-getanimations-options-options","dfnText":"options","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animatable-getanimations-options-options"},{"id":"ref-for-dom-animatable-getanimations-options-options\u2460"},{"id":"ref-for-dom-animatable-getanimations-options-options\u2461"},{"id":"ref-for-dom-animatable-getanimations-options-options\u2462"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-animatable-getanimations-options-options"}, "dom-animation-animation": {"dfnID":"dom-animation-animation","dfnText":"Animation (effect, timeline)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-animation"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-dom-animation-animation\u2460"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-animation-animation"}, "dom-animation-animation-effect-timeline-effect": {"dfnID":"dom-animation-animation-effect-timeline-effect","dfnText":"effect","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-animation-effect-timeline-effect"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-animation-effect-timeline-effect"}, "dom-animation-animation-effect-timeline-timeline": {"dfnID":"dom-animation-animation-effect-timeline-timeline","dfnText":"timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-animation-effect-timeline-timeline"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-animation-effect-timeline-timeline"}, "dom-animation-cancel": {"dfnID":"dom-animation-cancel","dfnText":"void cancel()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-cancel"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-cancel"}, "dom-animation-commitstyles": {"dfnID":"dom-animation-commitstyles","dfnText":"void commitStyles()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-commitstyles"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-commitstyles"}, "dom-animation-currenttime": {"dfnID":"dom-animation-currenttime","dfnText":"currentTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-currenttime"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-currenttime"}, "dom-animation-effect": {"dfnID":"dom-animation-effect","dfnText":"effect","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-effect"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-effect"}, "dom-animation-finish": {"dfnID":"dom-animation-finish","dfnText":"void finish()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-finish"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-dom-animation-finish\u2460"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-finish"}, "dom-animation-finished": {"dfnID":"dom-animation-finished","dfnText":"finished","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-finished"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-finished"}, "dom-animation-id": {"dfnID":"dom-animation-id","dfnText":"id","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-id"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-dom-animation-id\u2460"},{"id":"ref-for-dom-animation-id\u2461"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-animation-id"}, "dom-animation-oncancel": {"dfnID":"dom-animation-oncancel","dfnText":"oncancel","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-oncancel"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-oncancel"}, "dom-animation-onfinish": {"dfnID":"dom-animation-onfinish","dfnText":"onfinish","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-onfinish"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-onfinish"}, "dom-animation-onremove": {"dfnID":"dom-animation-onremove","dfnText":"onremove","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-onremove"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-onremove"}, "dom-animation-pause": {"dfnID":"dom-animation-pause","dfnText":"void pause()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-pause"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-pause"}, "dom-animation-pending": {"dfnID":"dom-animation-pending","dfnText":"pending","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-pending"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-pending"}, "dom-animation-persist": {"dfnID":"dom-animation-persist","dfnText":"void persist()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-persist"},{"id":"ref-for-dom-animation-persist\u2460"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-persist"}, "dom-animation-play": {"dfnID":"dom-animation-play","dfnText":"void play()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-play"},{"id":"ref-for-dom-animation-play\u2460"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-play"}, "dom-animation-playbackrate": {"dfnID":"dom-animation-playbackrate","dfnText":"playbackRate","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-playbackrate"},{"id":"ref-for-dom-animation-playbackrate\u2460"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-playbackrate"}, "dom-animation-playstate": {"dfnID":"dom-animation-playstate","dfnText":"playState","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-playstate"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-playstate"}, "dom-animation-ready": {"dfnID":"dom-animation-ready","dfnText":"ready","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-ready"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-ready"}, "dom-animation-replacestate": {"dfnID":"dom-animation-replacestate","dfnText":"replaceState","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-replacestate"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-replacestate"}, "dom-animation-reverse": {"dfnID":"dom-animation-reverse","dfnText":"void reverse()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-reverse"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-reverse"}, "dom-animation-starttime": {"dfnID":"dom-animation-starttime","dfnText":"startTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-starttime"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-starttime"}, "dom-animation-timeline": {"dfnID":"dom-animation-timeline","dfnText":"timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-timeline"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-timeline"}, "dom-animation-updateplaybackrate": {"dfnID":"dom-animation-updateplaybackrate","dfnText":"void updatePlaybackRate(playbackRate)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-updateplaybackrate"},{"id":"ref-for-dom-animation-updateplaybackrate\u2460"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-updateplaybackrate"}, "dom-animation-updateplaybackrate-playbackrate-playbackrate": {"dfnID":"dom-animation-updateplaybackrate-playbackrate-playbackrate","dfnText":"playbackRate","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate"},{"id":"ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate\u2460"}],"title":"6.4. The Animation interface"}],"url":"#dom-animation-updateplaybackrate-playbackrate-playbackrate"}, "dom-animationeffect-getcomputedtiming": {"dfnID":"dom-animationeffect-getcomputedtiming","dfnText":"getComputedTiming()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-getcomputedtiming"},{"id":"ref-for-dom-animationeffect-getcomputedtiming\u2460"},{"id":"ref-for-dom-animationeffect-getcomputedtiming\u2461"},{"id":"ref-for-dom-animationeffect-getcomputedtiming\u2462"},{"id":"ref-for-dom-animationeffect-getcomputedtiming\u2463"},{"id":"ref-for-dom-animationeffect-getcomputedtiming\u2464"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dom-animationeffect-getcomputedtiming\u2465"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#dom-animationeffect-getcomputedtiming"}, "dom-animationeffect-gettiming": {"dfnID":"dom-animationeffect-gettiming","dfnText":"getTiming()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-gettiming"},{"id":"ref-for-dom-animationeffect-gettiming\u2460"},{"id":"ref-for-dom-animationeffect-gettiming\u2461"},{"id":"ref-for-dom-animationeffect-gettiming\u2462"},{"id":"ref-for-dom-animationeffect-gettiming\u2463"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dom-animationeffect-gettiming\u2464"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#dom-animationeffect-gettiming"}, "dom-animationeffect-updatetiming": {"dfnID":"dom-animationeffect-updatetiming","dfnText":"updateTiming(timing)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-updatetiming"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dom-animationeffect-updatetiming\u2460"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#dom-animationeffect-updatetiming"}, "dom-animationeffect-updatetiming-timing-timing": {"dfnID":"dom-animationeffect-updatetiming-timing-timing","dfnText":"optional OptionalEffectTiming timing","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationeffect-updatetiming-timing-timing"},{"id":"ref-for-dom-animationeffect-updatetiming-timing-timing\u2460"},{"id":"ref-for-dom-animationeffect-updatetiming-timing-timing\u2461"}],"title":"6.5. The AnimationEffect interface"}],"url":"#dom-animationeffect-updatetiming-timing-timing"}, "dom-animationplaybackevent-animationplaybackevent": {"dfnID":"dom-animationplaybackevent-animationplaybackevent","dfnText":"\n AnimationPlaybackEvent (type, eventInitDict)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaybackevent-animationplaybackevent"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"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"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-dom-animationplaybackevent-currenttime\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-dom-animationplaybackevent-currenttime\u2461"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-dom-animationplaybackevent-currenttime\u2462"},{"id":"ref-for-dom-animationplaybackevent-currenttime\u2463"}],"title":"6.12. 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":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-dom-animationplaybackevent-timelinetime\u2461"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-dom-animationplaybackevent-timelinetime\u2462"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-dom-animationplaybackevent-timelinetime\u2463"},{"id":"ref-for-dom-animationplaybackevent-timelinetime\u2464"}],"title":"6.12. 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":"6.12. 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":"6.12. The AnimationPlaybackEvent interface"}],"url":"#dom-animationplaybackeventinit-timelinetime"}, "dom-animationplaystate-finished": {"dfnID":"dom-animationplaystate-finished","dfnText":"finished","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaystate-finished"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#dom-animationplaystate-finished"}, "dom-animationplaystate-idle": {"dfnID":"dom-animationplaystate-idle","dfnText":"idle","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaystate-idle"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#dom-animationplaystate-idle"}, "dom-animationplaystate-paused": {"dfnID":"dom-animationplaystate-paused","dfnText":"paused","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaystate-paused"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#dom-animationplaystate-paused"}, "dom-animationplaystate-running": {"dfnID":"dom-animationplaystate-running","dfnText":"running","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationplaystate-running"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#dom-animationplaystate-running"}, "dom-animationreplacedstate-active": {"dfnID":"dom-animationreplacedstate-active","dfnText":"active","external":false,"refSections":[],"url":"#dom-animationreplacedstate-active"}, "dom-animationreplacedstate-persisted": {"dfnID":"dom-animationreplacedstate-persisted","dfnText":"persisted","external":false,"refSections":[],"url":"#dom-animationreplacedstate-persisted"}, "dom-animationreplacedstate-removed": {"dfnID":"dom-animationreplacedstate-removed","dfnText":"removed","external":false,"refSections":[],"url":"#dom-animationreplacedstate-removed"}, "dom-animationreplacestate-active": {"dfnID":"dom-animationreplacestate-active","dfnText":"\"active\"","external":false,"refSections":[],"url":"#dom-animationreplacestate-active"}, "dom-animationreplacestate-persisted": {"dfnID":"dom-animationreplacestate-persisted","dfnText":"\"persisted\"","external":false,"refSections":[],"url":"#dom-animationreplacestate-persisted"}, "dom-animationreplacestate-removed": {"dfnID":"dom-animationreplacestate-removed","dfnText":"\"removed\"","external":false,"refSections":[],"url":"#dom-animationreplacestate-removed"}, "dom-animationtimeline-currenttime": {"dfnID":"dom-animationtimeline-currenttime","dfnText":"currentTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-animationtimeline-currenttime"}],"title":"6.2. The AnimationTimeline interface"}],"url":"#dom-animationtimeline-currenttime"}, "dom-basecomputedkeyframe-composite": {"dfnID":"dom-basecomputedkeyframe-composite","dfnText":"composite","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-basecomputedkeyframe-composite"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-basecomputedkeyframe-composite"}, "dom-basecomputedkeyframe-computedoffset": {"dfnID":"dom-basecomputedkeyframe-computedoffset","dfnText":"computedOffset","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-basecomputedkeyframe-computedoffset"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-basecomputedkeyframe-computedoffset"}, "dom-basecomputedkeyframe-easing": {"dfnID":"dom-basecomputedkeyframe-easing","dfnText":"easing","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-basecomputedkeyframe-easing"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-basecomputedkeyframe-easing"}, "dom-basecomputedkeyframe-offset": {"dfnID":"dom-basecomputedkeyframe-offset","dfnText":"offset","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-basecomputedkeyframe-offset"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-basecomputedkeyframe-offset"}, "dom-basekeyframe-composite": {"dfnID":"dom-basekeyframe-composite","dfnText":"composite","external":false,"refSections":[],"url":"#dom-basekeyframe-composite"}, "dom-basekeyframe-easing": {"dfnID":"dom-basekeyframe-easing","dfnText":"easing","external":false,"refSections":[],"url":"#dom-basekeyframe-easing"}, "dom-basekeyframe-offset": {"dfnID":"dom-basekeyframe-offset","dfnText":"offset","external":false,"refSections":[],"url":"#dom-basekeyframe-offset"}, "dom-basepropertyindexedkeyframe-composite": {"dfnID":"dom-basepropertyindexedkeyframe-composite","dfnText":"composite","external":false,"refSections":[],"url":"#dom-basepropertyindexedkeyframe-composite"}, "dom-basepropertyindexedkeyframe-easing": {"dfnID":"dom-basepropertyindexedkeyframe-easing","dfnText":"easing","external":false,"refSections":[],"url":"#dom-basepropertyindexedkeyframe-easing"}, "dom-basepropertyindexedkeyframe-offset": {"dfnID":"dom-basepropertyindexedkeyframe-offset","dfnText":"offset","external":false,"refSections":[],"url":"#dom-basepropertyindexedkeyframe-offset"}, "dom-compositeoperation-accumulate": {"dfnID":"dom-compositeoperation-accumulate","dfnText":"accumulate","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-compositeoperation-accumulate"},{"id":"ref-for-dom-compositeoperation-accumulate\u2460"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#dom-compositeoperation-accumulate"}, "dom-compositeoperation-add": {"dfnID":"dom-compositeoperation-add","dfnText":"add","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-compositeoperation-add"},{"id":"ref-for-dom-compositeoperation-add\u2460"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#dom-compositeoperation-add"}, "dom-compositeoperation-replace": {"dfnID":"dom-compositeoperation-replace","dfnText":"replace","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-compositeoperation-replace"},{"id":"ref-for-dom-compositeoperation-replace\u2460"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#dom-compositeoperation-replace"}, "dom-compositeoperationorauto-auto": {"dfnID":"dom-compositeoperationorauto-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-compositeoperationorauto-auto"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dom-compositeoperationorauto-auto\u2460"},{"id":"ref-for-dom-compositeoperationorauto-auto\u2461"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-dom-compositeoperationorauto-auto\u2462"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-dom-compositeoperationorauto-auto\u2463"},{"id":"ref-for-dom-compositeoperationorauto-auto\u2464"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#dom-compositeoperationorauto-auto"}, "dom-computedeffecttiming-activeduration": {"dfnID":"dom-computedeffecttiming-activeduration","dfnText":"activeDuration","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-activeduration"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-activeduration"}, "dom-computedeffecttiming-currentiteration": {"dfnID":"dom-computedeffecttiming-currentiteration","dfnText":"currentIteration","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-currentiteration"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-currentiteration"}, "dom-computedeffecttiming-endtime": {"dfnID":"dom-computedeffecttiming-endtime","dfnText":"endTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-endtime"}],"title":"6.5.5. The 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":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-localtime"}, "dom-computedeffecttiming-progress": {"dfnID":"dom-computedeffecttiming-progress","dfnText":"progress","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-computedeffecttiming-progress"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#dom-computedeffecttiming-progress"}, "dom-document-timeline": {"dfnID":"dom-document-timeline","dfnText":"timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-document-timeline"}],"title":"6.9. Extensions to the Document interface"}],"url":"#dom-document-timeline"}, "dom-documentorshadowroot-getanimations": {"dfnID":"dom-documentorshadowroot-getanimations","dfnText":"sequence<Animation> getAnimations()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-documentorshadowroot-getanimations"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"}],"url":"#dom-documentorshadowroot-getanimations"}, "dom-documenttimeline-documenttimeline": {"dfnID":"dom-documenttimeline-documenttimeline","dfnText":"DocumentTimeline (options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-documenttimeline-documenttimeline"}],"title":"6.3. The DocumentTimeline interface"}],"url":"#dom-documenttimeline-documenttimeline"}, "dom-documenttimeline-documenttimeline-options-options": {"dfnID":"dom-documenttimeline-documenttimeline-options-options","dfnText":"options","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-documenttimeline-documenttimeline-options-options"}],"title":"6.3. The DocumentTimeline interface"}],"url":"#dom-documenttimeline-documenttimeline-options-options"}, "dom-documenttimelineoptions-origintime": {"dfnID":"dom-documenttimelineoptions-origintime","dfnText":"originTime","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-documenttimelineoptions-origintime"},{"id":"ref-for-dom-documenttimelineoptions-origintime\u2460"}],"title":"6.3. The DocumentTimeline interface"}],"url":"#dom-documenttimelineoptions-origintime"}, "dom-effecttiming-delay": {"dfnID":"dom-effecttiming-delay","dfnText":"delay","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-delay"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-delay\u2460"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dom-effecttiming-delay"}, "dom-effecttiming-direction": {"dfnID":"dom-effecttiming-direction","dfnText":"direction","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-direction"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-direction\u2460"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dom-effecttiming-direction"}, "dom-effecttiming-duration": {"dfnID":"dom-effecttiming-duration","dfnText":"duration","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-duration"},{"id":"ref-for-dom-effecttiming-duration\u2460"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dom-effecttiming-duration\u2461"},{"id":"ref-for-dom-effecttiming-duration\u2462"},{"id":"ref-for-dom-effecttiming-duration\u2463"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-duration\u2464"},{"id":"ref-for-dom-effecttiming-duration\u2465"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-dom-effecttiming-duration\u2466"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-effecttiming-duration"}, "dom-effecttiming-easing": {"dfnID":"dom-effecttiming-easing","dfnText":"easing","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-easing"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-easing\u2460"},{"id":"ref-for-dom-effecttiming-easing\u2461"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-dom-effecttiming-easing\u2462"},{"id":"ref-for-dom-effecttiming-easing\u2463"},{"id":"ref-for-dom-effecttiming-easing\u2464"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#dom-effecttiming-easing"}, "dom-effecttiming-enddelay": {"dfnID":"dom-effecttiming-enddelay","dfnText":"endDelay","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-enddelay"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-enddelay\u2460"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dom-effecttiming-enddelay"}, "dom-effecttiming-fill": {"dfnID":"dom-effecttiming-fill","dfnText":"fill","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-fill"},{"id":"ref-for-dom-effecttiming-fill\u2460"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-dom-effecttiming-fill\u2461"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-fill\u2462"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dom-effecttiming-fill"}, "dom-effecttiming-iterations": {"dfnID":"dom-effecttiming-iterations","dfnText":"iterations","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-iterations"},{"id":"ref-for-dom-effecttiming-iterations\u2460"},{"id":"ref-for-dom-effecttiming-iterations\u2461"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-iterations\u2462"},{"id":"ref-for-dom-effecttiming-iterations\u2463"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dom-effecttiming-iterations"}, "dom-effecttiming-iterationstart": {"dfnID":"dom-effecttiming-iterationstart","dfnText":"iterationStart","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-effecttiming-iterationstart"},{"id":"ref-for-dom-effecttiming-iterationstart\u2460"},{"id":"ref-for-dom-effecttiming-iterationstart\u2461"},{"id":"ref-for-dom-effecttiming-iterationstart\u2462"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-dom-effecttiming-iterationstart\u2463"},{"id":"ref-for-dom-effecttiming-iterationstart\u2464"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"#dom-effecttiming-iterationstart"}, "dom-fillmode-auto": {"dfnID":"dom-fillmode-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-fillmode-auto"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#dom-fillmode-auto"}, "dom-fillmode-backwards": {"dfnID":"dom-fillmode-backwards","dfnText":"backwards","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-fillmode-backwards"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#dom-fillmode-backwards"}, "dom-fillmode-both": {"dfnID":"dom-fillmode-both","dfnText":"both","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-fillmode-both"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#dom-fillmode-both"}, "dom-fillmode-forwards": {"dfnID":"dom-fillmode-forwards","dfnText":"forwards","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-fillmode-forwards"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#dom-fillmode-forwards"}, "dom-fillmode-none": {"dfnID":"dom-fillmode-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-fillmode-none"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#dom-fillmode-none"}, "dom-getanimationsoptions-pseudoelement": {"dfnID":"dom-getanimationsoptions-pseudoelement","dfnText":"pseudoElement","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-getanimationsoptions-pseudoelement"},{"id":"ref-for-dom-getanimationsoptions-pseudoelement\u2460"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-getanimationsoptions-pseudoelement"}, "dom-getanimationsoptions-subtree": {"dfnID":"dom-getanimationsoptions-subtree","dfnText":"subtree","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-getanimationsoptions-subtree"},{"id":"ref-for-dom-getanimationsoptions-subtree\u2460"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-getanimationsoptions-subtree"}, "dom-keyframeanimationoptions-id": {"dfnID":"dom-keyframeanimationoptions-id","dfnText":"id","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeanimationoptions-id"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-keyframeanimationoptions-id"}, "dom-keyframeanimationoptions-timeline": {"dfnID":"dom-keyframeanimationoptions-timeline","dfnText":"timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeanimationoptions-timeline"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-keyframeanimationoptions-timeline"}, "dom-keyframeeffect-composite": {"dfnID":"dom-keyframeeffect-composite","dfnText":"composite","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-composite"},{"id":"ref-for-dom-keyframeeffect-composite\u2460"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-composite"}, "dom-keyframeeffect-getkeyframes": {"dfnID":"dom-keyframeeffect-getkeyframes","dfnText":"sequence<object> getKeyframes()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-getkeyframes"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dom-keyframeeffect-getkeyframes\u2460"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#dom-keyframeeffect-getkeyframes"}, "dom-keyframeeffect-keyframeeffect": {"dfnID":"dom-keyframeeffect-keyframeeffect","dfnText":"\n KeyframeEffect (target, keyframes, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect"},{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2460"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2461"}],"title":"6.6.1. Creating a new KeyframeEffect object"},{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2462"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2463"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2464"},{"id":"ref-for-dom-keyframeeffect-keyframeeffect\u2465"}],"title":"6.8. The Animatable interface mixin"}],"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":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-keyframeeffect-source"}, "dom-keyframeeffect-keyframeeffect-source-source": {"dfnID":"dom-keyframeeffect-keyframeeffect-source-source","dfnText":"KeyframeEffect source","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-source-source"},{"id":"ref-for-dom-keyframeeffect-keyframeeffect-source-source\u2460"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-keyframeeffect-source-source"}, "dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes": {"dfnID":"dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes","dfnText":"object? keyframes","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"}, "dom-keyframeeffect-keyframeeffect-target-keyframes-options-options": {"dfnID":"dom-keyframeeffect-keyframeeffect-target-keyframes-options-options","dfnText":"optional KeyframeEffectOptions options","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"}, "dom-keyframeeffect-keyframeeffect-target-keyframes-options-target": {"dfnID":"dom-keyframeeffect-keyframeeffect-target-keyframes-options-target","dfnText":"Element? target","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"}, "dom-keyframeeffect-keyframes": {"dfnID":"dom-keyframeeffect-keyframes","dfnText":"object? keyframes","external":false,"refSections":[],"url":"#dom-keyframeeffect-keyframes"}, "dom-keyframeeffect-pseudo-element-parsing": {"dfnID":"dom-keyframeeffect-pseudo-element-parsing","dfnText":"pseudo-element parsing","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-pseudo-element-parsing"}],"title":"6.8. The Animatable interface mixin"}],"url":"#dom-keyframeeffect-pseudo-element-parsing"}, "dom-keyframeeffect-pseudoelement": {"dfnID":"dom-keyframeeffect-pseudoelement","dfnText":"pseudoElement","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-pseudoelement"},{"id":"ref-for-dom-keyframeeffect-pseudoelement\u2460"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-pseudoelement"}, "dom-keyframeeffect-setkeyframes": {"dfnID":"dom-keyframeeffect-setkeyframes","dfnText":"void setKeyframes(object? keyframes)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-setkeyframes"},{"id":"ref-for-dom-keyframeeffect-setkeyframes\u2460"},{"id":"ref-for-dom-keyframeeffect-setkeyframes\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dom-keyframeeffect-setkeyframes\u2462"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#dom-keyframeeffect-setkeyframes"}, "dom-keyframeeffect-setkeyframes-keyframes-keyframes": {"dfnID":"dom-keyframeeffect-setkeyframes-keyframes-keyframes","dfnText":"keyframes","external":false,"refSections":[],"url":"#dom-keyframeeffect-setkeyframes-keyframes-keyframes"}, "dom-keyframeeffect-target": {"dfnID":"dom-keyframeeffect-target","dfnText":"target","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffect-target"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#dom-keyframeeffect-target"}, "dom-keyframeeffectoptions-composite": {"dfnID":"dom-keyframeeffectoptions-composite","dfnText":"composite","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffectoptions-composite"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"}],"url":"#dom-keyframeeffectoptions-composite"}, "dom-keyframeeffectoptions-pseudoelement": {"dfnID":"dom-keyframeeffectoptions-pseudoelement","dfnText":"pseudoElement","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-keyframeeffectoptions-pseudoelement"},{"id":"ref-for-dom-keyframeeffectoptions-pseudoelement\u2460"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-dom-keyframeeffectoptions-pseudoelement\u2461"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"}],"url":"#dom-keyframeeffectoptions-pseudoelement"}, "dom-optionaleffecttiming-delay": {"dfnID":"dom-optionaleffecttiming-delay","dfnText":"delay","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-delay"}, "dom-optionaleffecttiming-direction": {"dfnID":"dom-optionaleffecttiming-direction","dfnText":"direction","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-direction"}, "dom-optionaleffecttiming-duration": {"dfnID":"dom-optionaleffecttiming-duration","dfnText":"duration","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-duration"}, "dom-optionaleffecttiming-easing": {"dfnID":"dom-optionaleffecttiming-easing","dfnText":"easing","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-easing"}, "dom-optionaleffecttiming-enddelay": {"dfnID":"dom-optionaleffecttiming-enddelay","dfnText":"endDelay","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-enddelay"}, "dom-optionaleffecttiming-fill": {"dfnID":"dom-optionaleffecttiming-fill","dfnText":"fill","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-fill"}, "dom-optionaleffecttiming-iterations": {"dfnID":"dom-optionaleffecttiming-iterations","dfnText":"iterations","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-iterations"}, "dom-optionaleffecttiming-iterationstart": {"dfnID":"dom-optionaleffecttiming-iterationstart","dfnText":"iterationStart","external":false,"refSections":[],"url":"#dom-optionaleffecttiming-iterationstart"}, "dom-playbackdirection-alternate": {"dfnID":"dom-playbackdirection-alternate","dfnText":"alternate","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-playbackdirection-alternate"}],"title":"6.5.3. The PlaybackDirection enumeration"}],"url":"#dom-playbackdirection-alternate"}, "dom-playbackdirection-alternate-reverse": {"dfnID":"dom-playbackdirection-alternate-reverse","dfnText":"alternate-reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-playbackdirection-alternate-reverse"}],"title":"6.5.3. The PlaybackDirection enumeration"}],"url":"#dom-playbackdirection-alternate-reverse"}, "dom-playbackdirection-normal": {"dfnID":"dom-playbackdirection-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-playbackdirection-normal"}],"title":"6.5.3. The PlaybackDirection enumeration"}],"url":"#dom-playbackdirection-normal"}, "dom-playbackdirection-reverse": {"dfnID":"dom-playbackdirection-reverse","dfnText":"reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-playbackdirection-reverse"}],"title":"6.5.3. The PlaybackDirection enumeration"}],"url":"#dom-playbackdirection-reverse"}, "e10e7eb7": {"dfnID":"e10e7eb7","dfnText":"DOM manipulation task source","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-manipulation-task-source"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-dom-manipulation-task-source\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-dom-manipulation-task-source\u2461"}],"title":"5.5.2. Removing replaced animations"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source"}, "e2e08d07": {"dfnID":"e2e08d07","dfnText":"transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform"}],"title":"5.6. Side effects of animation"}],"url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform"}, "e55dd7f2": {"dfnID":"e55dd7f2","dfnText":"<custom-property-name>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-custom-property-name"},{"id":"ref-for-typedef-custom-property-name\u2460"}],"title":"6.6.2. Property names and IDL names"},{"refs":[{"id":"ref-for-typedef-custom-property-name\u2461"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://drafts.csswg.org/css-variables-2/#typedef-custom-property-name"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"},{"id":"ref-for-propdef-display\u2460"},{"id":"ref-for-propdef-display\u2461"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "e8ff0bb4": {"dfnID":"e8ff0bb4","dfnText":"em","external":true,"refSections":[{"refs":[{"id":"ref-for-em"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/css-values-4/#em"}, "e9c58cef": {"dfnID":"e9c58cef","dfnText":"time origin","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-settings-object-time-origin"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-concept-settings-object-time-origin\u2460"}],"title":"4.3.1.2. Relationship to wall-clock time"},{"refs":[{"id":"ref-for-concept-settings-object-time-origin\u2461"},{"id":"ref-for-concept-settings-object-time-origin\u2462"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-concept-settings-object-time-origin\u2463"}],"title":"6.3. The DocumentTimeline interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-time-origin"}, "eab73120": {"dfnID":"eab73120","dfnText":"owner node","external":true,"refSections":[{"refs":[{"id":"ref-for-cssstyledeclaration-owner-node"}],"title":"6.4. The Animation interface"}],"url":"https://drafts.csswg.org/cssom-1/#cssstyledeclaration-owner-node"}, "eaf3e7f3": {"dfnID":"eaf3e7f3","dfnText":"GetMethod","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-getmethod"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod"}, "ec878a66": {"dfnID":"ec878a66","dfnText":"RangeError","external":true,"refSections":[{"refs":[{"id":"ref-for-exceptiondef-rangeerror"}],"title":"6.5.4. Updating the timing of an AnimationEffect"}],"url":"https://webidl.spec.whatwg.org/#exceptiondef-rangeerror"}, "ef63136c": {"dfnID":"ef63136c","dfnText":"well known symbols","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-well-known-symbols"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols"}, "efd1ec5d": {"dfnID":"efd1ec5d","dfnText":"object","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-object"},{"id":"ref-for-idl-object\u2460"},{"id":"ref-for-idl-object\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-idl-object\u2462"}],"title":"6.8. The Animatable interface mixin"}],"url":"https://webidl.spec.whatwg.org/#idl-object"}, "effect-stack": {"dfnID":"effect-stack","dfnText":"effect stack","external":false,"refSections":[{"refs":[{"id":"ref-for-effect-stack"}],"title":"5. Animation model"},{"refs":[{"id":"ref-for-effect-stack\u2460"},{"id":"ref-for-effect-stack\u2461"},{"id":"ref-for-effect-stack\u2462"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-effect-stack\u2463"},{"id":"ref-for-effect-stack\u2464"}],"title":"5.4.2. The effect stack"},{"refs":[{"id":"ref-for-effect-stack\u2465"},{"id":"ref-for-effect-stack\u2466"},{"id":"ref-for-effect-stack\u2467"}],"title":"5.4.3. Calculating the result of an effect stack"},{"refs":[{"id":"ref-for-effect-stack\u2468"},{"id":"ref-for-effect-stack\u2460\u24ea"},{"id":"ref-for-effect-stack\u2460\u2460"},{"id":"ref-for-effect-stack\u2460\u2461"}],"title":"5.4.5. Applying the composited result"},{"refs":[{"id":"ref-for-effect-stack\u2460\u2462"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-effect-stack\u2460\u2463"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-effect-stack\u2460\u2464"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-effect-stack\u2460\u2465"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"}],"url":"#effect-stack"}, "effect-target-target-element": {"dfnID":"effect-target-target-element","dfnText":"target element","external":false,"refSections":[{"refs":[{"id":"ref-for-effect-target-target-element"},{"id":"ref-for-effect-target-target-element\u2460"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-effect-target-target-element\u2461"}],"title":"5.3.2. Computing property values"},{"refs":[{"id":"ref-for-effect-target-target-element\u2462"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-effect-target-target-element\u2463"},{"id":"ref-for-effect-target-target-element\u2464"},{"id":"ref-for-effect-target-target-element\u2465"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-effect-target-target-element\u2466"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-effect-target-target-element\u2467"},{"id":"ref-for-effect-target-target-element\u2468"}],"title":"6.8. The Animatable interface mixin"}],"url":"#effect-target-target-element"}, "effect-target-target-pseudo-selector": {"dfnID":"effect-target-target-pseudo-selector","dfnText":"target pseudo-selector","external":false,"refSections":[{"refs":[{"id":"ref-for-effect-target-target-pseudo-selector"},{"id":"ref-for-effect-target-target-pseudo-selector\u2460"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-effect-target-target-pseudo-selector\u2461"},{"id":"ref-for-effect-target-target-pseudo-selector\u2462"},{"id":"ref-for-effect-target-target-pseudo-selector\u2463"},{"id":"ref-for-effect-target-target-pseudo-selector\u2464"},{"id":"ref-for-effect-target-target-pseudo-selector\u2465"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#effect-target-target-pseudo-selector"}, "effect-value": {"dfnID":"effect-value","dfnText":"effect value","external":false,"refSections":[{"refs":[{"id":"ref-for-effect-value"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-effect-value\u2460"}],"title":"5.3.2. Computing property values"},{"refs":[{"id":"ref-for-effect-value\u2461"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-effect-value\u2462"},{"id":"ref-for-effect-value\u2463"},{"id":"ref-for-effect-value\u2464"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-effect-value\u2465"},{"id":"ref-for-effect-value\u2466"},{"id":"ref-for-effect-value\u2467"},{"id":"ref-for-effect-value\u2468"},{"id":"ref-for-effect-value\u2460\u24ea"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-effect-value\u2460\u2460"},{"id":"ref-for-effect-value\u2460\u2461"},{"id":"ref-for-effect-value\u2460\u2462"}],"title":"5.4.3. Calculating the result of an effect stack"},{"refs":[{"id":"ref-for-effect-value\u2460\u2463"},{"id":"ref-for-effect-value\u2460\u2464"},{"id":"ref-for-effect-value\u2460\u2465"},{"id":"ref-for-effect-value\u2460\u2466"},{"id":"ref-for-effect-value\u2460\u2467"},{"id":"ref-for-effect-value\u2460\u2468"},{"id":"ref-for-effect-value\u2461\u24ea"},{"id":"ref-for-effect-value\u2461\u2460"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-effect-value\u2461\u2461"},{"id":"ref-for-effect-value\u2461\u2462"}],"title":"6.4. The Animation interface"}],"url":"#effect-value"}, "effective-playback-rate": {"dfnID":"effective-playback-rate","dfnText":"effective playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-effective-playback-rate"},{"id":"ref-for-effective-playback-rate\u2460"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-effective-playback-rate\u2461"},{"id":"ref-for-effective-playback-rate\u2462"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-effective-playback-rate\u2463"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-effective-playback-rate\u2464"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-effective-playback-rate\u2465"},{"id":"ref-for-effective-playback-rate\u2466"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-effective-playback-rate\u2467"},{"id":"ref-for-effective-playback-rate\u2468"}],"title":"4.5.17. Play states"}],"url":"#effective-playback-rate"}, "end-delay": {"dfnID":"end-delay","dfnText":"end delay","external":false,"refSections":[{"refs":[{"id":"ref-for-end-delay"},{"id":"ref-for-end-delay\u2460"}],"title":"4.6.5.3. The end delay and animation effect end time"},{"refs":[{"id":"ref-for-end-delay\u2461"},{"id":"ref-for-end-delay\u2462"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-end-delay\u2463"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-end-delay\u2464"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-end-delay\u2465"}],"title":"6.5.5. The ComputedEffectTiming dictionary"},{"refs":[{"id":"ref-for-end-delay\u2466"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#end-delay"}, "enumdef-animationplaystate": {"dfnID":"enumdef-animationplaystate","dfnText":"AnimationPlayState","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-animationplaystate"},{"id":"ref-for-enumdef-animationplaystate\u2460"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-enumdef-animationplaystate\u2461"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#enumdef-animationplaystate"}, "enumdef-animationreplacestate": {"dfnID":"enumdef-animationreplacestate","dfnText":"AnimationReplaceState","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-animationreplacestate"},{"id":"ref-for-enumdef-animationreplacestate\u2460"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-enumdef-animationreplacestate\u2461"}],"title":"6.4.2. The AnimationReplaceState enumeration"}],"url":"#enumdef-animationreplacestate"}, "enumdef-compositeoperation": {"dfnID":"enumdef-compositeoperation","dfnText":"CompositeOperation","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-compositeoperation"},{"id":"ref-for-enumdef-compositeoperation\u2460"},{"id":"ref-for-enumdef-compositeoperation\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-enumdef-compositeoperation\u2462"},{"id":"ref-for-enumdef-compositeoperation\u2463"},{"id":"ref-for-enumdef-compositeoperation\u2464"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-enumdef-compositeoperation\u2465"},{"id":"ref-for-enumdef-compositeoperation\u2466"},{"id":"ref-for-enumdef-compositeoperation\u2467"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#enumdef-compositeoperation"}, "enumdef-compositeoperationorauto": {"dfnID":"enumdef-compositeoperationorauto","dfnText":"CompositeOperationOrAuto","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-compositeoperationorauto"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-enumdef-compositeoperationorauto\u2460"},{"id":"ref-for-enumdef-compositeoperationorauto\u2461"},{"id":"ref-for-enumdef-compositeoperationorauto\u2462"},{"id":"ref-for-enumdef-compositeoperationorauto\u2463"},{"id":"ref-for-enumdef-compositeoperationorauto\u2464"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-enumdef-compositeoperationorauto\u2465"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#enumdef-compositeoperationorauto"}, "enumdef-fillmode": {"dfnID":"enumdef-fillmode","dfnText":"FillMode","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-fillmode"},{"id":"ref-for-enumdef-fillmode\u2460"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-enumdef-fillmode\u2461"},{"id":"ref-for-enumdef-fillmode\u2462"},{"id":"ref-for-enumdef-fillmode\u2463"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-enumdef-fillmode\u2464"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#enumdef-fillmode"}, "enumdef-playbackdirection": {"dfnID":"enumdef-playbackdirection","dfnText":"PlaybackDirection","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-playbackdirection"},{"id":"ref-for-enumdef-playbackdirection\u2460"},{"id":"ref-for-enumdef-playbackdirection\u2461"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-enumdef-playbackdirection\u2462"}],"title":"6.5.3. The PlaybackDirection enumeration"}],"url":"#enumdef-playbackdirection"}, "f02cd417": {"dfnID":"f02cd417","dfnText":"iterate","external":true,"refSections":[{"refs":[{"id":"ref-for-list-iterate"}],"title":"6.4. The Animation interface"}],"url":"https://infra.spec.whatwg.org/#list-iterate"}, "f0951476": {"dfnID":"f0951476","dfnText":"EventHandler","external":true,"refSections":[{"refs":[{"id":"ref-for-eventhandler"},{"id":"ref-for-eventhandler\u2460"},{"id":"ref-for-eventhandler\u2461"},{"id":"ref-for-eventhandler\u2462"},{"id":"ref-for-eventhandler\u2463"},{"id":"ref-for-eventhandler\u2464"}],"title":"6.4. The Animation interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"}, "f338a9f0": {"dfnID":"f338a9f0","dfnText":"text-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-shadow"},{"id":"ref-for-propdef-text-shadow\u2460"}],"title":"Animation of box-shadow and text-shadow"}],"url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow"}, "f351b546": {"dfnID":"f351b546","dfnText":"document associated with a window","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-window"}],"title":"6.3. The DocumentTimeline interface"},{"refs":[{"id":"ref-for-concept-document-window\u2460"},{"id":"ref-for-concept-document-window\u2461"}],"title":"6.4. The Animation interface"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window"}, "f3ab1701": {"dfnID":"f3ab1701","dfnText":"an entry with persisted user state","external":true,"refSections":[{"refs":[{"id":"ref-for-an-entry-with-persisted-user-state"}],"title":"8. Interaction with page display"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state"}, "f5549e37": {"dfnID":"f5549e37","dfnText":"document.open()","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-document-open"}],"title":"4.3.1.1. The default document timeline"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open"}, "f6d1b137": {"dfnID":"f6d1b137","dfnText":"style change event","external":true,"refSections":[{"refs":[{"id":"ref-for-style-change-event"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-style-change-event\u2460"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-style-change-event\u2461"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"},{"refs":[{"id":"ref-for-style-change-event\u2462"},{"id":"ref-for-style-change-event\u2463"},{"id":"ref-for-style-change-event\u2464"},{"id":"ref-for-style-change-event\u2465"}],"title":"6.13. Model liveness"}],"url":"https://drafts.csswg.org/css-transitions-1/#style-change-event"}, "f8123bb2": {"dfnID":"f8123bb2","dfnText":"es to DOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-es-to-DOMString"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"https://webidl.spec.whatwg.org/#es-to-DOMString"}, "f831c141": {"dfnID":"f831c141","dfnText":"background-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-image"}],"title":"5.2. Animating properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image"}, "f9d909f7": {"dfnID":"f9d909f7","dfnText":"inclusive descendant","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-inclusive-descendant"}],"title":"4.6.7. Relevant animations"}],"url":"https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant"}, "fdf6efd5": {"dfnID":"fdf6efd5","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size"},{"id":"ref-for-propdef-font-size\u2460"},{"id":"ref-for-propdef-font-size\u2461"}],"title":"5.3.2. Computing property values"},{"refs":[{"id":"ref-for-propdef-font-size\u2462"},{"id":"ref-for-propdef-font-size\u2463"}],"title":"5.3.4. The effect value of a keyframe effect"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, "ffceedd9": {"dfnID":"ffceedd9","dfnText":"registerProperty(definition)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-css-registerproperty"}],"title":"5.2.1. Custom Properties"}],"url":"https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty"}, "fill-mode": {"dfnID":"fill-mode","dfnText":"fill mode","external":false,"refSections":[{"refs":[{"id":"ref-for-fill-mode"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-fill-mode\u2460"}],"title":"4.6.5. The active interval"},{"refs":[{"id":"ref-for-fill-mode\u2461"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-fill-mode\u2462"},{"id":"ref-for-fill-mode\u2463"},{"id":"ref-for-fill-mode\u2464"},{"id":"ref-for-fill-mode\u2465"},{"id":"ref-for-fill-mode\u2466"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-fill-mode\u2467"},{"id":"ref-for-fill-mode\u2468"},{"id":"ref-for-fill-mode\u2460\u24ea"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-fill-mode\u2460\u2460"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-fill-mode\u2460\u2461"},{"id":"ref-for-fill-mode\u2460\u2462"},{"id":"ref-for-fill-mode\u2460\u2463"},{"id":"ref-for-fill-mode\u2460\u2464"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-fill-mode\u2460\u2465"},{"id":"ref-for-fill-mode\u2460\u2466"}],"title":"6.5.2. The FillMode enumeration"},{"refs":[{"id":"ref-for-fill-mode\u2460\u2467"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-fill-mode\u2460\u2468"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#fill-mode"}, "fill-mode-backwards": {"dfnID":"fill-mode-backwards","dfnText":"backwards","external":false,"refSections":[{"refs":[{"id":"ref-for-fill-mode-backwards"},{"id":"ref-for-fill-mode-backwards\u2460"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-fill-mode-backwards\u2461"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-fill-mode-backwards\u2462"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#fill-mode-backwards"}, "fill-mode-both": {"dfnID":"fill-mode-both","dfnText":"both","external":false,"refSections":[{"refs":[{"id":"ref-for-fill-mode-both"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-fill-mode-both\u2460"},{"id":"ref-for-fill-mode-both\u2461"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-fill-mode-both\u2462"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-fill-mode-both\u2463"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-fill-mode-both\u2464"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#fill-mode-both"}, "fill-mode-forwards": {"dfnID":"fill-mode-forwards","dfnText":"forwards","external":false,"refSections":[{"refs":[{"id":"ref-for-fill-mode-forwards"},{"id":"ref-for-fill-mode-forwards\u2460"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-fill-mode-forwards\u2461"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-fill-mode-forwards\u2462"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-fill-mode-forwards\u2463"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#fill-mode-forwards"}, "fill-mode-none": {"dfnID":"fill-mode-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-fill-mode-none"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-fill-mode-none\u2460"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-fill-mode-none\u2461"}],"title":"6.5.2. The FillMode enumeration"}],"url":"#fill-mode-none"}, "finish-an-animation": {"dfnID":"finish-an-animation","dfnText":"finish an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-finish-an-animation"},{"id":"ref-for-finish-an-animation\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-finish-an-animation\u2461"}],"title":"6.4. The Animation interface"}],"url":"#finish-an-animation"}, "finish-event": {"dfnID":"finish-event","dfnText":"finish","external":false,"refSections":[{"refs":[{"id":"ref-for-finish-event"},{"id":"ref-for-finish-event\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-finish-event\u2461"}],"title":"6.4. The Animation interface"}],"url":"#finish-event"}, "finish-notification-steps": {"dfnID":"finish-notification-steps","dfnText":"finish notification steps","external":false,"refSections":[{"refs":[{"id":"ref-for-finish-notification-steps"},{"id":"ref-for-finish-notification-steps\u2460"},{"id":"ref-for-finish-notification-steps\u2461"}],"title":"4.5.12. Updating the finished state"}],"url":"#finish-notification-steps"}, "global-animation-list": {"dfnID":"global-animation-list","dfnText":"global animation list","external":false,"refSections":[{"refs":[{"id":"ref-for-global-animation-list"}],"title":"5.4.2. The effect stack"}],"url":"#global-animation-list"}, "idl-attribute-name-to-animation-property-name": {"dfnID":"idl-attribute-name-to-animation-property-name","dfnText":"IDL attribute name to animation property name","external":false,"refSections":[{"refs":[{"id":"ref-for-idl-attribute-name-to-animation-property-name"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#idl-attribute-name-to-animation-property-name"}, "in-effect": {"dfnID":"in-effect","dfnText":"in effect","external":false,"refSections":[{"refs":[{"id":"ref-for-in-effect"},{"id":"ref-for-in-effect\u2460"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-in-effect\u2461"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-in-effect\u2462"},{"id":"ref-for-in-effect\u2463"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-in-effect\u2464"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-in-effect\u2465"}],"title":"5.6. Side effects of animation"}],"url":"#in-effect"}, "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"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-in-play\u2463"},{"id":"ref-for-in-play\u2464"},{"id":"ref-for-in-play\u2465"},{"id":"ref-for-in-play\u2466"},{"id":"ref-for-in-play\u2467"},{"id":"ref-for-in-play\u2468"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-in-play\u2460\u24ea"}],"title":"4.6.9.3. Interval timing"}],"url":"#in-play"}, "inactive-timeline": {"dfnID":"inactive-timeline","dfnText":"inactive","external":false,"refSections":[{"refs":[{"id":"ref-for-inactive-timeline"},{"id":"ref-for-inactive-timeline\u2460"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-inactive-timeline\u2461"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-inactive-timeline\u2462"},{"id":"ref-for-inactive-timeline\u2463"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-inactive-timeline\u2464"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-inactive-timeline\u2465"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-inactive-timeline\u2466"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-inactive-timeline\u2467"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-inactive-timeline\u2468"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-inactive-timeline\u2460\u24ea"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-inactive-timeline\u2460\u2460"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-inactive-timeline\u2460\u2461"}],"title":"6.2. The AnimationTimeline interface"}],"url":"#inactive-timeline"}, "iteration-count": {"dfnID":"iteration-count","dfnText":"iteration count","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-count"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-iteration-count\u2460"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-iteration-count\u2461"},{"id":"ref-for-iteration-count\u2462"},{"id":"ref-for-iteration-count\u2463"}],"title":"4.6.5.2. The active duration"},{"refs":[{"id":"ref-for-iteration-count\u2464"}],"title":"4.6.9.1. Iteration intervals"},{"refs":[{"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"},{"id":"ref-for-iteration-count\u2460\u2461"}],"title":"4.6.9.2. Controlling iteration"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2462"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2463"}],"title":"4.7.3. Calculating the overall progress"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2464"},{"id":"ref-for-iteration-count\u2460\u2465"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2466"}],"title":"4.7.5. Calculating the current iteration index"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2467"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-iteration-count\u2460\u2468"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-iteration-count\u2461\u24ea"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#iteration-count"}, "iteration-duration": {"dfnID":"iteration-duration","dfnText":"iteration duration","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-duration"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-iteration-duration\u2460"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-iteration-duration\u2461"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-iteration-duration\u2462"},{"id":"ref-for-iteration-duration\u2463"},{"id":"ref-for-iteration-duration\u2464"}],"title":"4.6.5.2. The active duration"},{"refs":[{"id":"ref-for-iteration-duration\u2465"},{"id":"ref-for-iteration-duration\u2466"},{"id":"ref-for-iteration-duration\u2467"},{"id":"ref-for-iteration-duration\u2468"},{"id":"ref-for-iteration-duration\u2460\u24ea"},{"id":"ref-for-iteration-duration\u2460\u2460"}],"title":"4.6.9.1. Iteration intervals"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2461"},{"id":"ref-for-iteration-duration\u2460\u2462"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2463"},{"id":"ref-for-iteration-duration\u2460\u2464"}],"title":"4.7.3. Calculating the overall progress"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2465"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2466"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2467"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-iteration-duration\u2460\u2468"},{"id":"ref-for-iteration-duration\u2461\u24ea"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-iteration-duration\u2461\u2460"}],"title":"6.6.1. Creating a new KeyframeEffect object"},{"refs":[{"id":"ref-for-iteration-duration\u2461\u2461"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#iteration-duration"}, "iteration-interval": {"dfnID":"iteration-interval","dfnText":"iteration interval","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-interval"}],"title":"4.6.9.1. Iteration intervals"},{"refs":[{"id":"ref-for-iteration-interval\u2460"}],"title":"4.6.9.2. Controlling iteration"},{"refs":[{"id":"ref-for-iteration-interval\u2461"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"}],"url":"#iteration-interval"}, "iteration-progress": {"dfnID":"iteration-progress","dfnText":"iteration progress","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-progress"},{"id":"ref-for-iteration-progress\u2460"},{"id":"ref-for-iteration-progress\u2461"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-iteration-progress\u2462"}],"title":"4. Timing model"},{"refs":[{"id":"ref-for-iteration-progress\u2463"}],"title":"4.1.1. Stateless"},{"refs":[{"id":"ref-for-iteration-progress\u2464"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-iteration-progress\u2465"},{"id":"ref-for-iteration-progress\u2466"},{"id":"ref-for-iteration-progress\u2467"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-iteration-progress\u2468"},{"id":"ref-for-iteration-progress\u2460\u24ea"}],"title":"4.6.9.3. Interval timing"},{"refs":[{"id":"ref-for-iteration-progress\u2460\u2460"},{"id":"ref-for-iteration-progress\u2460\u2461"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-progress\u2460\u2462"}],"title":"5. Animation model"},{"refs":[{"id":"ref-for-iteration-progress\u2460\u2463"}],"title":"5.1. Introduction"},{"refs":[{"id":"ref-for-iteration-progress\u2460\u2464"},{"id":"ref-for-iteration-progress\u2460\u2465"},{"id":"ref-for-iteration-progress\u2460\u2466"},{"id":"ref-for-iteration-progress\u2460\u2467"},{"id":"ref-for-iteration-progress\u2460\u2468"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-iteration-progress\u2461\u24ea"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#iteration-progress"}, "iteration-start": {"dfnID":"iteration-start","dfnText":"iteration start","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-start"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-iteration-start\u2460"},{"id":"ref-for-iteration-start\u2461"},{"id":"ref-for-iteration-start\u2462"},{"id":"ref-for-iteration-start\u2463"},{"id":"ref-for-iteration-start\u2464"},{"id":"ref-for-iteration-start\u2465"}],"title":"4.6.9.2. Controlling iteration"},{"refs":[{"id":"ref-for-iteration-start\u2466"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-iteration-start\u2467"}],"title":"4.7.3. Calculating the overall progress"},{"refs":[{"id":"ref-for-iteration-start\u2468"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-iteration-start\u2460\u24ea"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-iteration-start\u2460\u2460"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-iteration-start\u2460\u2461"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#iteration-start"}, "iteration-time": {"dfnID":"iteration-time","dfnText":"iteration time","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-time"}],"title":"4.6.4. Time spaces"}],"url":"#iteration-time"}, "iteration-time-space": {"dfnID":"iteration-time-space","dfnText":"iteration time space","external":false,"refSections":[{"refs":[{"id":"ref-for-iteration-time-space"}],"title":"4.6.4. Time spaces"}],"url":"#iteration-time-space"}, "keyframe": {"dfnID":"keyframe","dfnText":"keyframe","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframe"},{"id":"ref-for-keyframe\u2460"},{"id":"ref-for-keyframe\u2461"},{"id":"ref-for-keyframe\u2462"},{"id":"ref-for-keyframe\u2463"},{"id":"ref-for-keyframe\u2464"},{"id":"ref-for-keyframe\u2465"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-keyframe\u2466"},{"id":"ref-for-keyframe\u2467"},{"id":"ref-for-keyframe\u2468"},{"id":"ref-for-keyframe\u2460\u24ea"},{"id":"ref-for-keyframe\u2460\u2460"},{"id":"ref-for-keyframe\u2460\u2461"},{"id":"ref-for-keyframe\u2460\u2462"},{"id":"ref-for-keyframe\u2460\u2463"},{"id":"ref-for-keyframe\u2460\u2464"},{"id":"ref-for-keyframe\u2460\u2465"},{"id":"ref-for-keyframe\u2460\u2466"},{"id":"ref-for-keyframe\u2460\u2467"},{"id":"ref-for-keyframe\u2460\u2468"},{"id":"ref-for-keyframe\u2461\u24ea"},{"id":"ref-for-keyframe\u2461\u2460"},{"id":"ref-for-keyframe\u2461\u2461"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-keyframe\u2461\u2462"},{"id":"ref-for-keyframe\u2461\u2463"},{"id":"ref-for-keyframe\u2461\u2464"},{"id":"ref-for-keyframe\u2461\u2465"},{"id":"ref-for-keyframe\u2461\u2466"},{"id":"ref-for-keyframe\u2461\u2467"},{"id":"ref-for-keyframe\u2461\u2468"},{"id":"ref-for-keyframe\u2462\u24ea"},{"id":"ref-for-keyframe\u2462\u2460"},{"id":"ref-for-keyframe\u2462\u2461"},{"id":"ref-for-keyframe\u2462\u2462"},{"id":"ref-for-keyframe\u2462\u2463"},{"id":"ref-for-keyframe\u2462\u2464"},{"id":"ref-for-keyframe\u2462\u2465"},{"id":"ref-for-keyframe\u2462\u2466"},{"id":"ref-for-keyframe\u2462\u2467"},{"id":"ref-for-keyframe\u2462\u2468"},{"id":"ref-for-keyframe\u2463\u24ea"},{"id":"ref-for-keyframe\u2463\u2460"},{"id":"ref-for-keyframe\u2463\u2461"},{"id":"ref-for-keyframe\u2463\u2462"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-keyframe\u2463\u2463"},{"id":"ref-for-keyframe\u2463\u2464"},{"id":"ref-for-keyframe\u2463\u2465"},{"id":"ref-for-keyframe\u2463\u2466"},{"id":"ref-for-keyframe\u2463\u2467"},{"id":"ref-for-keyframe\u2463\u2468"},{"id":"ref-for-keyframe\u2464\u24ea"},{"id":"ref-for-keyframe\u2464\u2460"},{"id":"ref-for-keyframe\u2464\u2461"},{"id":"ref-for-keyframe\u2464\u2462"},{"id":"ref-for-keyframe\u2464\u2463"},{"id":"ref-for-keyframe\u2464\u2464"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-keyframe\u2464\u2465"},{"id":"ref-for-keyframe\u2464\u2466"},{"id":"ref-for-keyframe\u2464\u2467"},{"id":"ref-for-keyframe\u2464\u2468"},{"id":"ref-for-keyframe\u2465\u24ea"},{"id":"ref-for-keyframe\u2465\u2460"},{"id":"ref-for-keyframe\u2465\u2461"},{"id":"ref-for-keyframe\u2465\u2462"},{"id":"ref-for-keyframe\u2465\u2463"},{"id":"ref-for-keyframe\u2465\u2464"},{"id":"ref-for-keyframe\u2465\u2465"},{"id":"ref-for-keyframe\u2465\u2466"},{"id":"ref-for-keyframe\u2465\u2467"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-keyframe\u2465\u2468"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"},{"refs":[{"id":"ref-for-keyframe\u2466\u24ea"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"},{"refs":[{"id":"ref-for-keyframe\u2466\u2460"}],"title":"6.8. The Animatable interface mixin"}],"url":"#keyframe"}, "keyframe-effect": {"dfnID":"keyframe-effect","dfnText":"Keyframe effects","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframe-effect"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-keyframe-effect\u2460"}],"title":"4.6.1. Types of animation effects"},{"refs":[{"id":"ref-for-keyframe-effect\u2461"}],"title":"4.6.11. Easing (effect timing transformations)"},{"refs":[{"id":"ref-for-keyframe-effect\u2462"},{"id":"ref-for-keyframe-effect\u2463"},{"id":"ref-for-keyframe-effect\u2464"},{"id":"ref-for-keyframe-effect\u2465"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-keyframe-effect\u2466"},{"id":"ref-for-keyframe-effect\u2467"},{"id":"ref-for-keyframe-effect\u2468"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-keyframe-effect\u2460\u24ea"},{"id":"ref-for-keyframe-effect\u2460\u2460"},{"id":"ref-for-keyframe-effect\u2460\u2461"},{"id":"ref-for-keyframe-effect\u2460\u2462"},{"id":"ref-for-keyframe-effect\u2460\u2463"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-keyframe-effect\u2460\u2464"},{"id":"ref-for-keyframe-effect\u2460\u2465"},{"id":"ref-for-keyframe-effect\u2460\u2466"},{"id":"ref-for-keyframe-effect\u2460\u2467"},{"id":"ref-for-keyframe-effect\u2460\u2468"},{"id":"ref-for-keyframe-effect\u2461\u24ea"},{"id":"ref-for-keyframe-effect\u2461\u2460"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-keyframe-effect\u2461\u2461"},{"id":"ref-for-keyframe-effect\u2461\u2462"},{"id":"ref-for-keyframe-effect\u2461\u2463"}],"title":"5.4.2. The effect stack"},{"refs":[{"id":"ref-for-keyframe-effect\u2461\u2464"},{"id":"ref-for-keyframe-effect\u2461\u2465"},{"id":"ref-for-keyframe-effect\u2461\u2466"},{"id":"ref-for-keyframe-effect\u2461\u2467"},{"id":"ref-for-keyframe-effect\u2461\u2468"}],"title":"5.4.3. Calculating the result of an effect stack"},{"refs":[{"id":"ref-for-keyframe-effect\u2462\u24ea"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-keyframe-effect\u2462\u2460"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-keyframe-effect\u2462\u2461"},{"id":"ref-for-keyframe-effect\u2462\u2462"},{"id":"ref-for-keyframe-effect\u2462\u2463"},{"id":"ref-for-keyframe-effect\u2462\u2464"},{"id":"ref-for-keyframe-effect\u2462\u2465"},{"id":"ref-for-keyframe-effect\u2462\u2466"},{"id":"ref-for-keyframe-effect\u2462\u2467"},{"id":"ref-for-keyframe-effect\u2462\u2468"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-keyframe-effect\u2463\u24ea"},{"id":"ref-for-keyframe-effect\u2463\u2460"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-keyframe-effect\u2463\u2461"},{"id":"ref-for-keyframe-effect\u2463\u2462"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#keyframe-effect"}, "keyframe-effect-effect-target": {"dfnID":"keyframe-effect-effect-target","dfnText":"effect target","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframe-effect-effect-target"},{"id":"ref-for-keyframe-effect-effect-target\u2460"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2461"},{"id":"ref-for-keyframe-effect-effect-target\u2462"},{"id":"ref-for-keyframe-effect-effect-target\u2463"},{"id":"ref-for-keyframe-effect-effect-target\u2464"}],"title":"5.3. Keyframe effects"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2465"},{"id":"ref-for-keyframe-effect-effect-target\u2466"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2467"},{"id":"ref-for-keyframe-effect-effect-target\u2468"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2460\u24ea"},{"id":"ref-for-keyframe-effect-effect-target\u2460\u2460"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2460\u2461"},{"id":"ref-for-keyframe-effect-effect-target\u2460\u2462"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2460\u2463"},{"id":"ref-for-keyframe-effect-effect-target\u2460\u2464"},{"id":"ref-for-keyframe-effect-effect-target\u2460\u2465"},{"id":"ref-for-keyframe-effect-effect-target\u2460\u2466"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2460\u2467"},{"id":"ref-for-keyframe-effect-effect-target\u2460\u2468"},{"id":"ref-for-keyframe-effect-effect-target\u2461\u24ea"},{"id":"ref-for-keyframe-effect-effect-target\u2461\u2460"},{"id":"ref-for-keyframe-effect-effect-target\u2461\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-keyframe-effect-effect-target\u2461\u2462"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"}],"url":"#keyframe-effect-effect-target"}, "keyframe-offset": {"dfnID":"keyframe-offset","dfnText":"offset of a keyframe","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframe-offset"},{"id":"ref-for-keyframe-offset\u2460"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-keyframe-offset\u2461"},{"id":"ref-for-keyframe-offset\u2462"},{"id":"ref-for-keyframe-offset\u2463"},{"id":"ref-for-keyframe-offset\u2464"}],"title":"5.3.3. Calculating computed keyframes"},{"refs":[{"id":"ref-for-keyframe-offset\u2465"},{"id":"ref-for-keyframe-offset\u2466"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-keyframe-offset\u2467"},{"id":"ref-for-keyframe-offset\u2468"},{"id":"ref-for-keyframe-offset\u2460\u24ea"},{"id":"ref-for-keyframe-offset\u2460\u2460"},{"id":"ref-for-keyframe-offset\u2460\u2461"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#keyframe-offset"}, "keyframe-specific-composite-operation": {"dfnID":"keyframe-specific-composite-operation","dfnText":"keyframe-specific composite operation","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframe-specific-composite-operation"}],"title":"5.3.1. Keyframes"},{"refs":[{"id":"ref-for-keyframe-specific-composite-operation\u2460"},{"id":"ref-for-keyframe-specific-composite-operation\u2461"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-keyframe-specific-composite-operation\u2462"},{"id":"ref-for-keyframe-specific-composite-operation\u2463"},{"id":"ref-for-keyframe-specific-composite-operation\u2464"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-keyframe-specific-composite-operation\u2465"}],"title":"6.6.4. The KeyframeEffectOptions dictionary"}],"url":"#keyframe-specific-composite-operation"}, "keyframe-specific-easing-function": {"dfnID":"keyframe-specific-easing-function","dfnText":"keyframe-specific easing function","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframe-specific-easing-function"}],"title":"4.6.11. Easing (effect timing transformations)"}],"url":"#keyframe-specific-easing-function"}, "keyframeeffect": {"dfnID":"keyframeeffect","dfnText":"KeyframeEffect","external":false,"refSections":[{"refs":[{"id":"ref-for-keyframeeffect"},{"id":"ref-for-keyframeeffect\u2460"},{"id":"ref-for-keyframeeffect\u2461"},{"id":"ref-for-keyframeeffect\u2462"},{"id":"ref-for-keyframeeffect\u2463"},{"id":"ref-for-keyframeeffect\u2464"},{"id":"ref-for-keyframeeffect\u2465"},{"id":"ref-for-keyframeeffect\u2466"},{"id":"ref-for-keyframeeffect\u2467"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-keyframeeffect\u2468"},{"id":"ref-for-keyframeeffect\u2460\u24ea"},{"id":"ref-for-keyframeeffect\u2460\u2460"}],"title":"6.6.1. Creating a new KeyframeEffect object"},{"refs":[{"id":"ref-for-keyframeeffect\u2460\u2461"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-keyframeeffect\u2460\u2462"},{"id":"ref-for-keyframeeffect\u2460\u2463"},{"id":"ref-for-keyframeeffect\u2460\u2464"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-keyframeeffect\u2460\u2465"}],"title":"6.13. Model liveness"}],"url":"#keyframeeffect"}, "local-time": {"dfnID":"local-time","dfnText":"local time","external":false,"refSections":[{"refs":[{"id":"ref-for-local-time"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-local-time\u2460"},{"id":"ref-for-local-time\u2461"}],"title":"4.6.3. Local time"},{"refs":[{"id":"ref-for-local-time\u2462"},{"id":"ref-for-local-time\u2463"}],"title":"4.6.4. Time spaces"},{"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"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-local-time\u2460\u2465"},{"id":"ref-for-local-time\u2460\u2466"},{"id":"ref-for-local-time\u2460\u2467"},{"id":"ref-for-local-time\u2460\u2468"},{"id":"ref-for-local-time\u2461\u24ea"}],"title":"4.7.1. Overview"},{"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"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-local-time\u2461\u2465"},{"id":"ref-for-local-time\u2461\u2466"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#local-time"}, "local-time-space": {"dfnID":"local-time-space","dfnText":"local time space","external":false,"refSections":[],"url":"#local-time-space"}, "loosely-sorted-by-offset": {"dfnID":"loosely-sorted-by-offset","dfnText":"loosely sorted by offset","external":false,"refSections":[{"refs":[{"id":"ref-for-loosely-sorted-by-offset"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#loosely-sorted-by-offset"}, "monotonically-increasing-timeline": {"dfnID":"monotonically-increasing-timeline","dfnText":"monotonically increasing","external":false,"refSections":[{"refs":[{"id":"ref-for-monotonically-increasing-timeline"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2460"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2461"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2462"},{"id":"ref-for-monotonically-increasing-timeline\u2463"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2464"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2465"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-monotonically-increasing-timeline\u2466"}],"title":"5.5.2. Removing replaced animations"}],"url":"#monotonically-increasing-timeline"}, "neutral-value-for-composition": {"dfnID":"neutral-value-for-composition","dfnText":"neutral value for composition","external":false,"refSections":[{"refs":[{"id":"ref-for-neutral-value-for-composition"},{"id":"ref-for-neutral-value-for-composition\u2460"}],"title":"5.3.4. The effect value of a keyframe effect"}],"url":"#neutral-value-for-composition"}, "not-animatable": {"dfnID":"not-animatable","dfnText":"not animatable","external":false,"refSections":[{"refs":[{"id":"ref-for-not-animatable"},{"id":"ref-for-not-animatable\u2460"}],"title":"5.2. Animating properties"},{"refs":[{"id":"ref-for-not-animatable\u2461"}],"title":"5.3.4. The effect value of a keyframe effect"}],"url":"#not-animatable"}, "offsetk": {"dfnID":"offsetk","dfnText":"offsetk","external":false,"refSections":[{"refs":[{"id":"ref-for-offsetk"},{"id":"ref-for-offsetk\u2460"},{"id":"ref-for-offsetk\u2461"}],"title":"5.3.3. Calculating computed keyframes"}],"url":"#offsetk"}, "origin-time": {"dfnID":"origin-time","dfnText":"origin time","external":false,"refSections":[{"refs":[{"id":"ref-for-origin-time"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-origin-time\u2460"}],"title":"4.3.1.1. The default document timeline"},{"refs":[{"id":"ref-for-origin-time\u2461"}],"title":"6.3. The DocumentTimeline interface"}],"url":"#origin-time"}, "overall-progress": {"dfnID":"overall-progress","dfnText":"overall progress","external":false,"refSections":[{"refs":[{"id":"ref-for-overall-progress"},{"id":"ref-for-overall-progress\u2460"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-overall-progress\u2461"},{"id":"ref-for-overall-progress\u2462"},{"id":"ref-for-overall-progress\u2463"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-overall-progress\u2464"},{"id":"ref-for-overall-progress\u2465"}],"title":"4.7.5. Calculating the current iteration index"}],"url":"#overall-progress"}, "pause-an-animation": {"dfnID":"pause-an-animation","dfnText":"pause an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-pause-an-animation"}],"title":"6.4. The Animation interface"}],"url":"#pause-an-animation"}, "pending-animation-event-queue": {"dfnID":"pending-animation-event-queue","dfnText":"pending animation event queue","external":false,"refSections":[{"refs":[{"id":"ref-for-pending-animation-event-queue"},{"id":"ref-for-pending-animation-event-queue\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-pending-animation-event-queue\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-pending-animation-event-queue\u2462"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-pending-animation-event-queue\u2463"}],"title":"5.5.2. Removing replaced animations"}],"url":"#pending-animation-event-queue"}, "pending-pause-task": {"dfnID":"pending-pause-task","dfnText":"pending pause task","external":false,"refSections":[{"refs":[{"id":"ref-for-pending-pause-task"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2460"},{"id":"ref-for-pending-pause-task\u2461"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2462"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2463"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-pending-pause-task\u2464"},{"id":"ref-for-pending-pause-task\u2465"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2466"},{"id":"ref-for-pending-pause-task\u2467"},{"id":"ref-for-pending-pause-task\u2468"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2460\u24ea"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-pending-pause-task\u2460\u2460"},{"id":"ref-for-pending-pause-task\u2460\u2461"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2460\u2462"},{"id":"ref-for-pending-pause-task\u2460\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2460\u2464"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-pending-pause-task\u2460\u2465"},{"id":"ref-for-pending-pause-task\u2460\u2466"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-pending-pause-task\u2460\u2467"}],"title":"6.4. The Animation interface"}],"url":"#pending-pause-task"}, "pending-play-task": {"dfnID":"pending-play-task","dfnText":"pending play task","external":false,"refSections":[{"refs":[{"id":"ref-for-pending-play-task"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2460"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2461"},{"id":"ref-for-pending-play-task\u2462"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-pending-play-task\u2463"},{"id":"ref-for-pending-play-task\u2464"},{"id":"ref-for-pending-play-task\u2465"},{"id":"ref-for-pending-play-task\u2466"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2467"},{"id":"ref-for-pending-play-task\u2468"},{"id":"ref-for-pending-play-task\u2460\u24ea"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2460\u2460"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-pending-play-task\u2460\u2461"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2460\u2462"},{"id":"ref-for-pending-play-task\u2460\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2460\u2464"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-pending-play-task\u2460\u2465"},{"id":"ref-for-pending-play-task\u2460\u2466"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-pending-play-task\u2460\u2467"}],"title":"6.4. The Animation interface"}],"url":"#pending-play-task"}, "pending-playback-rate": {"dfnID":"pending-playback-rate","dfnText":"pending playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-pending-playback-rate"},{"id":"ref-for-pending-playback-rate\u2460"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-pending-playback-rate\u2461"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-pending-playback-rate\u2462"},{"id":"ref-for-pending-playback-rate\u2463"},{"id":"ref-for-pending-playback-rate\u2464"},{"id":"ref-for-pending-playback-rate\u2465"},{"id":"ref-for-pending-playback-rate\u2466"},{"id":"ref-for-pending-playback-rate\u2467"},{"id":"ref-for-pending-playback-rate\u2468"},{"id":"ref-for-pending-playback-rate\u2460\u24ea"},{"id":"ref-for-pending-playback-rate\u2460\u2460"},{"id":"ref-for-pending-playback-rate\u2460\u2461"},{"id":"ref-for-pending-playback-rate\u2460\u2462"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-pending-playback-rate\u2460\u2463"},{"id":"ref-for-pending-playback-rate\u2460\u2464"},{"id":"ref-for-pending-playback-rate\u2460\u2465"}],"title":"4.5.16. Reversing an animation"}],"url":"#pending-playback-rate"}, "persisted-replace-state": {"dfnID":"persisted-replace-state","dfnText":"persisted","external":false,"refSections":[{"refs":[{"id":"ref-for-persisted-replace-state"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-persisted-replace-state\u2460"}],"title":"6.4.2. The AnimationReplaceState enumeration"}],"url":"#persisted-replace-state"}, "play-an-animation": {"dfnID":"play-an-animation","dfnText":"play an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-play-an-animation"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-play-an-animation\u2460"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-play-an-animation\u2461"},{"id":"ref-for-play-an-animation\u2462"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-play-an-animation\u2463"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-play-an-animation\u2464"}],"title":"6.8. The Animatable interface mixin"}],"url":"#play-an-animation"}, "play-state-finished": {"dfnID":"play-state-finished","dfnText":"finished","external":false,"refSections":[{"refs":[{"id":"ref-for-play-state-finished"}],"title":"4.5.2. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-play-state-finished\u2460"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-play-state-finished\u2461"}],"title":"4.5.11. The current finished promise"},{"refs":[{"id":"ref-for-play-state-finished\u2462"},{"id":"ref-for-play-state-finished\u2463"},{"id":"ref-for-play-state-finished\u2464"},{"id":"ref-for-play-state-finished\u2465"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-play-state-finished\u2466"},{"id":"ref-for-play-state-finished\u2467"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-play-state-finished\u2468"},{"id":"ref-for-play-state-finished\u2460\u24ea"},{"id":"ref-for-play-state-finished\u2460\u2460"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-play-state-finished\u2460\u2461"}],"title":"4.5.18.3. Types of animation playback events"},{"refs":[{"id":"ref-for-play-state-finished\u2460\u2462"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-play-state-finished\u2460\u2463"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-play-state-finished\u2460\u2464"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#play-state-finished"}, "play-state-idle": {"dfnID":"play-state-idle","dfnText":"idle","external":false,"refSections":[{"refs":[{"id":"ref-for-play-state-idle"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-play-state-idle\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-play-state-idle\u2461"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-play-state-idle\u2462"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-play-state-idle\u2463"}],"title":"4.5.18.3. Types of animation playback events"},{"refs":[{"id":"ref-for-play-state-idle\u2464"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-play-state-idle\u2465"}],"title":"6.4.1. The AnimationPlayState enumeration"},{"refs":[{"id":"ref-for-play-state-idle\u2466"}],"title":"6.12. The AnimationPlaybackEvent interface"}],"url":"#play-state-idle"}, "play-state-paused": {"dfnID":"play-state-paused","dfnText":"paused","external":false,"refSections":[{"refs":[{"id":"ref-for-play-state-paused"},{"id":"ref-for-play-state-paused\u2460"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-play-state-paused\u2461"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-play-state-paused\u2462"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-play-state-paused\u2463"},{"id":"ref-for-play-state-paused\u2464"},{"id":"ref-for-play-state-paused\u2465"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-play-state-paused\u2466"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#play-state-paused"}, "play-state-running": {"dfnID":"play-state-running","dfnText":"running","external":false,"refSections":[{"refs":[{"id":"ref-for-play-state-running"}],"title":"4.5.7. The current ready promise"},{"refs":[{"id":"ref-for-play-state-running\u2460"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-play-state-running\u2461"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-play-state-running\u2462"}],"title":"6.4.1. The AnimationPlayState enumeration"}],"url":"#play-state-running"}, "playback-control": {"dfnID":"playback-control","dfnText":"playback control","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-control"}],"title":"1.1. Use cases"}],"url":"#playback-control"}, "playback-direction": {"dfnID":"playback-direction","dfnText":"playback direction","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-direction"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-playback-direction\u2460"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-playback-direction\u2461"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-playback-direction\u2462"},{"id":"ref-for-playback-direction\u2463"},{"id":"ref-for-playback-direction\u2464"},{"id":"ref-for-playback-direction\u2465"}],"title":"4.7.6. Calculating the directed progress"},{"refs":[{"id":"ref-for-playback-direction\u2466"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-playback-direction\u2467"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-playback-direction\u2468"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#playback-direction"}, "playback-direction-alternate": {"dfnID":"playback-direction-alternate","dfnText":"alternate","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-direction-alternate"}],"title":"4.7.6. Calculating the directed progress"}],"url":"#playback-direction-alternate"}, "playback-direction-alternate-reverse": {"dfnID":"playback-direction-alternate-reverse","dfnText":"alternate-reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-direction-alternate-reverse"},{"id":"ref-for-playback-direction-alternate-reverse\u2460"}],"title":"4.7.6. Calculating the directed progress"}],"url":"#playback-direction-alternate-reverse"}, "playback-direction-normal": {"dfnID":"playback-direction-normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-direction-normal"}],"title":"4.7.6. Calculating the directed progress"}],"url":"#playback-direction-normal"}, "playback-direction-reverse": {"dfnID":"playback-direction-reverse","dfnText":"reverse","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-direction-reverse"}],"title":"4.7.6. Calculating the directed progress"}],"url":"#playback-direction-reverse"}, "playback-rate": {"dfnID":"playback-rate","dfnText":"playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-playback-rate"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-playback-rate\u2460"},{"id":"ref-for-playback-rate\u2461"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-playback-rate\u2462"},{"id":"ref-for-playback-rate\u2463"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-playback-rate\u2464"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-playback-rate\u2465"},{"id":"ref-for-playback-rate\u2466"},{"id":"ref-for-playback-rate\u2467"},{"id":"ref-for-playback-rate\u2468"},{"id":"ref-for-playback-rate\u2460\u24ea"},{"id":"ref-for-playback-rate\u2460\u2460"},{"id":"ref-for-playback-rate\u2460\u2461"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-playback-rate\u2460\u2462"},{"id":"ref-for-playback-rate\u2460\u2463"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-playback-rate\u2460\u2464"},{"id":"ref-for-playback-rate\u2460\u2465"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-playback-rate\u2460\u2466"},{"id":"ref-for-playback-rate\u2460\u2467"},{"id":"ref-for-playback-rate\u2460\u2468"},{"id":"ref-for-playback-rate\u2461\u24ea"},{"id":"ref-for-playback-rate\u2461\u2460"},{"id":"ref-for-playback-rate\u2461\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-playback-rate\u2461\u2462"},{"id":"ref-for-playback-rate\u2461\u2463"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-playback-rate\u2461\u2464"},{"id":"ref-for-playback-rate\u2461\u2465"},{"id":"ref-for-playback-rate\u2461\u2466"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-playback-rate\u2461\u2467"},{"id":"ref-for-playback-rate\u2461\u2468"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-playback-rate\u2462\u24ea"},{"id":"ref-for-playback-rate\u2462\u2460"},{"id":"ref-for-playback-rate\u2462\u2461"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-playback-rate\u2462\u2462"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-playback-rate\u2462\u2463"},{"id":"ref-for-playback-rate\u2462\u2464"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-playback-rate\u2462\u2465"},{"id":"ref-for-playback-rate\u2462\u2466"},{"id":"ref-for-playback-rate\u2462\u2467"},{"id":"ref-for-playback-rate\u2462\u2468"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-playback-rate\u2463\u24ea"},{"id":"ref-for-playback-rate\u2463\u2460"},{"id":"ref-for-playback-rate\u2463\u2461"},{"id":"ref-for-playback-rate\u2463\u2462"},{"id":"ref-for-playback-rate\u2463\u2463"},{"id":"ref-for-playback-rate\u2463\u2464"},{"id":"ref-for-playback-rate\u2463\u2465"}],"title":"6.4. The Animation interface"}],"url":"#playback-rate"}, "previous-current-time": {"dfnID":"previous-current-time","dfnText":"previous current time","external":false,"refSections":[{"refs":[{"id":"ref-for-previous-current-time"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-previous-current-time\u2460"},{"id":"ref-for-previous-current-time\u2461"},{"id":"ref-for-previous-current-time\u2462"},{"id":"ref-for-previous-current-time\u2463"},{"id":"ref-for-previous-current-time\u2464"}],"title":"4.5.12. Updating the finished state"}],"url":"#previous-current-time"}, "process-a-keyframe-like-object": {"dfnID":"process-a-keyframe-like-object","dfnText":"process a keyframe-like object","external":false,"refSections":[{"refs":[{"id":"ref-for-process-a-keyframe-like-object"},{"id":"ref-for-process-a-keyframe-like-object\u2460"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#process-a-keyframe-like-object"}, "process-a-keyframes-argument": {"dfnID":"process-a-keyframes-argument","dfnText":"process a keyframes argument","external":false,"refSections":[{"refs":[{"id":"ref-for-process-a-keyframes-argument"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-process-a-keyframes-argument\u2460"}],"title":"6.6.3. Processing a keyframes argument"}],"url":"#process-a-keyframes-argument"}, "ready": {"dfnID":"ready","dfnText":"ready","external":false,"refSections":[{"refs":[{"id":"ref-for-ready"},{"id":"ref-for-ready\u2460"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-ready\u2461"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-ready\u2462"},{"id":"ref-for-ready\u2463"},{"id":"ref-for-ready\u2464"}],"title":"4.5.8. Playing an animation"}],"url":"#ready"}, "relevant-animations": {"dfnID":"relevant-animations","dfnText":"relevant animations","external":false,"refSections":[{"refs":[{"id":"ref-for-relevant-animations"}],"title":"6.8. The Animatable interface mixin"}],"url":"#relevant-animations"}, "relevant-animations-for-a-subtree": {"dfnID":"relevant-animations-for-a-subtree","dfnText":"relevant animations for a subtree","external":false,"refSections":[{"refs":[{"id":"ref-for-relevant-animations-for-a-subtree"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-relevant-animations-for-a-subtree\u2460"}],"title":"6.10. Extensions to the DocumentOrShadowRoot interface mixin"}],"url":"#relevant-animations-for-a-subtree"}, "remove-event": {"dfnID":"remove-event","dfnText":"remove","external":false,"refSections":[{"refs":[{"id":"ref-for-remove-event"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-remove-event\u2460"}],"title":"6.4. The Animation interface"}],"url":"#remove-event"}, "remove-replaced-animations": {"dfnID":"remove-replaced-animations","dfnText":"remove replaced animations","external":false,"refSections":[{"refs":[{"id":"ref-for-remove-replaced-animations"}],"title":"4.4. Animation Frames"}],"url":"#remove-replaced-animations"}, "removed-replace-state": {"dfnID":"removed-replace-state","dfnText":"removed","external":false,"refSections":[{"refs":[{"id":"ref-for-removed-replace-state"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-removed-replace-state\u2460"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-removed-replace-state\u2461"},{"id":"ref-for-removed-replace-state\u2462"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-removed-replace-state\u2463"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-removed-replace-state\u2464"},{"id":"ref-for-removed-replace-state\u2465"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-removed-replace-state\u2466"}],"title":"6.4.2. The AnimationReplaceState enumeration"}],"url":"#removed-replace-state"}, "repeatable-list": {"dfnID":"repeatable-list","dfnText":"repeatable list","external":false,"refSections":[],"url":"#repeatable-list"}, "replace-state": {"dfnID":"replace-state","dfnText":"replace state","external":false,"refSections":[{"refs":[{"id":"ref-for-replace-state"}],"title":"4.6.7. Relevant animations"},{"refs":[{"id":"ref-for-replace-state\u2460"},{"id":"ref-for-replace-state\u2461"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-replace-state\u2462"},{"id":"ref-for-replace-state\u2463"},{"id":"ref-for-replace-state\u2464"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-replace-state\u2465"}],"title":"5.6. Side effects of animation"},{"refs":[{"id":"ref-for-replace-state\u2466"},{"id":"ref-for-replace-state\u2467"},{"id":"ref-for-replace-state\u2468"}],"title":"6.4. The Animation interface"}],"url":"#replace-state"}, "replaceable-animation": {"dfnID":"replaceable-animation","dfnText":"replaceable","external":false,"refSections":[{"refs":[{"id":"ref-for-replaceable-animation"},{"id":"ref-for-replaceable-animation\u2460"}],"title":"5.5.2. Removing replaced animations"}],"url":"#replaceable-animation"}, "reverse-an-animation": {"dfnID":"reverse-an-animation","dfnText":"reverse an animation","external":false,"refSections":[{"refs":[{"id":"ref-for-reverse-an-animation"}],"title":"6.4. The Animation interface"}],"url":"#reverse-an-animation"}, "scheduled-event-time": {"dfnID":"scheduled-event-time","dfnText":"scheduled event time","external":false,"refSections":[{"refs":[{"id":"ref-for-scheduled-event-time"},{"id":"ref-for-scheduled-event-time\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-scheduled-event-time\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-scheduled-event-time\u2462"},{"id":"ref-for-scheduled-event-time\u2463"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-scheduled-event-time\u2464"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-scheduled-event-time\u2465"}],"title":"5.5.2. Removing replaced animations"}],"url":"#scheduled-event-time"}, "seamlessly-update-the-playback-rate": {"dfnID":"seamlessly-update-the-playback-rate","dfnText":"seamlessly update the playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-seamlessly-update-the-playback-rate"}],"title":"6.4. The Animation interface"}],"url":"#seamlessly-update-the-playback-rate"}, "seek": {"dfnID":"seek","dfnText":"seek","external":false,"refSections":[{"refs":[{"id":"ref-for-seek"},{"id":"ref-for-seek\u2460"}],"title":"4.5.10. Reaching the end"},{"refs":[{"id":"ref-for-seek\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-seek\u2462"},{"id":"ref-for-seek\u2463"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-seek\u2464"}],"title":"6.13. Model liveness"}],"url":"#seek"}, "set-the-playback-rate": {"dfnID":"set-the-playback-rate","dfnText":"set the playback rate","external":false,"refSections":[{"refs":[{"id":"ref-for-set-the-playback-rate"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-set-the-playback-rate\u2460"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-set-the-playback-rate\u2461"}],"title":"6.4. The Animation interface"}],"url":"#set-the-playback-rate"}, "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":"2. Specification conventions"},{"refs":[{"id":"ref-for-set-the-start-time\u2460"}],"title":"6.4. The Animation interface"}],"url":"#set-the-start-time"}, "simple-iteration-progress": {"dfnID":"simple-iteration-progress","dfnText":"simple iteration progress","external":false,"refSections":[{"refs":[{"id":"ref-for-simple-iteration-progress"},{"id":"ref-for-simple-iteration-progress\u2460"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-simple-iteration-progress\u2461"}],"title":"4.7.5. Calculating the current iteration index"},{"refs":[{"id":"ref-for-simple-iteration-progress\u2462"},{"id":"ref-for-simple-iteration-progress\u2463"},{"id":"ref-for-simple-iteration-progress\u2464"},{"id":"ref-for-simple-iteration-progress\u2465"}],"title":"4.7.6. Calculating the directed progress"}],"url":"#simple-iteration-progress"}, "start-delay": {"dfnID":"start-delay","dfnText":"start delay","external":false,"refSections":[{"refs":[{"id":"ref-for-start-delay"}],"title":"4.6. Animation effects"},{"refs":[{"id":"ref-for-start-delay\u2460"},{"id":"ref-for-start-delay\u2461"},{"id":"ref-for-start-delay\u2462"}],"title":"4.6.5. The active interval"},{"refs":[{"id":"ref-for-start-delay\u2463"},{"id":"ref-for-start-delay\u2464"}],"title":"4.6.5.3. The end delay and animation effect end time"},{"refs":[{"id":"ref-for-start-delay\u2465"},{"id":"ref-for-start-delay\u2466"},{"id":"ref-for-start-delay\u2467"},{"id":"ref-for-start-delay\u2468"},{"id":"ref-for-start-delay\u2460\u24ea"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-start-delay\u2460\u2460"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-start-delay\u2460\u2461"},{"id":"ref-for-start-delay\u2460\u2462"},{"id":"ref-for-start-delay\u2460\u2463"},{"id":"ref-for-start-delay\u2460\u2464"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-start-delay\u2460\u2465"}],"title":"6.5.1. The EffectTiming and OptionalEffectTiming dictionaries"},{"refs":[{"id":"ref-for-start-delay\u2460\u2466"}],"title":"6.5.4. Updating the timing of an AnimationEffect"},{"refs":[{"id":"ref-for-start-delay\u2460\u2467"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-start-delay\u2460\u2468"}],"title":"6.6.1. Creating a new KeyframeEffect object"}],"url":"#start-delay"}, "target-property": {"dfnID":"target-property","dfnText":"target properties","external":false,"refSections":[{"refs":[{"id":"ref-for-target-property"},{"id":"ref-for-target-property\u2460"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-target-property\u2461"}],"title":"5. Animation model"},{"refs":[{"id":"ref-for-target-property\u2462"}],"title":"5.1. Introduction"},{"refs":[{"id":"ref-for-target-property\u2463"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-target-property\u2464"},{"id":"ref-for-target-property\u2465"},{"id":"ref-for-target-property\u2466"},{"id":"ref-for-target-property\u2467"}],"title":"5.4. Combining effects"},{"refs":[{"id":"ref-for-target-property\u2468"}],"title":"5.4.2. The effect stack"},{"refs":[{"id":"ref-for-target-property\u2460\u24ea"},{"id":"ref-for-target-property\u2460\u2460"},{"id":"ref-for-target-property\u2460\u2461"}],"title":"5.4.5. Applying the composited result"},{"refs":[{"id":"ref-for-target-property\u2460\u2462"}],"title":"5.5.1. Replace state"},{"refs":[{"id":"ref-for-target-property\u2460\u2463"},{"id":"ref-for-target-property\u2460\u2464"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-target-property\u2460\u2465"},{"id":"ref-for-target-property\u2460\u2466"}],"title":"6.4. The Animation interface"}],"url":"#target-property"}, "time-spaces": {"dfnID":"time-spaces","dfnText":"time spaces","external":false,"refSections":[{"refs":[{"id":"ref-for-time-spaces"},{"id":"ref-for-time-spaces\u2460"},{"id":"ref-for-time-spaces\u2461"}],"title":"4.6.4. Time spaces"}],"url":"#time-spaces"}, "time-value": {"dfnID":"time-value","dfnText":"time value","external":false,"refSections":[{"refs":[{"id":"ref-for-time-value"}],"title":"4. Timing model"},{"refs":[{"id":"ref-for-time-value\u2460"}],"title":"4.1.1. Stateless"},{"refs":[{"id":"ref-for-time-value\u2461"},{"id":"ref-for-time-value\u2462"},{"id":"ref-for-time-value\u2463"},{"id":"ref-for-time-value\u2464"},{"id":"ref-for-time-value\u2465"}],"title":"4.2. Time values"},{"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"},{"id":"ref-for-time-value\u2460\u2461"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-time-value\u2460\u2462"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-time-value\u2460\u2463"},{"id":"ref-for-time-value\u2460\u2464"}],"title":"4.3.1.2. Relationship to wall-clock time"},{"refs":[{"id":"ref-for-time-value\u2460\u2465"},{"id":"ref-for-time-value\u2460\u2466"},{"id":"ref-for-time-value\u2460\u2467"},{"id":"ref-for-time-value\u2460\u2468"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-time-value\u2461\u24ea"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-time-value\u2461\u2460"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-time-value\u2461\u2461"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-time-value\u2461\u2462"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-time-value\u2461\u2463"},{"id":"ref-for-time-value\u2461\u2464"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-time-value\u2461\u2465"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-time-value\u2461\u2466"},{"id":"ref-for-time-value\u2461\u2467"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-time-value\u2461\u2468"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-time-value\u2462\u24ea"},{"id":"ref-for-time-value\u2462\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-time-value\u2462\u2461"},{"id":"ref-for-time-value\u2462\u2462"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-time-value\u2462\u2463"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-time-value\u2462\u2464"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-time-value\u2462\u2465"},{"id":"ref-for-time-value\u2462\u2466"},{"id":"ref-for-time-value\u2462\u2467"},{"id":"ref-for-time-value\u2462\u2468"},{"id":"ref-for-time-value\u2463\u24ea"},{"id":"ref-for-time-value\u2463\u2460"},{"id":"ref-for-time-value\u2463\u2461"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-time-value\u2463\u2462"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-time-value\u2463\u2463"},{"id":"ref-for-time-value\u2463\u2464"},{"id":"ref-for-time-value\u2463\u2465"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-time-value\u2463\u2466"}],"title":"6.1. Time values in the programming interface"},{"refs":[{"id":"ref-for-time-value\u2463\u2467"}],"title":"6.12. The AnimationPlaybackEvent interface"},{"refs":[{"id":"ref-for-time-value\u2463\u2468"},{"id":"ref-for-time-value\u2464\u24ea"}],"title":"8. Interaction with page display"},{"refs":[{"id":"ref-for-time-value\u2464\u2460"}],"title":"9.1. Precision of time values"}],"url":"#time-value"}, "timeline": {"dfnID":"timeline","dfnText":"timeline","external":false,"refSections":[{"refs":[{"id":"ref-for-timeline"},{"id":"ref-for-timeline\u2460"},{"id":"ref-for-timeline\u2461"},{"id":"ref-for-timeline\u2462"},{"id":"ref-for-timeline\u2463"},{"id":"ref-for-timeline\u2464"},{"id":"ref-for-timeline\u2465"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-timeline\u2466"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-timeline\u2467"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-timeline\u2468"},{"id":"ref-for-timeline\u2460\u24ea"},{"id":"ref-for-timeline\u2460\u2460"},{"id":"ref-for-timeline\u2460\u2461"},{"id":"ref-for-timeline\u2460\u2462"},{"id":"ref-for-timeline\u2460\u2463"},{"id":"ref-for-timeline\u2460\u2464"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-timeline\u2460\u2465"},{"id":"ref-for-timeline\u2460\u2466"},{"id":"ref-for-timeline\u2460\u2467"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-timeline\u2460\u2468"},{"id":"ref-for-timeline\u2461\u24ea"}],"title":"4.5.2. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-timeline\u2461\u2460"},{"id":"ref-for-timeline\u2461\u2461"},{"id":"ref-for-timeline\u2461\u2462"},{"id":"ref-for-timeline\u2461\u2463"},{"id":"ref-for-timeline\u2461\u2464"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-timeline\u2461\u2465"},{"id":"ref-for-timeline\u2461\u2466"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-timeline\u2461\u2467"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-timeline\u2461\u2468"},{"id":"ref-for-timeline\u2462\u24ea"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-timeline\u2462\u2460"},{"id":"ref-for-timeline\u2462\u2461"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-timeline\u2462\u2462"},{"id":"ref-for-timeline\u2462\u2463"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-timeline\u2462\u2464"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-timeline\u2462\u2465"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-timeline\u2462\u2466"},{"id":"ref-for-timeline\u2462\u2467"},{"id":"ref-for-timeline\u2462\u2468"}],"title":"4.5.15. Speed control"},{"refs":[{"id":"ref-for-timeline\u2463\u24ea"},{"id":"ref-for-timeline\u2463\u2460"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-timeline\u2463\u2461"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-timeline\u2463\u2462"},{"id":"ref-for-timeline\u2463\u2463"}],"title":"4.5.16. Reversing an animation"},{"refs":[{"id":"ref-for-timeline\u2463\u2464"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-timeline\u2463\u2465"},{"id":"ref-for-timeline\u2463\u2466"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-timeline\u2463\u2467"},{"id":"ref-for-timeline\u2463\u2468"},{"id":"ref-for-timeline\u2464\u24ea"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-timeline\u2464\u2460"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-timeline\u2464\u2461"},{"id":"ref-for-timeline\u2464\u2462"},{"id":"ref-for-timeline\u2464\u2463"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-timeline\u2464\u2464"}],"title":"6.2. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-timeline\u2464\u2465"},{"id":"ref-for-timeline\u2464\u2466"},{"id":"ref-for-timeline\u2464\u2467"}],"title":"6.4. The Animation interface"},{"refs":[{"id":"ref-for-timeline\u2464\u2468"}],"title":"6.8. The Animatable interface mixin"},{"refs":[{"id":"ref-for-timeline\u2465\u24ea"}],"title":"6.12. The AnimationPlaybackEvent interface"},{"refs":[{"id":"ref-for-timeline\u2465\u2460"}],"title":"6.13. Model liveness"},{"refs":[{"id":"ref-for-timeline\u2465\u2461"}],"title":"8. Interaction with page display"}],"url":"#timeline"}, "timeline-associated-with-a-document": {"dfnID":"timeline-associated-with-a-document","dfnText":"associated with a document","external":false,"refSections":[{"refs":[{"id":"ref-for-timeline-associated-with-a-document"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-timeline-associated-with-a-document\u2460"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-timeline-associated-with-a-document\u2461"}],"title":"4.5. Animations"}],"url":"#timeline-associated-with-a-document"}, "timeline-current-time": {"dfnID":"timeline-current-time","dfnText":"current time","external":false,"refSections":[{"refs":[{"id":"ref-for-timeline-current-time"},{"id":"ref-for-timeline-current-time\u2460"},{"id":"ref-for-timeline-current-time\u2461"},{"id":"ref-for-timeline-current-time\u2462"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-timeline-current-time\u2463"},{"id":"ref-for-timeline-current-time\u2464"},{"id":"ref-for-timeline-current-time\u2465"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-timeline-current-time\u2466"},{"id":"ref-for-timeline-current-time\u2467"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-timeline-current-time\u2468"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-timeline-current-time\u2460\u24ea"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-timeline-current-time\u2460\u2460"},{"id":"ref-for-timeline-current-time\u2460\u2461"}],"title":"5.5.2. Removing replaced animations"},{"refs":[{"id":"ref-for-timeline-current-time\u2460\u2462"}],"title":"6.2. The AnimationTimeline interface"},{"refs":[{"id":"ref-for-timeline-current-time\u2460\u2463"},{"id":"ref-for-timeline-current-time\u2460\u2464"}],"title":"6.13. Model liveness"}],"url":"#timeline-current-time"}, "timeline-time-to-origin-relative-time": {"dfnID":"timeline-time-to-origin-relative-time","dfnText":"convert\n a timeline time to an origin-relative time","external":false,"refSections":[{"refs":[{"id":"ref-for-timeline-time-to-origin-relative-time"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-timeline-time-to-origin-relative-time\u2460"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-timeline-time-to-origin-relative-time\u2461"},{"id":"ref-for-timeline-time-to-origin-relative-time\u2462"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-timeline-time-to-origin-relative-time\u2463"}],"title":"5.5.2. Removing replaced animations"}],"url":"#timeline-time-to-origin-relative-time"}, "timing-model-dfn": {"dfnID":"timing-model-dfn","dfnText":"timing model","external":false,"refSections":[{"refs":[{"id":"ref-for-timing-model-dfn"},{"id":"ref-for-timing-model-dfn\u2460"},{"id":"ref-for-timing-model-dfn\u2461"},{"id":"ref-for-timing-model-dfn\u2462"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-timing-model-dfn\u2463"}],"title":"4. Timing model"},{"refs":[{"id":"ref-for-timing-model-dfn\u2464"}],"title":"4.1.1. Stateless"}],"url":"#timing-model-dfn"}, "timing-nodes": {"dfnID":"timing-nodes","dfnText":"timing nodes","external":false,"refSections":[{"refs":[{"id":"ref-for-timing-nodes"}],"title":"4.2. Time values"},{"refs":[{"id":"ref-for-timing-nodes\u2460"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-timing-nodes\u2461"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-timing-nodes\u2462"}],"title":"4.6. Animation effects"}],"url":"#timing-nodes"}, "transformed-progress": {"dfnID":"transformed-progress","dfnText":"transformed progress","external":false,"refSections":[{"refs":[{"id":"ref-for-transformed-progress"},{"id":"ref-for-transformed-progress\u2460"}],"title":"4.7.1. Overview"},{"refs":[{"id":"ref-for-transformed-progress\u2461"}],"title":"4.7.8. Yielding the iteration progress"}],"url":"#transformed-progress"}, "underlying-value": {"dfnID":"underlying-value","dfnText":"underlying value","external":false,"refSections":[{"refs":[{"id":"ref-for-underlying-value"}],"title":"5.1. Introduction"},{"refs":[{"id":"ref-for-underlying-value\u2460"},{"id":"ref-for-underlying-value\u2461"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-underlying-value\u2462"},{"id":"ref-for-underlying-value\u2463"},{"id":"ref-for-underlying-value\u2464"}],"title":"5.4.3. Calculating the result of an effect stack"},{"refs":[{"id":"ref-for-underlying-value\u2465"},{"id":"ref-for-underlying-value\u2466"},{"id":"ref-for-underlying-value\u2467"},{"id":"ref-for-underlying-value\u2468"},{"id":"ref-for-underlying-value\u2460\u24ea"},{"id":"ref-for-underlying-value\u2460\u2460"}],"title":"5.4.4. Effect composition"},{"refs":[{"id":"ref-for-underlying-value\u2460\u2461"}],"title":"5.4.5. Applying the composited result"},{"refs":[{"id":"ref-for-underlying-value\u2460\u2462"}],"title":"6.6. The KeyframeEffect interface"},{"refs":[{"id":"ref-for-underlying-value\u2460\u2463"}],"title":"6.6.3. Processing a keyframes argument"},{"refs":[{"id":"ref-for-underlying-value\u2460\u2464"},{"id":"ref-for-underlying-value\u2460\u2465"},{"id":"ref-for-underlying-value\u2460\u2466"}],"title":"6.7. The CompositeOperation and CompositeOperationOrAuto enumerations"}],"url":"#underlying-value"}, "unresolved": {"dfnID":"unresolved","dfnText":"unresolved","external":false,"refSections":[{"refs":[{"id":"ref-for-unresolved"}],"title":"2. Specification conventions"},{"refs":[{"id":"ref-for-unresolved\u2460"},{"id":"ref-for-unresolved\u2461"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-unresolved\u2462"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-unresolved\u2463"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-unresolved\u2464"},{"id":"ref-for-unresolved\u2465"}],"title":"4.5. Animations"},{"refs":[{"id":"ref-for-unresolved\u2466"},{"id":"ref-for-unresolved\u2467"},{"id":"ref-for-unresolved\u2468"}],"title":"4.5.1. Calculating the current time of an animation"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea"},{"id":"ref-for-unresolved\u2460\u2460"}],"title":"4.5.2. Setting the timeline of an animation"},{"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"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-unresolved\u2460\u2467"},{"id":"ref-for-unresolved\u2460\u2468"},{"id":"ref-for-unresolved\u2461\u24ea"},{"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"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-unresolved\u2461\u2466"},{"id":"ref-for-unresolved\u2461\u2467"}],"title":"4.5.6. \nWaiting for the associated effect"},{"refs":[{"id":"ref-for-unresolved\u2461\u2468"},{"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"},{"id":"ref-for-unresolved\u2462\u2464"},{"id":"ref-for-unresolved\u2462\u2465"},{"id":"ref-for-unresolved\u2462\u2466"},{"id":"ref-for-unresolved\u2462\u2467"},{"id":"ref-for-unresolved\u2462\u2468"},{"id":"ref-for-unresolved\u2463\u24ea"},{"id":"ref-for-unresolved\u2463\u2460"},{"id":"ref-for-unresolved\u2463\u2461"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-unresolved\u2463\u2462"},{"id":"ref-for-unresolved\u2463\u2463"},{"id":"ref-for-unresolved\u2463\u2464"},{"id":"ref-for-unresolved\u2463\u2465"},{"id":"ref-for-unresolved\u2463\u2466"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-unresolved\u2463\u2467"},{"id":"ref-for-unresolved\u2463\u2468"},{"id":"ref-for-unresolved\u2464\u24ea"},{"id":"ref-for-unresolved\u2464\u2460"},{"id":"ref-for-unresolved\u2464\u2461"},{"id":"ref-for-unresolved\u2464\u2462"},{"id":"ref-for-unresolved\u2464\u2463"},{"id":"ref-for-unresolved\u2464\u2464"},{"id":"ref-for-unresolved\u2464\u2465"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-unresolved\u2464\u2466"},{"id":"ref-for-unresolved\u2464\u2467"},{"id":"ref-for-unresolved\u2464\u2468"},{"id":"ref-for-unresolved\u2465\u24ea"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-unresolved\u2465\u2460"},{"id":"ref-for-unresolved\u2465\u2461"},{"id":"ref-for-unresolved\u2465\u2462"},{"id":"ref-for-unresolved\u2465\u2463"},{"id":"ref-for-unresolved\u2465\u2464"},{"id":"ref-for-unresolved\u2465\u2465"}],"title":"4.5.14. Canceling an animation"},{"refs":[{"id":"ref-for-unresolved\u2465\u2466"}],"title":"4.5.15.1. Setting the playback rate of an animation"},{"refs":[{"id":"ref-for-unresolved\u2465\u2467"},{"id":"ref-for-unresolved\u2465\u2468"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"},{"refs":[{"id":"ref-for-unresolved\u2466\u24ea"},{"id":"ref-for-unresolved\u2466\u2460"},{"id":"ref-for-unresolved\u2466\u2461"},{"id":"ref-for-unresolved\u2466\u2462"},{"id":"ref-for-unresolved\u2466\u2463"}],"title":"4.5.17. Play states"},{"refs":[{"id":"ref-for-unresolved\u2466\u2464"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-unresolved\u2466\u2465"},{"id":"ref-for-unresolved\u2466\u2466"},{"id":"ref-for-unresolved\u2466\u2467"},{"id":"ref-for-unresolved\u2466\u2468"},{"id":"ref-for-unresolved\u2467\u24ea"},{"id":"ref-for-unresolved\u2467\u2460"},{"id":"ref-for-unresolved\u2467\u2461"},{"id":"ref-for-unresolved\u2467\u2462"},{"id":"ref-for-unresolved\u2467\u2463"}],"title":"4.5.18.1. Sorting animation events"},{"refs":[{"id":"ref-for-unresolved\u2467\u2464"}],"title":"4.6.3. Local time"},{"refs":[{"id":"ref-for-unresolved\u2467\u2465"},{"id":"ref-for-unresolved\u2467\u2466"},{"id":"ref-for-unresolved\u2467\u2467"},{"id":"ref-for-unresolved\u2467\u2468"},{"id":"ref-for-unresolved\u2468\u24ea"}],"title":"4.6.6. Animation effect phases and states"},{"refs":[{"id":"ref-for-unresolved\u2468\u2460"}],"title":"4.6.8. Fill behavior and fill modes"},{"refs":[{"id":"ref-for-unresolved\u2468\u2461"},{"id":"ref-for-unresolved\u2468\u2462"},{"id":"ref-for-unresolved\u2468\u2463"},{"id":"ref-for-unresolved\u2468\u2464"}],"title":"4.7.2. Calculating the active time"},{"refs":[{"id":"ref-for-unresolved\u2468\u2465"},{"id":"ref-for-unresolved\u2468\u2466"}],"title":"4.7.3. Calculating the overall progress"},{"refs":[{"id":"ref-for-unresolved\u2468\u2467"},{"id":"ref-for-unresolved\u2468\u2468"}],"title":"4.7.4. Calculating the simple iteration progress"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea\u24ea"},{"id":"ref-for-unresolved\u2460\u24ea\u2460"}],"title":"4.7.5. Calculating the current iteration index"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea\u2461"},{"id":"ref-for-unresolved\u2460\u24ea\u2462"}],"title":"4.7.6. Calculating the directed progress"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea\u2463"},{"id":"ref-for-unresolved\u2460\u24ea\u2464"}],"title":"4.7.7. Calculating the transformed progress"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea\u2465"}],"title":"5.3.4. The effect value of a keyframe effect"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea\u2466"}],"title":"6.1. Time values in the programming interface"},{"refs":[{"id":"ref-for-unresolved\u2460\u24ea\u2467"}],"title":"6.5.5. The ComputedEffectTiming dictionary"}],"url":"#unresolved"}, "update-an-animations-finished-state": {"dfnID":"update-an-animations-finished-state","dfnText":"update an animation\u2019s finished state","external":false,"refSections":[{"refs":[{"id":"ref-for-update-an-animations-finished-state"}],"title":"4.4. Animation Frames"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2460"}],"title":"4.5.2. Setting the timeline of an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2461"}],"title":"4.5.3. \nSetting the associated effect of an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2462"}],"title":"4.5.4. Setting the current time of an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2463"}],"title":"4.5.5. Setting the start time of an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2464"},{"id":"ref-for-update-an-animations-finished-state\u2465"}],"title":"4.5.8. Playing an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2466"},{"id":"ref-for-update-an-animations-finished-state\u2467"}],"title":"4.5.9. Pausing an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2468"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2460\u24ea"}],"title":"4.5.13. Finishing an animation"},{"refs":[{"id":"ref-for-update-an-animations-finished-state\u2460\u2460"}],"title":"4.5.15.2. Seamlessly updating the playback rate of an animation"}],"url":"#update-an-animations-finished-state"}, "update-animations-and-send-events": {"dfnID":"update-animations-and-send-events","dfnText":"update animations and send events","external":false,"refSections":[{"refs":[{"id":"ref-for-update-animations-and-send-events"}],"title":"4.3.1. Document timelines"},{"refs":[{"id":"ref-for-update-animations-and-send-events\u2460"}],"title":"4.3.1.2. Relationship to wall-clock time"},{"refs":[{"id":"ref-for-update-animations-and-send-events\u2461"}],"title":"4.5.12. Updating the finished state"},{"refs":[{"id":"ref-for-update-animations-and-send-events\u2462"}],"title":"4.5.18. Animation events"},{"refs":[{"id":"ref-for-update-animations-and-send-events\u2463"},{"id":"ref-for-update-animations-and-send-events\u2464"}],"title":"6.13. Model liveness"}],"url":"#update-animations-and-send-events"}, "update-the-timing-properties-of-an-animation-effect": {"dfnID":"update-the-timing-properties-of-an-animation-effect","dfnText":"update the timing properties of an animation effect","external":false,"refSections":[{"refs":[{"id":"ref-for-update-the-timing-properties-of-an-animation-effect"}],"title":"6.5. The AnimationEffect interface"},{"refs":[{"id":"ref-for-update-the-timing-properties-of-an-animation-effect\u2460"}],"title":"6.6. The KeyframeEffect interface"}],"url":"#update-the-timing-properties-of-an-animation-effect"}, "web-animations-animation-model": {"dfnID":"web-animations-animation-model","dfnText":"Web Animations animation model","external":false,"refSections":[{"refs":[{"id":"ref-for-web-animations-animation-model"}],"title":"3. Web Animations model overview"}],"url":"#web-animations-animation-model"}, "web-animations-api": {"dfnID":"web-animations-api","dfnText":"Web Animations API","external":false,"refSections":[{"refs":[{"id":"ref-for-web-animations-api"},{"id":"ref-for-web-animations-api\u2460"},{"id":"ref-for-web-animations-api\u2461"},{"id":"ref-for-web-animations-api\u2462"},{"id":"ref-for-web-animations-api\u2463"}],"title":"1.1. Use cases"},{"refs":[{"id":"ref-for-web-animations-api\u2464"},{"id":"ref-for-web-animations-api\u2465"},{"id":"ref-for-web-animations-api\u2466"},{"id":"ref-for-web-animations-api\u2467"}],"title":"1.2. Relationship to other specifications"},{"refs":[{"id":"ref-for-web-animations-api\u2468"}],"title":"1.3. Overview of this specification"},{"refs":[{"id":"ref-for-web-animations-api\u2460\u24ea"},{"id":"ref-for-web-animations-api\u2460\u2460"}],"title":"6.13. Model liveness"},{"refs":[{"id":"ref-for-web-animations-api\u2460\u2461"}],"title":"9.2. Conformance criteria"}],"url":"#web-animations-api"}, "web-animations-model": {"dfnID":"web-animations-model","dfnText":"Web Animations model","external":false,"refSections":[{"refs":[{"id":"ref-for-web-animations-model"},{"id":"ref-for-web-animations-model\u2460"}],"title":"1.1. Use cases"},{"refs":[{"id":"ref-for-web-animations-model\u2461"},{"id":"ref-for-web-animations-model\u2462"}],"title":"1.2. Relationship to other specifications"},{"refs":[{"id":"ref-for-web-animations-model\u2463"}],"title":"1.3. Overview of this specification"},{"refs":[{"id":"ref-for-web-animations-model\u2464"},{"id":"ref-for-web-animations-model\u2465"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-web-animations-model\u2466"}],"title":"4. Timing model"},{"refs":[{"id":"ref-for-web-animations-model\u2467"}],"title":"4.2. Time values"},{"refs":[{"id":"ref-for-web-animations-model\u2468"}],"title":"4.3. Timelines"},{"refs":[{"id":"ref-for-web-animations-model\u2460\u24ea"}],"title":"4.6.4. Time spaces"},{"refs":[{"id":"ref-for-web-animations-model\u2460\u2460"}],"title":"6.13. Model liveness"}],"url":"#web-animations-model"}, "web-animations-timing-model": {"dfnID":"web-animations-timing-model","dfnText":"Web Animations timing model","external":false,"refSections":[{"refs":[{"id":"ref-for-web-animations-timing-model"}],"title":"3. Web Animations model overview"},{"refs":[{"id":"ref-for-web-animations-timing-model\u2460"}],"title":"5. Animation model"}],"url":"#web-animations-timing-model"}, }; 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-easing-2/#typedef-easing-function": "Expands to: linear", }; 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-ref-hints */ "use strict"; { let refsData = { "#active-after-boundary-time": {"displayText":"active-after boundary time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active-after boundary time","type":"dfn","url":"#active-after-boundary-time"}, "#active-duration": {"displayText":"active duration","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active duration","type":"dfn","url":"#active-duration"}, "#active-interval": {"displayText":"active interval","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active interval","type":"dfn","url":"#active-interval"}, "#active-replace-state": {"displayText":"active replace state","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active replace state","type":"dfn","url":"#active-replace-state"}, "#active-time": {"displayText":"active time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active time","type":"dfn","url":"#active-time"}, "#active-time-space": {"displayText":"active time space","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active time space","type":"dfn","url":"#active-time-space"}, "#active-timeline": {"displayText":"active timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active timeline","type":"dfn","url":"#active-timeline"}, "#animatable": {"displayText":"Animatable","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"Animatable","type":"interface","url":"#animatable"}, "#animation": {"displayText":"Animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"Animation","type":"interface","url":"#animation"}, "#animation-associated-effect": {"displayText":"associated effect","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"associated effect","type":"dfn","url":"#animation-associated-effect"}, "#animation-class": {"displayText":"animation class","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation class","type":"dfn","url":"#animation-class"}, "#animation-composite-order": {"displayText":"composite order","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite order","type":"dfn","url":"#animation-composite-order"}, "#animation-current-time": {"displayText":"current time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"current time","type":"dfn","url":"#animation-current-time"}, "#animation-direction": {"displayText":"animation direction","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation direction","type":"dfn","url":"#animation-direction"}, "#animation-document-for-timing": {"displayText":"document for timing","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"document for timing","type":"dfn","url":"#animation-document-for-timing"}, "#animation-effect": {"displayText":"animation effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation effect","type":"dfn","url":"#animation-effect"}, "#animation-effect-active-phase": {"displayText":"active phase","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"active phase","type":"dfn","url":"#animation-effect-active-phase"}, "#animation-effect-after-phase": {"displayText":"after phase","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"after phase","type":"dfn","url":"#animation-effect-after-phase"}, "#animation-effect-associated-animation": {"displayText":"associated animation","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"associated animation","type":"dfn","url":"#animation-effect-associated-animation"}, "#animation-effect-before-phase": {"displayText":"before phase","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"before phase","type":"dfn","url":"#animation-effect-before-phase"}, "#animation-effect-effect-easing-function": {"displayText":"effect easing function","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effect easing function","type":"dfn","url":"#animation-effect-effect-easing-function"}, "#animation-effect-end-time": {"displayText":"end time","export":true,"for_":["animation effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"end time","type":"dfn","url":"#animation-effect-end-time"}, "#animation-events": {"displayText":"animation events","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation events","type":"dfn","url":"#animation-events"}, "#animation-frame": {"displayText":"animation frame","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation frame","type":"dfn","url":"#animation-frame"}, "#animation-hold-time": {"displayText":"hold time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"hold time","type":"dfn","url":"#animation-hold-time"}, "#animation-model-dfn": {"displayText":"animation model","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation model","type":"dfn","url":"#animation-model-dfn"}, "#animation-play-state": {"displayText":"play state","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"play state","type":"dfn","url":"#animation-play-state"}, "#animation-playback-events": {"displayText":"animation playback events","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation playback events","type":"dfn","url":"#animation-playback-events"}, "#animation-property-name-to-idl-attribute-name": {"displayText":"animation property name to idl attribute name","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation property name to idl attribute name","type":"dfn","url":"#animation-property-name-to-idl-attribute-name"}, "#animation-relevant": {"displayText":"relevant","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"relevant","type":"dfn","url":"#animation-relevant"}, "#animation-reset-an-animations-pending-tasks": {"displayText":"reset an animation's pending tasks","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"reset an animation's pending tasks","type":"dfn","url":"#animation-reset-an-animations-pending-tasks"}, "#animation-set-the-associated-effect-of-an-animation": {"displayText":"set the associated effect of an animation","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"set the associated effect of an animation","type":"dfn","url":"#animation-set-the-associated-effect-of-an-animation"}, "#animation-set-the-current-time": {"displayText":"set the current time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"set the current time","type":"dfn","url":"#animation-set-the-current-time"}, "#animation-set-the-timeline-of-an-animation": {"displayText":"set the timeline of an animation","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"set the timeline of an animation","type":"dfn","url":"#animation-set-the-timeline-of-an-animation"}, "#animation-silently-set-the-current-time": {"displayText":"silently set the current time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"silently set the current time","type":"dfn","url":"#animation-silently-set-the-current-time"}, "#animation-start-time": {"displayText":"start time","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"start time","type":"dfn","url":"#animation-start-time"}, "#animation-time-to-origin-relative-time": {"displayText":"animation time to origin-relative time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation time to origin-relative time","type":"dfn","url":"#animation-time-to-origin-relative-time"}, "#animation-time-to-timeline-time": {"displayText":"animation time to timeline time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation time to timeline time","type":"dfn","url":"#animation-time-to-timeline-time"}, "#animation-type": {"displayText":"animation type","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation type","type":"dfn","url":"#animation-type"}, "#animationeffect": {"displayText":"AnimationEffect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationEffect","type":"interface","url":"#animationeffect"}, "#animationplaybackevent": {"displayText":"AnimationPlaybackEvent","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationPlaybackEvent","type":"interface","url":"#animationplaybackevent"}, "#animationtimeline": {"displayText":"AnimationTimeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationTimeline","type":"interface","url":"#animationtimeline"}, "#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":"local","text":"apply any pending playback rate","type":"dfn","url":"#apply-any-pending-playback-rate"}, "#associated-effect-end": {"displayText":"associated effect end","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"associated effect end","type":"dfn","url":"#associated-effect-end"}, "#associated-with-a-timeline": {"displayText":"associated with a timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"associated with a timeline","type":"dfn","url":"#associated-with-a-timeline"}, "#before-active-boundary-time": {"displayText":"before-active boundary time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"before-active boundary time","type":"dfn","url":"#before-active-boundary-time"}, "#by-computed-value": {"displayText":"by computed value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"by computed value","type":"dfn","url":"#by-computed-value"}, "#cancel-an-animation": {"displayText":"cancel an animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"cancel an animation","type":"dfn","url":"#cancel-an-animation"}, "#cancel-event": {"displayText":"cancel event","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"cancel event","type":"dfn","url":"#cancel-event"}, "#check-the-completion-record": {"displayText":"check the completion record","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"check the completion record","type":"dfn","url":"#check-the-completion-record"}, "#combining-shadow-lists": {"displayText":"shadow lists","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"shadow lists","type":"dfn","url":"#combining-shadow-lists"}, "#commit-computed-styles": {"displayText":"commit computed styles","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"commit computed styles","type":"dfn","url":"#commit-computed-styles"}, "#composite": {"displayText":"composite","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite","type":"dfn","url":"#composite"}, "#composite-operation": {"displayText":"composite operation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite operation","type":"dfn","url":"#composite-operation"}, "#composite-operation-accumulate": {"displayText":"composite operation accumulate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite operation accumulate","type":"dfn","url":"#composite-operation-accumulate"}, "#composite-operation-add": {"displayText":"composite operation add","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite operation add","type":"dfn","url":"#composite-operation-add"}, "#composite-operation-replace": {"displayText":"composite operation replace","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite operation replace","type":"dfn","url":"#composite-operation-replace"}, "#composited-value": {"displayText":"composited value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composited value","type":"dfn","url":"#composited-value"}, "#compute-a-property-value": {"displayText":"compute a property value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"compute a property value","type":"dfn","url":"#compute-a-property-value"}, "#compute-missing-keyframe-offsets": {"displayText":"compute missing keyframe offsets","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"compute missing keyframe offsets","type":"dfn","url":"#compute-missing-keyframe-offsets"}, "#computed-keyframe-offsets": {"displayText":"computed keyframe offsets","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"computed keyframe offsets","type":"dfn","url":"#computed-keyframe-offsets"}, "#computed-keyframes": {"displayText":"computed keyframes","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"computed keyframes","type":"dfn","url":"#computed-keyframes"}, "#concept-animatable": {"displayText":"animatable","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animatable","type":"dfn","url":"#concept-animatable"}, "#concept-animation": {"displayText":"animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animation","type":"dfn","url":"#concept-animation"}, "#current": {"displayText":"current","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"current","type":"dfn","url":"#current"}, "#current-finished-promise": {"displayText":"current finished promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"current finished promise","type":"dfn","url":"#current-finished-promise"}, "#current-iteration-index": {"displayText":"iteration index","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration index","type":"dfn","url":"#current-iteration-index"}, "#current-ready-promise": {"displayText":"current ready promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"current ready promise","type":"dfn","url":"#current-ready-promise"}, "#dictdef-animationplaybackeventinit": {"displayText":"AnimationPlaybackEventInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationPlaybackEventInit","type":"dictionary","url":"#dictdef-animationplaybackeventinit"}, "#dictdef-computedeffecttiming": {"displayText":"ComputedEffectTiming","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"ComputedEffectTiming","type":"dictionary","url":"#dictdef-computedeffecttiming"}, "#dictdef-documenttimelineoptions": {"displayText":"DocumentTimelineOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"DocumentTimelineOptions","type":"dictionary","url":"#dictdef-documenttimelineoptions"}, "#dictdef-effecttiming": {"displayText":"EffectTiming","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"EffectTiming","type":"dictionary","url":"#dictdef-effecttiming"}, "#dictdef-getanimationsoptions": {"displayText":"GetAnimationsOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"GetAnimationsOptions","type":"dictionary","url":"#dictdef-getanimationsoptions"}, "#dictdef-keyframeanimationoptions": {"displayText":"KeyframeAnimationOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"KeyframeAnimationOptions","type":"dictionary","url":"#dictdef-keyframeanimationoptions"}, "#dictdef-keyframeeffectoptions": {"displayText":"KeyframeEffectOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"KeyframeEffectOptions","type":"dictionary","url":"#dictdef-keyframeeffectoptions"}, "#dictdef-optionaleffecttiming": {"displayText":"OptionalEffectTiming","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"OptionalEffectTiming","type":"dictionary","url":"#dictdef-optionaleffecttiming"}, "#directed-progress": {"displayText":"directed progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"directed progress","type":"dfn","url":"#directed-progress"}, "#discrete": {"displayText":"discrete","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"discrete","type":"dfn","url":"#discrete"}, "#document-default-document-timeline": {"displayText":"default document timeline","export":true,"for_":["document"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"default document timeline","type":"dfn","url":"#document-default-document-timeline"}, "#document-timeline": {"displayText":"document timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"document timeline","type":"dfn","url":"#document-timeline"}, "#documenttimeline": {"displayText":"DocumentTimeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"DocumentTimeline","type":"interface","url":"#documenttimeline"}, "#dom-animatable-animate": {"displayText":"animate(keyframes)","export":true,"for_":["Animatable"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"animate(keyframes)","type":"method","url":"#dom-animatable-animate"}, "#dom-animatable-animate-keyframes-options-keyframes": {"displayText":"keyframes","export":true,"for_":["Animatable/animate(keyframes, options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframes","type":"argument","url":"#dom-animatable-animate-keyframes-options-keyframes"}, "#dom-animatable-animate-keyframes-options-options": {"displayText":"options","export":true,"for_":["Animatable/animate(keyframes, options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"options","type":"argument","url":"#dom-animatable-animate-keyframes-options-options"}, "#dom-animatable-getanimations": {"displayText":"getAnimations(options)","export":true,"for_":["Animatable"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"getAnimations(options)","type":"method","url":"#dom-animatable-getanimations"}, "#dom-animatable-getanimations-options-options": {"displayText":"options","export":true,"for_":["Animatable/getAnimations(options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"options","type":"argument","url":"#dom-animatable-getanimations-options-options"}, "#dom-animation-animation": {"displayText":"Animation(effect, timeline)","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"Animation(effect, timeline)","type":"constructor","url":"#dom-animation-animation"}, "#dom-animation-animation-effect-timeline-effect": {"displayText":"effect","export":true,"for_":["Animation/Animation(effect, timeline)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effect","type":"argument","url":"#dom-animation-animation-effect-timeline-effect"}, "#dom-animation-animation-effect-timeline-timeline": {"displayText":"timeline","export":true,"for_":["Animation/Animation(effect, timeline)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline","type":"argument","url":"#dom-animation-animation-effect-timeline-timeline"}, "#dom-animation-cancel": {"displayText":"cancel()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"cancel()","type":"method","url":"#dom-animation-cancel"}, "#dom-animation-commitstyles": {"displayText":"commitStyles()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"commitStyles()","type":"method","url":"#dom-animation-commitstyles"}, "#dom-animation-currenttime": {"displayText":"currentTime","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"currentTime","type":"attribute","url":"#dom-animation-currenttime"}, "#dom-animation-effect": {"displayText":"effect","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effect","type":"attribute","url":"#dom-animation-effect"}, "#dom-animation-finish": {"displayText":"finish()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"finish()","type":"method","url":"#dom-animation-finish"}, "#dom-animation-finished": {"displayText":"finished","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"finished","type":"attribute","url":"#dom-animation-finished"}, "#dom-animation-id": {"displayText":"id","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"id","type":"attribute","url":"#dom-animation-id"}, "#dom-animation-oncancel": {"displayText":"oncancel","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"oncancel","type":"attribute","url":"#dom-animation-oncancel"}, "#dom-animation-onfinish": {"displayText":"onfinish","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"onfinish","type":"attribute","url":"#dom-animation-onfinish"}, "#dom-animation-onremove": {"displayText":"onremove","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"onremove","type":"attribute","url":"#dom-animation-onremove"}, "#dom-animation-pause": {"displayText":"pause()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pause()","type":"method","url":"#dom-animation-pause"}, "#dom-animation-pending": {"displayText":"pending","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pending","type":"attribute","url":"#dom-animation-pending"}, "#dom-animation-persist": {"displayText":"persist()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"persist()","type":"method","url":"#dom-animation-persist"}, "#dom-animation-play": {"displayText":"play()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"play()","type":"method","url":"#dom-animation-play"}, "#dom-animation-playbackrate": {"displayText":"playbackRate","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"playbackRate","type":"attribute","url":"#dom-animation-playbackrate"}, "#dom-animation-playstate": {"displayText":"playState","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"playState","type":"attribute","url":"#dom-animation-playstate"}, "#dom-animation-ready": {"displayText":"ready","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"ready","type":"attribute","url":"#dom-animation-ready"}, "#dom-animation-replacestate": {"displayText":"replaceState","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"replaceState","type":"attribute","url":"#dom-animation-replacestate"}, "#dom-animation-reverse": {"displayText":"reverse()","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"reverse()","type":"method","url":"#dom-animation-reverse"}, "#dom-animation-starttime": {"displayText":"startTime","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"startTime","type":"attribute","url":"#dom-animation-starttime"}, "#dom-animation-timeline": {"displayText":"timeline","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline","type":"attribute","url":"#dom-animation-timeline"}, "#dom-animation-updateplaybackrate": {"displayText":"updatePlaybackRate(playbackRate)","export":true,"for_":["Animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"updatePlaybackRate(playbackRate)","type":"method","url":"#dom-animation-updateplaybackrate"}, "#dom-animation-updateplaybackrate-playbackrate-playbackrate": {"displayText":"playbackRate","export":true,"for_":["Animation/updatePlaybackRate(playbackRate)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"playbackRate","type":"argument","url":"#dom-animation-updateplaybackrate-playbackrate-playbackrate"}, "#dom-animationeffect-getcomputedtiming": {"displayText":"getComputedTiming()","export":true,"for_":["AnimationEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"getComputedTiming()","type":"method","url":"#dom-animationeffect-getcomputedtiming"}, "#dom-animationeffect-gettiming": {"displayText":"getTiming()","export":true,"for_":["AnimationEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"getTiming()","type":"method","url":"#dom-animationeffect-gettiming"}, "#dom-animationeffect-updatetiming": {"displayText":"updateTiming(timing)","export":true,"for_":["AnimationEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"updateTiming(timing)","type":"method","url":"#dom-animationeffect-updatetiming"}, "#dom-animationeffect-updatetiming-timing-timing": {"displayText":"timing","export":true,"for_":["AnimationEffect/updateTiming(timing)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timing","type":"argument","url":"#dom-animationeffect-updatetiming-timing-timing"}, "#dom-animationplaybackevent-animationplaybackevent": {"displayText":"AnimationPlaybackEvent(type, eventInitDict)","export":true,"for_":["AnimationPlaybackEvent"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationPlaybackEvent(type, eventInitDict)","type":"constructor","url":"#dom-animationplaybackevent-animationplaybackevent"}, "#dom-animationplaybackevent-currenttime": {"displayText":"currentTime","export":true,"for_":["AnimationPlaybackEvent"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"currentTime","type":"attribute","url":"#dom-animationplaybackevent-currenttime"}, "#dom-animationplaybackevent-timelinetime": {"displayText":"timelineTime","export":true,"for_":["AnimationPlaybackEvent"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timelineTime","type":"attribute","url":"#dom-animationplaybackevent-timelinetime"}, "#dom-animationplaybackeventinit-currenttime": {"displayText":"currentTime","export":true,"for_":["AnimationPlaybackEventInit"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"currentTime","type":"dict-member","url":"#dom-animationplaybackeventinit-currenttime"}, "#dom-animationplaybackeventinit-timelinetime": {"displayText":"timelineTime","export":true,"for_":["AnimationPlaybackEventInit"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timelineTime","type":"dict-member","url":"#dom-animationplaybackeventinit-timelinetime"}, "#dom-animationplaystate-finished": {"displayText":"\"finished\"","export":true,"for_":["AnimationPlayState"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"finished\"","type":"enum-value","url":"#dom-animationplaystate-finished"}, "#dom-animationplaystate-idle": {"displayText":"\"idle\"","export":true,"for_":["AnimationPlayState"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"idle\"","type":"enum-value","url":"#dom-animationplaystate-idle"}, "#dom-animationplaystate-paused": {"displayText":"\"paused\"","export":true,"for_":["AnimationPlayState"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"paused\"","type":"enum-value","url":"#dom-animationplaystate-paused"}, "#dom-animationplaystate-running": {"displayText":"\"running\"","export":true,"for_":["AnimationPlayState"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"running\"","type":"enum-value","url":"#dom-animationplaystate-running"}, "#dom-animationtimeline-currenttime": {"displayText":"currentTime","export":true,"for_":["AnimationTimeline"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"currentTime","type":"attribute","url":"#dom-animationtimeline-currenttime"}, "#dom-basecomputedkeyframe-composite": {"displayText":"composite","export":true,"for_":["BaseComputedKeyframe"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite","type":"dict-member","url":"#dom-basecomputedkeyframe-composite"}, "#dom-basecomputedkeyframe-computedoffset": {"displayText":"computedOffset","export":true,"for_":["BaseComputedKeyframe"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"computedOffset","type":"dict-member","url":"#dom-basecomputedkeyframe-computedoffset"}, "#dom-basecomputedkeyframe-easing": {"displayText":"easing","export":true,"for_":["BaseComputedKeyframe"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"easing","type":"dict-member","url":"#dom-basecomputedkeyframe-easing"}, "#dom-basecomputedkeyframe-offset": {"displayText":"offset","export":true,"for_":["BaseComputedKeyframe"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"offset","type":"dict-member","url":"#dom-basecomputedkeyframe-offset"}, "#dom-compositeoperation-accumulate": {"displayText":"\"accumulate\"","export":true,"for_":["CompositeOperation","CompositeOperationOrAuto"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"accumulate\"","type":"enum-value","url":"#dom-compositeoperation-accumulate"}, "#dom-compositeoperation-add": {"displayText":"\"add\"","export":true,"for_":["CompositeOperation","CompositeOperationOrAuto"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"add\"","type":"enum-value","url":"#dom-compositeoperation-add"}, "#dom-compositeoperation-replace": {"displayText":"\"replace\"","export":true,"for_":["CompositeOperation","CompositeOperationOrAuto"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"replace\"","type":"enum-value","url":"#dom-compositeoperation-replace"}, "#dom-compositeoperationorauto-auto": {"displayText":"auto","export":true,"for_":["CompositeOperationOrAuto"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"auto","type":"enum-value","url":"#dom-compositeoperationorauto-auto"}, "#dom-computedeffecttiming-activeduration": {"displayText":"activeDuration","export":true,"for_":["ComputedEffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"activeDuration","type":"dict-member","url":"#dom-computedeffecttiming-activeduration"}, "#dom-computedeffecttiming-currentiteration": {"displayText":"currentIteration","export":true,"for_":["ComputedEffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"currentIteration","type":"dict-member","url":"#dom-computedeffecttiming-currentiteration"}, "#dom-computedeffecttiming-endtime": {"displayText":"endTime","export":true,"for_":["ComputedEffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"endTime","type":"dict-member","url":"#dom-computedeffecttiming-endtime"}, "#dom-computedeffecttiming-localtime": {"displayText":"localTime","export":true,"for_":["ComputedEffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"localTime","type":"dict-member","url":"#dom-computedeffecttiming-localtime"}, "#dom-computedeffecttiming-progress": {"displayText":"progress","export":true,"for_":["ComputedEffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"progress","type":"dict-member","url":"#dom-computedeffecttiming-progress"}, "#dom-document-timeline": {"displayText":"timeline","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline","type":"attribute","url":"#dom-document-timeline"}, "#dom-documentorshadowroot-getanimations": {"displayText":"getAnimations()","export":true,"for_":["DocumentOrShadowRoot"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"getAnimations()","type":"method","url":"#dom-documentorshadowroot-getanimations"}, "#dom-documenttimeline-documenttimeline": {"displayText":"DocumentTimeline(options)","export":true,"for_":["DocumentTimeline"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"DocumentTimeline(options)","type":"constructor","url":"#dom-documenttimeline-documenttimeline"}, "#dom-documenttimeline-documenttimeline-options-options": {"displayText":"options","export":true,"for_":["DocumentTimeline/DocumentTimeline(options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"options","type":"argument","url":"#dom-documenttimeline-documenttimeline-options-options"}, "#dom-documenttimelineoptions-origintime": {"displayText":"originTime","export":true,"for_":["DocumentTimelineOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"originTime","type":"dict-member","url":"#dom-documenttimelineoptions-origintime"}, "#dom-effecttiming-delay": {"displayText":"delay","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"delay","type":"dict-member","url":"#dom-effecttiming-delay"}, "#dom-effecttiming-direction": {"displayText":"direction","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"direction","type":"dict-member","url":"#dom-effecttiming-direction"}, "#dom-effecttiming-duration": {"displayText":"duration","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"duration","type":"dict-member","url":"#dom-effecttiming-duration"}, "#dom-effecttiming-easing": {"displayText":"easing","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"easing","type":"dict-member","url":"#dom-effecttiming-easing"}, "#dom-effecttiming-enddelay": {"displayText":"endDelay","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"endDelay","type":"dict-member","url":"#dom-effecttiming-enddelay"}, "#dom-effecttiming-fill": {"displayText":"fill","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"fill","type":"dict-member","url":"#dom-effecttiming-fill"}, "#dom-effecttiming-iterations": {"displayText":"iterations","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iterations","type":"dict-member","url":"#dom-effecttiming-iterations"}, "#dom-effecttiming-iterationstart": {"displayText":"iterationStart","export":true,"for_":["EffectTiming"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iterationStart","type":"dict-member","url":"#dom-effecttiming-iterationstart"}, "#dom-fillmode-auto": {"displayText":"\"auto\"","export":true,"for_":["FillMode","PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"auto\"","type":"enum-value","url":"#dom-fillmode-auto"}, "#dom-fillmode-backwards": {"displayText":"\"backwards\"","export":true,"for_":["FillMode","PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"backwards\"","type":"enum-value","url":"#dom-fillmode-backwards"}, "#dom-fillmode-both": {"displayText":"\"both\"","export":true,"for_":["FillMode","PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"both\"","type":"enum-value","url":"#dom-fillmode-both"}, "#dom-fillmode-forwards": {"displayText":"\"forwards\"","export":true,"for_":["FillMode","PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"forwards\"","type":"enum-value","url":"#dom-fillmode-forwards"}, "#dom-fillmode-none": {"displayText":"\"none\"","export":true,"for_":["FillMode","PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"none\"","type":"enum-value","url":"#dom-fillmode-none"}, "#dom-getanimationsoptions-pseudoelement": {"displayText":"pseudoElement","export":true,"for_":["GetAnimationsOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pseudoElement","type":"dict-member","url":"#dom-getanimationsoptions-pseudoelement"}, "#dom-getanimationsoptions-subtree": {"displayText":"subtree","export":true,"for_":["GetAnimationsOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"subtree","type":"dict-member","url":"#dom-getanimationsoptions-subtree"}, "#dom-keyframeanimationoptions-id": {"displayText":"id","export":true,"for_":["KeyframeAnimationOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"id","type":"dict-member","url":"#dom-keyframeanimationoptions-id"}, "#dom-keyframeanimationoptions-timeline": {"displayText":"timeline","export":true,"for_":["KeyframeAnimationOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline","type":"dict-member","url":"#dom-keyframeanimationoptions-timeline"}, "#dom-keyframeeffect-composite": {"displayText":"composite","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite","type":"attribute","url":"#dom-keyframeeffect-composite"}, "#dom-keyframeeffect-getkeyframes": {"displayText":"getKeyframes()","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"getKeyframes()","type":"method","url":"#dom-keyframeeffect-getkeyframes"}, "#dom-keyframeeffect-keyframeeffect": {"displayText":"KeyframeEffect(target, keyframes, options)","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","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":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"KeyframeEffect(source)","type":"constructor","url":"#dom-keyframeeffect-keyframeeffect-source"}, "#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":"local","text":"source","type":"argument","url":"#dom-keyframeeffect-keyframeeffect-source-source"}, "#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes": {"displayText":"keyframes","export":true,"for_":["KeyframeEffect/KeyframeEffect(target, keyframes, options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframes","type":"argument","url":"#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"}, "#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options": {"displayText":"options","export":true,"for_":["KeyframeEffect/KeyframeEffect(target, keyframes, options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"options","type":"argument","url":"#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"}, "#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target": {"displayText":"target","export":true,"for_":["KeyframeEffect/KeyframeEffect(target, keyframes, options)"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"target","type":"argument","url":"#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"}, "#dom-keyframeeffect-pseudo-element-parsing": {"displayText":"pseudo-element parsing","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pseudo-element parsing","type":"attribute","url":"#dom-keyframeeffect-pseudo-element-parsing"}, "#dom-keyframeeffect-pseudoelement": {"displayText":"pseudoElement","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pseudoElement","type":"attribute","url":"#dom-keyframeeffect-pseudoelement"}, "#dom-keyframeeffect-setkeyframes": {"displayText":"setKeyframes(keyframes)","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"setKeyframes(keyframes)","type":"method","url":"#dom-keyframeeffect-setkeyframes"}, "#dom-keyframeeffect-target": {"displayText":"target","export":true,"for_":["KeyframeEffect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"target","type":"attribute","url":"#dom-keyframeeffect-target"}, "#dom-keyframeeffectoptions-composite": {"displayText":"composite","export":true,"for_":["KeyframeEffectOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"composite","type":"dict-member","url":"#dom-keyframeeffectoptions-composite"}, "#dom-keyframeeffectoptions-pseudoelement": {"displayText":"pseudoElement","export":true,"for_":["KeyframeEffectOptions"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pseudoElement","type":"dict-member","url":"#dom-keyframeeffectoptions-pseudoelement"}, "#dom-playbackdirection-alternate": {"displayText":"\"alternate\"","export":true,"for_":["PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"alternate\"","type":"enum-value","url":"#dom-playbackdirection-alternate"}, "#dom-playbackdirection-alternate-reverse": {"displayText":"\"alternate-reverse\"","export":true,"for_":["PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"alternate-reverse\"","type":"enum-value","url":"#dom-playbackdirection-alternate-reverse"}, "#dom-playbackdirection-normal": {"displayText":"\"normal\"","export":true,"for_":["PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"normal\"","type":"enum-value","url":"#dom-playbackdirection-normal"}, "#dom-playbackdirection-reverse": {"displayText":"\"reverse\"","export":true,"for_":["PlaybackDirection"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"\"reverse\"","type":"enum-value","url":"#dom-playbackdirection-reverse"}, "#effect-stack": {"displayText":"effect stack","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effect stack","type":"dfn","url":"#effect-stack"}, "#effect-target-target-element": {"displayText":"target element","export":true,"for_":["effect target"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"target element","type":"dfn","url":"#effect-target-target-element"}, "#effect-target-target-pseudo-selector": {"displayText":"target pseudo-selector","export":true,"for_":["effect target"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"target pseudo-selector","type":"dfn","url":"#effect-target-target-pseudo-selector"}, "#effect-value": {"displayText":"effect value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effect value","type":"dfn","url":"#effect-value"}, "#effective-playback-rate": {"displayText":"effective playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effective playback rate","type":"dfn","url":"#effective-playback-rate"}, "#end-delay": {"displayText":"end delay","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"end delay","type":"dfn","url":"#end-delay"}, "#enumdef-animationplaystate": {"displayText":"AnimationPlayState","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationPlayState","type":"enum","url":"#enumdef-animationplaystate"}, "#enumdef-animationreplacestate": {"displayText":"AnimationReplaceState","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"AnimationReplaceState","type":"enum","url":"#enumdef-animationreplacestate"}, "#enumdef-compositeoperation": {"displayText":"CompositeOperation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"CompositeOperation","type":"enum","url":"#enumdef-compositeoperation"}, "#enumdef-compositeoperationorauto": {"displayText":"CompositeOperationOrAuto","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"CompositeOperationOrAuto","type":"enum","url":"#enumdef-compositeoperationorauto"}, "#enumdef-fillmode": {"displayText":"FillMode","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"FillMode","type":"enum","url":"#enumdef-fillmode"}, "#enumdef-playbackdirection": {"displayText":"PlaybackDirection","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"PlaybackDirection","type":"enum","url":"#enumdef-playbackdirection"}, "#fill-mode": {"displayText":"fill mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"fill mode","type":"dfn","url":"#fill-mode"}, "#fill-mode-backwards": {"displayText":"backwards","export":true,"for_":["fill mode"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"backwards","type":"dfn","url":"#fill-mode-backwards"}, "#fill-mode-both": {"displayText":"both","export":true,"for_":["fill mode"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"both","type":"dfn","url":"#fill-mode-both"}, "#fill-mode-forwards": {"displayText":"forwards","export":true,"for_":["fill mode"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"forwards","type":"dfn","url":"#fill-mode-forwards"}, "#fill-mode-none": {"displayText":"none","export":true,"for_":["fill mode"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"none","type":"dfn","url":"#fill-mode-none"}, "#finish-an-animation": {"displayText":"finish an animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"finish an animation","type":"dfn","url":"#finish-an-animation"}, "#finish-event": {"displayText":"finish event","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"finish event","type":"dfn","url":"#finish-event"}, "#finish-notification-steps": {"displayText":"finish notification steps","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"finish notification steps","type":"dfn","url":"#finish-notification-steps"}, "#global-animation-list": {"displayText":"global animation list","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"global animation list","type":"dfn","url":"#global-animation-list"}, "#idl-attribute-name-to-animation-property-name": {"displayText":"idl attribute name to animation property name","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"idl attribute name to animation property name","type":"dfn","url":"#idl-attribute-name-to-animation-property-name"}, "#in-effect": {"displayText":"in effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"in effect","type":"dfn","url":"#in-effect"}, "#in-play": {"displayText":"in play","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"in play","type":"dfn","url":"#in-play"}, "#inactive-timeline": {"displayText":"inactive timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"inactive timeline","type":"dfn","url":"#inactive-timeline"}, "#iteration-count": {"displayText":"iteration count","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration count","type":"dfn","url":"#iteration-count"}, "#iteration-duration": {"displayText":"iteration duration","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration duration","type":"dfn","url":"#iteration-duration"}, "#iteration-interval": {"displayText":"iteration interval","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration interval","type":"dfn","url":"#iteration-interval"}, "#iteration-progress": {"displayText":"iteration progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration progress","type":"dfn","url":"#iteration-progress"}, "#iteration-start": {"displayText":"iteration start","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration start","type":"dfn","url":"#iteration-start"}, "#iteration-time": {"displayText":"iteration time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration time","type":"dfn","url":"#iteration-time"}, "#iteration-time-space": {"displayText":"iteration time space","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"iteration time space","type":"dfn","url":"#iteration-time-space"}, "#keyframe": {"displayText":"keyframe","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframe","type":"dfn","url":"#keyframe"}, "#keyframe-effect": {"displayText":"keyframe effect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframe effect","type":"dfn","url":"#keyframe-effect"}, "#keyframe-effect-effect-target": {"displayText":"effect target","export":true,"for_":["keyframe effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"effect target","type":"dfn","url":"#keyframe-effect-effect-target"}, "#keyframe-offset": {"displayText":"keyframe offset","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframe offset","type":"dfn","url":"#keyframe-offset"}, "#keyframe-specific-composite-operation": {"displayText":"keyframe-specific composite operation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframe-specific composite operation","type":"dfn","url":"#keyframe-specific-composite-operation"}, "#keyframe-specific-easing-function": {"displayText":"keyframe-specific easing function","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"keyframe-specific easing function","type":"dfn","url":"#keyframe-specific-easing-function"}, "#keyframeeffect": {"displayText":"KeyframeEffect","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"KeyframeEffect","type":"interface","url":"#keyframeeffect"}, "#local-time": {"displayText":"local time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"local time","type":"dfn","url":"#local-time"}, "#loosely-sorted-by-offset": {"displayText":"loosely sorted by offset","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"loosely sorted by offset","type":"dfn","url":"#loosely-sorted-by-offset"}, "#monotonically-increasing-timeline": {"displayText":"monotonically increasing","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"monotonically increasing","type":"dfn","url":"#monotonically-increasing-timeline"}, "#neutral-value-for-composition": {"displayText":"neutral value for composition","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"neutral value for composition","type":"dfn","url":"#neutral-value-for-composition"}, "#not-animatable": {"displayText":"not animatable","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"not animatable","type":"dfn","url":"#not-animatable"}, "#offsetk": {"displayText":"offsetk","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"offsetk","type":"dfn","url":"#offsetk"}, "#origin-time": {"displayText":"origin time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"origin time","type":"dfn","url":"#origin-time"}, "#overall-progress": {"displayText":"overall progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"overall progress","type":"dfn","url":"#overall-progress"}, "#pause-an-animation": {"displayText":"pause an animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pause an animation","type":"dfn","url":"#pause-an-animation"}, "#pending-animation-event-queue": {"displayText":"pending animation event queue","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pending animation event queue","type":"dfn","url":"#pending-animation-event-queue"}, "#pending-pause-task": {"displayText":"pending pause task","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pending pause task","type":"dfn","url":"#pending-pause-task"}, "#pending-play-task": {"displayText":"pending play task","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pending play task","type":"dfn","url":"#pending-play-task"}, "#pending-playback-rate": {"displayText":"pending playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"pending playback rate","type":"dfn","url":"#pending-playback-rate"}, "#persisted-replace-state": {"displayText":"persisted replace state","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"persisted replace state","type":"dfn","url":"#persisted-replace-state"}, "#play-an-animation": {"displayText":"play an animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"play an animation","type":"dfn","url":"#play-an-animation"}, "#play-state-finished": {"displayText":"finished play state","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"finished play state","type":"dfn","url":"#play-state-finished"}, "#play-state-idle": {"displayText":"idle","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"idle","type":"dfn","url":"#play-state-idle"}, "#play-state-paused": {"displayText":"paused","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"paused","type":"dfn","url":"#play-state-paused"}, "#play-state-running": {"displayText":"running","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"running","type":"dfn","url":"#play-state-running"}, "#playback-control": {"displayText":"playback control","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"playback control","type":"dfn","url":"#playback-control"}, "#playback-direction": {"displayText":"playback direction","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"playback direction","type":"dfn","url":"#playback-direction"}, "#playback-direction-alternate": {"displayText":"alternate","export":true,"for_":["playback direction"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"alternate","type":"dfn","url":"#playback-direction-alternate"}, "#playback-direction-alternate-reverse": {"displayText":"alternate-reverse","export":true,"for_":["playback direction"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"alternate-reverse","type":"dfn","url":"#playback-direction-alternate-reverse"}, "#playback-direction-normal": {"displayText":"normal","export":true,"for_":["playback direction"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"normal","type":"dfn","url":"#playback-direction-normal"}, "#playback-direction-reverse": {"displayText":"reverse","export":true,"for_":["playback direction"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"reverse","type":"dfn","url":"#playback-direction-reverse"}, "#playback-rate": {"displayText":"playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"playback rate","type":"dfn","url":"#playback-rate"}, "#previous-current-time": {"displayText":"previous current time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"previous current time","type":"dfn","url":"#previous-current-time"}, "#process-a-keyframe-like-object": {"displayText":"process a keyframe-like object","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"process a keyframe-like object","type":"dfn","url":"#process-a-keyframe-like-object"}, "#process-a-keyframes-argument": {"displayText":"process a keyframes argument","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"process a keyframes argument","type":"dfn","url":"#process-a-keyframes-argument"}, "#ready": {"displayText":"ready","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"ready","type":"dfn","url":"#ready"}, "#relevant-animations": {"displayText":"relevant animations","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"relevant animations","type":"dfn","url":"#relevant-animations"}, "#relevant-animations-for-a-subtree": {"displayText":"relevant animations for a subtree","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"relevant animations for a subtree","type":"dfn","url":"#relevant-animations-for-a-subtree"}, "#remove-event": {"displayText":"remove event","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"remove event","type":"dfn","url":"#remove-event"}, "#remove-replaced-animations": {"displayText":"remove replaced animations","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"remove replaced animations","type":"dfn","url":"#remove-replaced-animations"}, "#removed-replace-state": {"displayText":"removed replace state","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"removed replace state","type":"dfn","url":"#removed-replace-state"}, "#replace-state": {"displayText":"replace state","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"replace state","type":"dfn","url":"#replace-state"}, "#replaceable-animation": {"displayText":"replaceable","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"replaceable","type":"dfn","url":"#replaceable-animation"}, "#reverse-an-animation": {"displayText":"reverse an animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"reverse an animation","type":"dfn","url":"#reverse-an-animation"}, "#scheduled-event-time": {"displayText":"scheduled event time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"scheduled event time","type":"dfn","url":"#scheduled-event-time"}, "#seamlessly-update-the-playback-rate": {"displayText":"seamlessly update the playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"seamlessly update the playback rate","type":"dfn","url":"#seamlessly-update-the-playback-rate"}, "#seek": {"displayText":"seek","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"seek","type":"dfn","url":"#seek"}, "#set-the-playback-rate": {"displayText":"set the playback rate","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"set the playback rate","type":"dfn","url":"#set-the-playback-rate"}, "#set-the-start-time": {"displayText":"set the start time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"set the start time","type":"dfn","url":"#set-the-start-time"}, "#simple-iteration-progress": {"displayText":"simple iteration progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"simple iteration progress","type":"dfn","url":"#simple-iteration-progress"}, "#start-delay": {"displayText":"start delay","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"start delay","type":"dfn","url":"#start-delay"}, "#target-property": {"displayText":"target property","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"target property","type":"dfn","url":"#target-property"}, "#time-spaces": {"displayText":"time spaces","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"time spaces","type":"dfn","url":"#time-spaces"}, "#time-value": {"displayText":"time value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"time value","type":"dfn","url":"#time-value"}, "#timeline": {"displayText":"timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline","type":"dfn","url":"#timeline"}, "#timeline-associated-with-a-document": {"displayText":"timeline associated with a document","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline associated with a document","type":"dfn","url":"#timeline-associated-with-a-document"}, "#timeline-current-time": {"displayText":"current time","export":true,"for_":["timeline"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"current time","type":"dfn","url":"#timeline-current-time"}, "#timeline-time-to-origin-relative-time": {"displayText":"timeline time to origin-relative time","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timeline time to origin-relative time","type":"dfn","url":"#timeline-time-to-origin-relative-time"}, "#timing-model-dfn": {"displayText":"timing model","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timing model","type":"dfn","url":"#timing-model-dfn"}, "#timing-nodes": {"displayText":"timing nodes","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"timing nodes","type":"dfn","url":"#timing-nodes"}, "#transformed-progress": {"displayText":"transformed progress","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"transformed progress","type":"dfn","url":"#transformed-progress"}, "#underlying-value": {"displayText":"underlying value","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"underlying value","type":"dfn","url":"#underlying-value"}, "#unresolved": {"displayText":"unresolved","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"unresolved","type":"dfn","url":"#unresolved"}, "#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":"local","text":"update an animation's finished state","type":"dfn","url":"#update-an-animations-finished-state"}, "#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":"local","text":"update animations and send events","type":"dfn","url":"#update-animations-and-send-events"}, "#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":"local","text":"update the timing properties of an animation effect","type":"dfn","url":"#update-the-timing-properties-of-an-animation-effect"}, "#web-animations-animation-model": {"displayText":"web animations animation model","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"web animations animation model","type":"dfn","url":"#web-animations-animation-model"}, "#web-animations-api": {"displayText":"web animations api","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"web animations api","type":"dfn","url":"#web-animations-api"}, "#web-animations-model": {"displayText":"web animations model","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"web animations model","type":"dfn","url":"#web-animations-model"}, "#web-animations-timing-model": {"displayText":"web animations timing model","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"local","text":"web animations timing model","type":"dfn","url":"#web-animations-timing-model"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type": {"displayText":"completion record specification type","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"completion record specification type","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values": {"displayText":"Type","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"type","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames": {"displayText":"EnumerableOwnNames","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"enumerableownnames","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator": {"displayText":"GetIterator","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"getiterator","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod": {"displayText":"GetMethod","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"getmethod","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep": {"displayText":"IteratorStep","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"iteratorstep","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue": {"displayText":"IteratorValue","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"iteratorvalue","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc": {"displayText":"[[DefineOwnProperty]]","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"[[defineownproperty]]","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver": {"displayText":"[[Get]]","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"[[get]]","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects": {"displayText":"Promise","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"promise","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects"}, "http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols": {"displayText":"well known symbols","export":true,"for_":[],"level":"262","normative":true,"shortname":"ecma","spec":"ecma-262","status":"anchor-block","text":"well known symbols","type":"dfn","url":"http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols"}, "https://dom.spec.whatwg.org/#concept-document": {"displayText":"document","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"document","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-document"}, "https://dom.spec.whatwg.org/#concept-element-attribute-has": {"displayText":"has an attribute","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"has an attribute","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-element-attribute-has"}, "https://dom.spec.whatwg.org/#concept-event-create": {"displayText":"create an event","export":true,"for_":[],"level":"","normative":true,"shortname":"dom","spec":"dom","status":"anchor-block","text":"create an event","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-event-create"}, "https://dom.spec.whatwg.org/#concept-event-dispatch": {"displayText":"dispatch","export":true,"for_":[],"level":"","normative":true,"shortname":"dom","spec":"dom","status":"anchor-block","text":"dispatch","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-event-dispatch"}, "https://dom.spec.whatwg.org/#concept-node-document": {"displayText":"node document","export":true,"for_":[],"level":"","normative":true,"shortname":"dom","spec":"dom","status":"anchor-block","text":"node document","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-node-document"}, "https://dom.spec.whatwg.org/#concept-shadow-root": {"displayText":"shadow root","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"shadow root","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-shadow-root"}, "https://dom.spec.whatwg.org/#concept-tree-descendant": {"displayText":"descendant","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"descendant","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-descendant"}, "https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant": {"displayText":"inclusive descendant","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"inclusive descendant","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant"}, "https://dom.spec.whatwg.org/#connected": {"displayText":"connected","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"connected","type":"dfn","url":"https://dom.spec.whatwg.org/#connected"}, "https://dom.spec.whatwg.org/#constructing-events": {"displayText":"constructing events","export":true,"for_":[],"level":"","normative":true,"shortname":"dom","spec":"dom","status":"anchor-block","text":"constructing events","type":"dfn","url":"https://dom.spec.whatwg.org/#constructing-events"}, "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/#documentorshadowroot": {"displayText":"DocumentOrShadowRoot","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"DocumentOrShadowRoot","type":"interface","url":"https://dom.spec.whatwg.org/#documentorshadowroot"}, "https://dom.spec.whatwg.org/#dom-event-type": {"displayText":"type","export":true,"for_":["Event"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"type","type":"attribute","url":"https://dom.spec.whatwg.org/#dom-event-type"}, "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://dom.spec.whatwg.org/#eventtarget": {"displayText":"EventTarget","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"EventTarget","type":"interface","url":"https://dom.spec.whatwg.org/#eventtarget"}, "https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty": {"displayText":"registerProperty(definition)","export":true,"for_":["CSS"],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"current","text":"registerProperty(definition)","type":"method","url":"https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty"}, "https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-definition": {"displayText":"syntax definition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"anchor-block","text":"syntax definition","type":"dfn","url":"https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-definition"}, "https://drafts.css-houdini.org/css-properties-values-api-1/#universal-syntax-definition": {"displayText":"universal syntax definition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"anchor-block","text":"universal syntax definition","type":"dfn","url":"https://drafts.css-houdini.org/css-properties-values-api-1/#universal-syntax-definition"}, "https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode": {"displayText":"animation-fill-mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"animation-fill-mode","type":"property","url":"https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode"}, "https://drafts.csswg.org/css-animations-1/#propdef-animation-name": {"displayText":"animation-name","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"animation-name","type":"property","url":"https://drafts.csswg.org/css-animations-1/#propdef-animation-name"}, "https://drafts.csswg.org/css-animations-2/#cssanimation": {"displayText":"CSSAnimation","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-animations","spec":"css-animations-2","status":"current","text":"CSSAnimation","type":"interface","url":"https://drafts.csswg.org/css-animations-2/#cssanimation"}, "https://drafts.csswg.org/css-animations-2/#owning-element": {"displayText":"owning element (animation)","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-animations","spec":"css-animations-2","status":"anchor-block","text":"owning element (animation)","type":"dfn","url":"https://drafts.csswg.org/css-animations-2/#owning-element"}, "https://drafts.csswg.org/css-animations/#events": {"displayText":"events from CSS animations","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"anchor-block","text":"events from css animations","type":"dfn","url":"https://drafts.csswg.org/css-animations/#events"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image": {"displayText":"background-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-image","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin": {"displayText":"background-origin","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-origin","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width": {"displayText":"border-bottom-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color": {"displayText":"border-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width": {"displayText":"border-left-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width": {"displayText":"border-right-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top": {"displayText":"border-top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color": {"displayText":"border-top-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width": {"displayText":"border-top-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width": {"displayText":"border-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow": {"displayText":"box-shadow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"box-shadow","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation": {"displayText":"Animation Origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"animation origin","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-animation"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-transition": {"displayText":"Transition Origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"transition origin","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-transition"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#longhand": {"displayText":"longhand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"longhand property","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "https://drafts.csswg.org/css-cascade-5/#shorthand-property": {"displayText":"shorthand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"shorthand property","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "https://drafts.csswg.org/css-color-4/#valdef-color-transparent": {"displayText":"transparent","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"transparent","type":"value","url":"https://drafts.csswg.org/css-color-4/#valdef-color-transparent"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "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-display-4/#valdef-visibility-visible": {"displayText":"visible","export":true,"for_":["visibility"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visible","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-visible"}, "https://drafts.csswg.org/css-easing-2/#easing-function": {"displayText":"easing function","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"current","text":"easing 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-easing-2/#easing-function-input-progress-value": {"displayText":"input progress value","export":true,"for_":["easing function"],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"current","text":"input progress value","type":"dfn","url":"https://drafts.csswg.org/css-easing-2/#easing-function-input-progress-value"}, "https://drafts.csswg.org/css-easing-2/#linear-easing-function": {"displayText":"linear easing function","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"current","text":"linear easing function","type":"dfn","url":"https://drafts.csswg.org/css-easing-2/#linear-easing-function"}, "https://drafts.csswg.org/css-easing-2/#typedef-easing-function": {"displayText":"<easing-function>","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"current","text":"<easing-function>","type":"type","url":"https://drafts.csswg.org/css-easing-2/#typedef-easing-function"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-size": {"displayText":"font-size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-size","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-weight": {"displayText":"font-weight","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-weight","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-weight"}, "https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part": {"displayText":"::part()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-shadow-parts","spec":"css-shadow-parts-1","status":"current","text":"::part()","type":"selector","url":"https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part"}, "https://drafts.csswg.org/css-style-attr/#style-attribute": {"displayText":"style attribute","export":true,"for_":[],"level":"","normative":true,"shortname":"css-style-attr","spec":"css-style-attr","status":"anchor-block","text":"style attribute","type":"dfn","url":"https://drafts.csswg.org/css-style-attr/#style-attribute"}, "https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow": {"displayText":"text-shadow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"current","text":"text-shadow","type":"property","url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-shadow"}, "https://drafts.csswg.org/css-transforms-1/#propdef-transform": {"displayText":"transform","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"current","text":"transform","type":"property","url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform"}, "https://drafts.csswg.org/css-transitions-1/#after-change-style": {"displayText":"after-change style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"current","text":"after-change style","type":"dfn","url":"https://drafts.csswg.org/css-transitions-1/#after-change-style"}, "https://drafts.csswg.org/css-transitions-1/#before-change-style": {"displayText":"before-change style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"current","text":"before-change style","type":"dfn","url":"https://drafts.csswg.org/css-transitions-1/#before-change-style"}, "https://drafts.csswg.org/css-transitions-1/#style-change-event": {"displayText":"style change event","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"current","text":"style change event","type":"dfn","url":"https://drafts.csswg.org/css-transitions-1/#style-change-event"}, "https://drafts.csswg.org/css-transitions-2/#owning-element": {"displayText":"owning element (transition)","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-transitions","spec":"css-transitions-2","status":"anchor-block","text":"owning element (transition)","type":"dfn","url":"https://drafts.csswg.org/css-transitions-2/#owning-element"}, "https://drafts.csswg.org/css-transitions/#transition-events": {"displayText":"events from CSS transitions","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"anchor-block","text":"events from css transitions","type":"dfn","url":"https://drafts.csswg.org/css-transitions/#transition-events"}, "https://drafts.csswg.org/css-transitions/#transitionend": {"displayText":"transitionend","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"anchor-block","text":"transitionend","type":"dfn","url":"https://drafts.csswg.org/css-transitions/#transitionend"}, "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/#addition": {"displayText":"value addition","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"value addition","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#addition"}, "https://drafts.csswg.org/css-values-4/#em": {"displayText":"em","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"em","type":"value","url":"https://drafts.csswg.org/css-values-4/#em"}, "https://drafts.csswg.org/css-values-4/#interpolation": {"displayText":"interpolation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"interpolation","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#interpolation"}, "https://drafts.csswg.org/css-values-4/#not-additive": {"displayText":"not additive","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"not additive","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#not-additive"}, "https://drafts.csswg.org/css-values-4/#number-value": {"displayText":"<number>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<number>","type":"type","url":"https://drafts.csswg.org/css-values-4/#number-value"}, "https://drafts.csswg.org/css-variables-2/#custom-property": {"displayText":"custom property","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-variables","spec":"css-variables-2","status":"current","text":"custom property","type":"dfn","url":"https://drafts.csswg.org/css-variables-2/#custom-property"}, "https://drafts.csswg.org/css-variables-2/#typedef-custom-property-name": {"displayText":"<custom-property-name>","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-variables","spec":"css-variables-2","status":"current","text":"<custom-property-name>","type":"type","url":"https://drafts.csswg.org/css-variables-2/#typedef-custom-property-name"}, "https://drafts.csswg.org/css-will-change-1/#propdef-will-change": {"displayText":"will-change","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-will-change","spec":"css-will-change-1","status":"current","text":"will-change","type":"property","url":"https://drafts.csswg.org/css-will-change-1/#propdef-will-change"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical": {"displayText":"equivalent physical property","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"anchor-block","text":"equivalent physical property","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/css2/#propdef-float": {"displayText":"float","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"float","type":"property","url":"https://drafts.csswg.org/css2/#propdef-float"}, "https://drafts.csswg.org/cssom-1/#css-declaration-block": {"displayText":"CSS declaration block","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"css declaration block","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#css-declaration-block"}, "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/cssom-1/#cssstyledeclaration-owner-node": {"displayText":"owner node","export":true,"for_":["CSSStyleDeclaration"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"owner node","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#cssstyledeclaration-owner-node"}, "https://drafts.csswg.org/cssom-1/#set-a-css-declaration": {"displayText":"set a CSS declaration","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"set a css declaration","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#set-a-css-declaration"}, "https://drafts.csswg.org/cssom-1/#update-style-attribute-for": {"displayText":"update style attribute for","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"update style attribute for","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#update-style-attribute-for"}, "https://drafts.csswg.org/cssom/#css-property-to-idl-attribute": {"displayText":"CSS property to IDL attribute","export":true,"for_":[],"level":"","normative":true,"shortname":"cssom","spec":"cssom","status":"anchor-block","text":"css property to idl attribute","type":"dfn","url":"https://drafts.csswg.org/cssom/#css-property-to-idl-attribute"}, "https://drafts.csswg.org/cssom/#idl-attribute-to-css-property": {"displayText":"IDL attribute to CSS property","export":true,"for_":[],"level":"","normative":true,"shortname":"cssom","spec":"cssom","status":"anchor-block","text":"idl attribute to css property","type":"dfn","url":"https://drafts.csswg.org/cssom/#idl-attribute-to-css-property"}, "https://drafts.csswg.org/cssom/#serialize-a-css-value": {"displayText":"serialize a CSS value","export":true,"for_":[],"level":"","normative":true,"shortname":"cssom","spec":"cssom","status":"anchor-block","text":"serialize a css value","type":"dfn","url":"https://drafts.csswg.org/cssom/#serialize-a-css-value"}, "https://drafts.csswg.org/selectors-4/#invalid-selector": {"displayText":"invalid selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"invalid selector","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#invalid-selector"}, "https://drafts.csswg.org/selectors-4/#originating-element": {"displayText":"originating element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"originating element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#originating-element"}, "https://drafts.csswg.org/selectors-4/#pseudo-element": {"displayText":"pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"pseudo-element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "https://drafts.csswg.org/selectors-4/#typedef-pseudo-element-selector": {"displayText":"<pseudo-element-selector>","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"<pseudo-element-selector>","type":"type","url":"https://drafts.csswg.org/selectors-4/#typedef-pseudo-element-selector"}, "https://drafts.csswg.org/web-animations-2/#iteration-composite-operation": {"displayText":"iteration composite operation","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"anchor-block","text":"iteration composite operation","type":"dfn","url":"https://drafts.csswg.org/web-animations-2/#iteration-composite-operation"}, "https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate": {"displayText":"iteration composite operation accumulate","export":true,"for_":[],"level":"2","normative":true,"shortname":"web-animations","spec":"web-animations-2","status":"anchor-block","text":"iteration composite operation accumulate","type":"dfn","url":"https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate"}, "https://drafts.fxtf.org/motion-1/#propdef-offset": {"displayText":"offset","export":true,"for_":[],"level":"1","normative":true,"shortname":"motion","spec":"motion-1","status":"current","text":"offset","type":"property","url":"https://drafts.fxtf.org/motion-1/#propdef-offset"}, "https://html.spec.whatwg.org/#document": {"displayText":"Document","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"Document","type":"interface","url":"https://html.spec.whatwg.org/#document"}, "https://html.spec.whatwg.org/multipage/browsers.html#active-document": {"displayText":"active document","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"active document","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#active-document"}, "https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state": {"displayText":"an entry with persisted user state","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"an entry with persisted user state","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state"}, "https://html.spec.whatwg.org/multipage/browsers.html#being-rendered": {"displayText":"being rendered","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"being rendered","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#being-rendered"}, "https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window": {"displayText":"document associated with a window","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"document associated with a window","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window"}, "https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry": {"displayText":"session history entry","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"session history entry","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry"}, "https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions": {"displayText":"CEReactions","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"CEReactions","type":"extended-attribute","url":"https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions"}, "https://html.spec.whatwg.org/multipage/embedded-content.html#media-element": {"displayText":"media element","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"media element","type":"dfn","url":"https://html.spec.whatwg.org/multipage/embedded-content.html#media-element"}, "https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames": {"displayText":"animation frame callbacks","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"animation frame callbacks","type":"dfn","url":"https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames"}, "https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks": {"displayText":"run the animation frame callbacks","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"run the animation frame callbacks","type":"dfn","url":"https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#window": {"displayText":"Window","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"Window","type":"interface","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"}, "https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm": {"displayText":"relevant Realm","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","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#concept-settings-object-time-origin": {"displayText":"time origin","export":true,"for_":["environment settings object"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"time origin","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-time-origin"}, "https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object": {"displayText":"current global object","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"current global object","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object"}, "https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open": {"displayText":"document.open()","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"document.open()","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open"}, "https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source": {"displayText":"DOM manipulation task source","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"dom manipulation task source","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model": {"displayText":"event loop processing model","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"event loop processing model","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model"}, "https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler": {"displayText":"EventHandler","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"EventHandler","type":"interface","url":"https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"}, "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://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask": {"displayText":"queue a microtask","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"queue a microtask","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask"}, "https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task": {"displayText":"queue a task","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"queue a task","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task"}, "https://infra.spec.whatwg.org/#list": {"displayText":"list","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"list","type":"dfn","url":"https://infra.spec.whatwg.org/#list"}, "https://infra.spec.whatwg.org/#list-extend": {"displayText":"extend","export":true,"for_":["list"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"extend","type":"dfn","url":"https://infra.spec.whatwg.org/#list-extend"}, "https://infra.spec.whatwg.org/#list-iterate": {"displayText":"iterate","export":true,"for_":["list","set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"iterate","type":"dfn","url":"https://infra.spec.whatwg.org/#list-iterate"}, "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://infra.spec.whatwg.org/#ordered-set": {"displayText":"ordered set","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"ordered set","type":"dfn","url":"https://infra.spec.whatwg.org/#ordered-set"}, "https://svgwg.org/svg2-draft/mimereg.html#mime-registration": {"displayText":"SVG MIME type","export":true,"for_":[],"level":"","normative":true,"shortname":"svg2","spec":"svg2","status":"anchor-block","text":"svg mime type","type":"dfn","url":"https://svgwg.org/svg2-draft/mimereg.html#mime-registration"}, "https://w3c.github.io/hr-time/#dom-domhighrestimestamp": {"displayText":"DOMHighResTimeStamp","export":true,"for_":[],"level":"3","normative":true,"shortname":"hr-time","spec":"hr-time-3","status":"current","text":"DOMHighResTimeStamp","type":"typedef","url":"https://w3c.github.io/hr-time/#dom-domhighrestimestamp"}, "https://webidl.spec.whatwg.org/#DOMString-to-es": {"displayText":"DOMString to es","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"domstring to es","type":"dfn","url":"https://webidl.spec.whatwg.org/#DOMString-to-es"}, "https://webidl.spec.whatwg.org/#EnforceRange": {"displayText":"[EnforceRange]","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"[enforcerange]","type":"dfn","url":"https://webidl.spec.whatwg.org/#EnforceRange"}, "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":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"a new promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#a-new-promise"}, "https://webidl.spec.whatwg.org/#a-promise-resolved-with": {"displayText":"create a new resolved Promise","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"create a new resolved promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#a-promise-resolved-with"}, "https://webidl.spec.whatwg.org/#aborterror": {"displayText":"AbortError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"AbortError","type":"exception","url":"https://webidl.spec.whatwg.org/#aborterror"}, "https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value": {"displayText":"convert ecmascript to idl value","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"convert ecmascript to idl value","type":"dfn","url":"https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value"}, "https://webidl.spec.whatwg.org/#dfn-nullable-type": {"displayText":"nullable","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"nullable","type":"dfn","url":"https://webidl.spec.whatwg.org/#dfn-nullable-type"}, "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/#es-to-DOMString": {"displayText":"es to DOMString","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"es to domstring","type":"dfn","url":"https://webidl.spec.whatwg.org/#es-to-DOMString"}, "https://webidl.spec.whatwg.org/#es-to-dictionary": {"displayText":"es to dictionary","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"es to dictionary","type":"dfn","url":"https://webidl.spec.whatwg.org/#es-to-dictionary"}, "https://webidl.spec.whatwg.org/#exceptiondef-rangeerror": {"displayText":"RangeError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"RangeError","type":"exception","url":"https://webidl.spec.whatwg.org/#exceptiondef-rangeerror"}, "https://webidl.spec.whatwg.org/#exceptiondef-typeerror": {"displayText":"TypeError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"TypeError","type":"exception","url":"https://webidl.spec.whatwg.org/#exceptiondef-typeerror"}, "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-boolean": {"displayText":"boolean","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"boolean","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-boolean"}, "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-object": {"displayText":"object","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"object","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-object"}, "https://webidl.spec.whatwg.org/#idl-promise": {"displayText":"Promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Promise","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-promise"}, "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/#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/#nomodificationallowederror": {"displayText":"NoModificationAllowedError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"NoModificationAllowedError","type":"exception","url":"https://webidl.spec.whatwg.org/#nomodificationallowederror"}, "https://webidl.spec.whatwg.org/#reject": {"displayText":"reject a promise","export":true,"for_":[],"level":"","normative":true,"shortname":"webidl","spec":"webidl","status":"anchor-block","text":"reject a promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#reject"}, "https://webidl.spec.whatwg.org/#resolve": {"displayText":"resolve","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"resolve","type":"dfn","url":"https://webidl.spec.whatwg.org/#resolve"}, "https://webidl.spec.whatwg.org/#syntaxerror": {"displayText":"SyntaxError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"SyntaxError","type":"exception","url":"https://webidl.spec.whatwg.org/#syntaxerror"}, "https://www.w3.org/TR/CSS21/visuren.html#x43": {"displayText":"stacking context","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"current","text":"stacking context","type":"dfn","url":"https://www.w3.org/TR/CSS21/visuren.html#x43"}, }; 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>