CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: css-transitions-1/Overview.bs@929747cc36de</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / file revision</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/changelog">changelog</a></li> <li><a href="/drafts/graph/929747cc36de">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/929747cc36de/css-transitions-1/">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li class="current">file</li> <li><a href="/drafts/log/929747cc36de/css-transitions-1/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/929747cc36de/css-transitions-1/Overview.bs">annotate</a></li> <li><a href="/drafts/diff/929747cc36de/css-transitions-1/Overview.bs">diff</a></li> <li><a href="/drafts/comparison/929747cc36de/css-transitions-1/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-file/929747cc36de/css-transitions-1/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">css-transitions-1/Overview.bs@929747cc36de</h2> <h3 class="changeset">css-transitions-1/Overview.bs</h3> <p class="changeset-age age">Fri, 22 Nov 2024 00:21:48 +0100</p> <dl class="overview"> <dt>author</dt> <dd>andruud <andruud@gmail.com></dd> <dt>date</dt> <dd>Fri, 22 Nov 2024 00:21:48 +0100</dd> <dt>changeset 31828</dt> <dd><a class="list" href="/drafts/rev/929747cc36de">929747cc36de</a></dd> <dt>parent 30615</dt> <dd> <a href="/drafts/file/7d07d6170703/css-transitions-1/Overview.bs"> 7d07d6170703 </a> </dd> <dt>permissions</dt> <dd>-rw-r--r--</dd> </dl> <p class="description">[css-values] Total attr()-tainting for substitution values (#11218)<br/> <br/> This may have been the intended meaning of the spec text already,<br/> but I think we should clearly state the outcome of #5092:<br/> partial tainting of custom properties was proposed in that issue,<br/> discussed, objected to, and therefore *not* accepted.<br/> <br/> This PR hopefully makes it clear that attr()-tainting applies<br/> to whole substitution values, for now.</p> <div class="source"> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1" id="l1"> 1</a> <style type="text/css"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2" id="l2"> 2</a> div.prod { margin: 1em 2em; } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3" id="l3"> 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l4" id="l4"> 4</a> table.event-handlers { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l5" id="l5"> 5</a> border-collapse: collapse; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l6" id="l6"> 6</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l7" id="l7"> 7</a> table.event-handlers th, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l8" id="l8"> 8</a> table.event-handlers td { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l9" id="l9"> 9</a> padding: 0.2em 1em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l10" id="l10"> 10</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l11" id="l11"> 11</a> table.event-handlers td { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l12" id="l12"> 12</a> border: 1px solid black; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l13" id="l13"> 13</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l14" id="l14"> 14</a> </style> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l15" id="l15"> 15</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l16" id="l16"> 16</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l17" id="l17"> 17</a> <pre class="metadata"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l18" id="l18"> 18</a> Title: CSS Transitions Level 1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l19" id="l19"> 19</a> Status: ED </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l20" id="l20"> 20</a> Work Status: Refining </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l21" id="l21"> 21</a> Shortname: css-transitions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l22" id="l22"> 22</a> Group: csswg </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l23" id="l23"> 23</a> Level: 1 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l24" id="l24"> 24</a> TR: https://www.w3.org/TR/css-transitions-1/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l25" id="l25"> 25</a> Previous version: https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l26" id="l26"> 26</a> Previous version: https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l27" id="l27"> 27</a> Previous version: https://www.w3.org/TR/2013/WD-css3-transitions-20131119/ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l28" id="l28"> 28</a> ED: https://drafts.csswg.org/css-transitions/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l29" id="l29"> 29</a> Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l30" id="l30"> 30</a> Editor: Dean Jackson, Apple Inc https://www.apple.com/, dino@apple.com, w3cid 42080 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l31" id="l31"> 31</a> Editor: Brian Birtles, Mozilla https://www.mozilla.org/, bbirtles@mozilla.com, w3cid 43194 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l32" id="l32"> 32</a> Former Editor: David Hyatt, Apple Inc https://www.apple.com/, hyatt@apple.com, w3cid 34140 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l33" id="l33"> 33</a> Former Editor: Chris Marrin, Apple Inc https://www.apple.com/, cmarrin@apple.com </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l34" id="l34"> 34</a> Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Transitions&amp;resolution=--- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l35" id="l35"> 35</a> Test Suite: https://wpt.fyi/results/css/css-transitions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l36" id="l36"> 36</a> Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l37" id="l37"> 37</a> Status Text: <strong>This document</strong> is expected to be relatively close to last call. While some issues raised have yet to be addressed, new features are extremely unlikely to be considered for this level. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l38" id="l38"> 38</a> Ignored Vars: x1, x2, y1, y2 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l39" id="l39"> 39</a> Link Defaults: css-transforms (property) transform </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l40" id="l40"> 40</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l41" id="l41"> 41</a> <pre class="link-defaults"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l42" id="l42"> 42</a> spec:css22; type:property; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l43" id="l43"> 43</a> text:top </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l44" id="l44"> 44</a> text:right </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l45" id="l45"> 45</a> text:bottom </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l46" id="l46"> 46</a> text:left </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l47" id="l47"> 47</a> text:margin-top </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l48" id="l48"> 48</a> text:margin-right </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l49" id="l49"> 49</a> text:margin-bottom </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l50" id="l50"> 50</a> text:margin-left </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l51" id="l51"> 51</a> text:padding-top </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l52" id="l52"> 52</a> text:padding-right </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l53" id="l53"> 53</a> text:padding-bottom </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l54" id="l54"> 54</a> text:padding-left </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l55" id="l55"> 55</a> text:border-top-color </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l56" id="l56"> 56</a> text:border-right-color </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l57" id="l57"> 57</a> text:border-bottom-color </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l58" id="l58"> 58</a> text:border-left-color </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l59" id="l59"> 59</a> text:border-top-width </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l60" id="l60"> 60</a> text:border-right-width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l61" id="l61"> 61</a> text:border-bottom-width </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l62" id="l62"> 62</a> text:border-left-width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l63" id="l63"> 63</a> text:background-color </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l64" id="l64"> 64</a> text:background-position </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l65" id="l65"> 65</a> text:border-spacing </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l66" id="l66"> 66</a> text:width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l67" id="l67"> 67</a> text:height </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l68" id="l68"> 68</a> text:min-width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l69" id="l69"> 69</a> text:min-height </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l70" id="l70"> 70</a> text:max-width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l71" id="l71"> 71</a> text:max-height </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l72" id="l72"> 72</a> text:clip </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l73" id="l73"> 73</a> text:letter-spacing </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l74" id="l74"> 74</a> text:line-height </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l75" id="l75"> 75</a> text:outline-color </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l76" id="l76"> 76</a> text:outline-width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l77" id="l77"> 77</a> text:text-indent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l78" id="l78"> 78</a> text:font-size </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l79" id="l79"> 79</a> text:font-weight </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l80" id="l80"> 80</a> text:vertical-align </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l81" id="l81"> 81</a> text:visibility </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l82" id="l82"> 82</a> text:word-spacing </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l83" id="l83"> 83</a> text:z-index </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l84" id="l84"> 84</a> spec:css-backgrounds-3; type:property; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l85" id="l85"> 85</a> text:background-image </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l86" id="l86"> 86</a> text:background-origin </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l87" id="l87"> 87</a> spec:css-color-4; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l88" id="l88"> 88</a> type:property; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l89" id="l89"> 89</a> text:color </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l90" id="l90"> 90</a> text:opacity </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l91" id="l91"> 91</a> type:value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l92" id="l92"> 92</a> text:green </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l93" id="l93"> 93</a> text:blue </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l94" id="l94"> 94</a> text:transparent </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l95" id="l95"> 95</a> spec:css-values-3; type:type; text:<time> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l96" id="l96"> 96</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l97" id="l97"> 97</a>  </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l98" id="l98"> 98</a> <pre class="anchors"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l99" id="l99"> 99</a> url: https://www.w3.org/TR/css3-background/#shadow-inset; type: value; for: shadow; text: inset; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l100" id="l100"> 100</a> url: https://www.w3.org/TR/css3-background/#box-shadow-none; type: value; for: shadow; text: none; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l101" id="l101"> 101</a> url: https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility; type: value; for: visibility; text: visible; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l102" id="l102"> 102</a> urlPrefix: https://www.w3.org/TR/css3-color/; type: value; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l103" id="l103"> 103</a> text: transparent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l104" id="l104"> 104</a> text: blue </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l105" id="l105"> 105</a> text: green </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l106" id="l106"> 106</a> url: http://w3c.github.io/dom/#constructing-events; type: dfn; text: event constructor; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l107" id="l107"> 107</a> urlPrefix: https://html.spec.whatwg.org/multipage/webappapis.html; type: dfn; spec: html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l108" id="l108"> 108</a> text: event handlers </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l109" id="l109"> 109</a> text: event handler event type </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l110" id="l110"> 110</a> text: event handler content attributes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l111" id="l111"> 111</a> text: event handler IDL attributes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l112" id="l112"> 112</a> urlPrefix: https://html.spec.whatwg.org/multipage/infrastructure.html; type: dfn; spec: html </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l113" id="l113"> 113</a> text: HTML elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l114" id="l114"> 114</a> text: dispatch; url: concept-event-dispatch </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l115" id="l115"> 115</a> url: https://html.spec.whatwg.org/#document; type: interface; text: Document; spec: html </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l116" id="l116"> 116</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l117" id="l117"> 117</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l118" id="l118"> 118</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l119" id="l119"> 119</a> Introduction {#introduction} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l120" id="l120"> 120</a> ============================ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l121" id="l121"> 121</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l122" id="l122"> 122</a> <p><em>This section is not normative.</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l123" id="l123"> 123</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l124" id="l124"> 124</a> This document introduces new CSS features to enable <em>implicit transitions</em>, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l125" id="l125"> 125</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l126" id="l126"> 126</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l127" id="l127"> 127</a> Value Definitions {#values} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l128" id="l128"> 128</a> ----------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l129" id="l129"> 129</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l130" id="l130"> 130</a> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l131" id="l131"> 131</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l132" id="l132"> 132</a> Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l133" id="l133"> 133</a> Combination with other CSS modules may expand the definitions of these value types. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l134" id="l134"> 134</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l135" id="l135"> 135</a> In addition to the property-specific values listed in their definitions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l136" id="l136"> 136</a> all properties defined in this specification </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l137" id="l137"> 137</a> also accept the <a>CSS-wide keywords</a> as their property value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l138" id="l138"> 138</a> For readability they have not been repeated explicitly. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l139" id="l139"> 139</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l140" id="l140"> 140</a> <span id="transitions-">Transitions</span> {#transitions} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l141" id="l141"> 141</a> ========================================================= </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l142" id="l142"> 142</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l143" id="l143"> 143</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l144" id="l144"> 144</a> Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify gradual transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l145" id="l145"> 145</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l146" id="l146"> 146</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l147" id="l147"> 147</a> For example, suppose that transitions of one second have been defined on the 'left' and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l148" id="l148"> 148</a> 'background-color' properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l149" id="l149"> 149</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l150" id="l150"> 150</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l151" id="l151"> 151</a> <img src="images/transition-example.svg" width="518" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l152" id="l152"> 152</a> alt="Example showing the initial, intermediate, and final states of a box whose color and position is interpolated"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l153" id="l153"> 153</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l154" id="l154"> 154</a> Transitions of 'left' and 'background-color'. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l155" id="l155"> 155</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l156" id="l156"> 156</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l157" id="l157"> 157</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l158" id="l158"> 158</a> Transitions are a presentational effect. The <a>computed value</a> of a property transitions over time from the old value to the new value. Therefore if a script queries the <a>computed value</a> of a property (or other data depending on it) as it is transitioning, it will see an intermediate value that represents the current animated value of the property. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l159" id="l159"> 159</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l160" id="l160"> 160</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l161" id="l161"> 161</a> The transition for a property is defined using a number of new properties. For example: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l162" id="l162"> 162</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l163" id="l163"> 163</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l164" id="l164"> 164</a> <p style="display:none"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l165" id="l165"> 165</a> Example(s): </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l166" id="l166"> 166</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l167" id="l167"> 167</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l168" id="l168"> 168</a> div { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l169" id="l169"> 169</a> transition-property: opacity; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l170" id="l170"> 170</a> transition-duration: 2s; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l171" id="l171"> 171</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l172" id="l172"> 172</a> </pre>The above example defines a transition on the 'opacity' property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l173" id="l173"> 173</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l174" id="l174"> 174</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l175" id="l175"> 175</a> Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l176" id="l176"> 176</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l177" id="l177"> 177</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l178" id="l178"> 178</a> <p style="display:none"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l179" id="l179"> 179</a> Example(s): </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l180" id="l180"> 180</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l181" id="l181"> 181</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l182" id="l182"> 182</a> div { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l183" id="l183"> 183</a> transition-property: opacity, left; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l184" id="l184"> 184</a> transition-duration: 2s, 4s; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l185" id="l185"> 185</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l186" id="l186"> 186</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l187" id="l187"> 187</a> </pre>This will cause the 'opacity' property to transition over a period of two seconds and the left property to transition over a period of four seconds. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l188" id="l188"> 188</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l189" id="l189"> 189</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l190" id="l190"> 190</a> <p id="list-matching"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l191" id="l191"> 191</a> In the case where the lists of values in transition properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l192" id="l192"> 192</a> do not have the same length, the length of the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l193" id="l193"> 193</a> 'transition-property' list determines the number of items in </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l194" id="l194"> 194</a> each list examined when starting transitions. The lists are </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l195" id="l195"> 195</a> matched up from the first value: excess values at the end are </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l196" id="l196"> 196</a> not used. If one of the other properties doesn't have enough </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l197" id="l197"> 197</a> comma-separated values to match the number of values of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l198" id="l198"> 198</a> 'transition-property', the user agent must calculate its used value by </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l199" id="l199"> 199</a> repeating the list of values until there are enough. This </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l200" id="l200"> 200</a> truncation or repetition does not affect the computed value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l201" id="l201"> 201</a> <span class="note"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l202" id="l202"> 202</a> Note: This is analogous to the behavior of the 'background-*' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l203" id="l203"> 203</a> properties, with 'background-image' analogous to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l204" id="l204"> 204</a> 'transition-property'. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l205" id="l205"> 205</a> </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l206" id="l206"> 206</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l207" id="l207"> 207</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l208" id="l208"> 208</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l209" id="l209"> 209</a> <p style="display:none"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l210" id="l210"> 210</a> Example(s): </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l211" id="l211"> 211</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l212" id="l212"> 212</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l213" id="l213"> 213</a> div { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l214" id="l214"> 214</a> transition-property: opacity, left, top, width; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l215" id="l215"> 215</a> transition-duration: 2s, 1s; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l216" id="l216"> 216</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l217" id="l217"> 217</a> </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l218" id="l218"> 218</a> transition on the 'left' property of 1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l219" id="l219"> 219</a> second duration, a transition on the 'top' property of 2 seconds duration and a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l220" id="l220"> 220</a> transition on the 'width' property of 1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l221" id="l221"> 221</a> second duration. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l222" id="l222"> 222</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l223" id="l223"> 223</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l224" id="l224"> 224</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l225" id="l225"> 225</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l226" id="l226"> 226</a> While authors can use transitions to create dynamically changing content, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l227" id="l227"> 227</a> dynamically changing content can lead to seizures in some users. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l228" id="l228"> 228</a> For information on how to avoid content that can lead to seizures, see </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l229" id="l229"> 229</a> <a href="https://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l230" id="l230"> 230</a> Seizures: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l231" id="l231"> 231</a> Do not design content in a way that is known to cause seizures</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l232" id="l232"> 232</a> ([[WCAG20]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l233" id="l233"> 233</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l234" id="l234"> 234</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l235" id="l235"> 235</a> <span id="the-transition-property-property-">The 'transition-property' Property</span> {#transition-property-property} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l236" id="l236"> 236</a> ---------------------------------------------------------------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l237" id="l237"> 237</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l238" id="l238"> 238</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l239" id="l239"> 239</a> The 'transition-property' property specifies the name of the CSS property to which the transition is applied. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l240" id="l240"> 240</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l241" id="l241"> 241</a> <pre class="propdef"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l242" id="l242"> 242</a> Name: transition-property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l243" id="l243"> 243</a> Value: none | <<single-transition-property>># </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l244" id="l244"> 244</a> Initial: all </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l245" id="l245"> 245</a> Applies to: all elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l246" id="l246"> 246</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l247" id="l247"> 247</a> Percentages: N/A </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l248" id="l248"> 248</a> Computed value: the keyword ''transition-property/none'' else a list of identifiers </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l249" id="l249"> 249</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l250" id="l250"> 250</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l251" id="l251"> 251</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l252" id="l252"> 252</a> <div class="prod"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l253" id="l253"> 253</a> <dfn type id="single-transition-property">&lt;single-transition-property&gt;</dfn> = ''transition-property/all'' | <<custom-ident>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l254" id="l254"> 254</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l255" id="l255"> 255</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l256" id="l256"> 256</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l257" id="l257"> 257</a> A value of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l258" id="l258"> 258</a> <dfn value for="transition-property">none</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l259" id="l259"> 259</a> means that no property will transition. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l260" id="l260"> 260</a> Otherwise, a list of properties to be transitioned, or the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l261" id="l261"> 261</a> keyword <dfn value for="transition-property">all</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l262" id="l262"> 262</a> which indicates that all properties are to be </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l263" id="l263"> 263</a> transitioned, is given. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l264" id="l264"> 264</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l265" id="l265"> 265</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l266" id="l266"> 266</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l267" id="l267"> 267</a> If one of the identifiers listed is not a recognized property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l268" id="l268"> 268</a> name, the implementation must </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l269" id="l269"> 269</a> still start transitions on the animatable properties in the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l270" id="l270"> 270</a> list using the duration, delay, and timing function at their </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l271" id="l271"> 271</a> respective indices in the lists for 'transition-duration', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l272" id="l272"> 272</a> 'transition-delay', and 'transition-timing-function'. In other </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l273" id="l273"> 273</a> words, unrecognized properties must be kept in </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l274" id="l274"> 274</a> the list to preserve the matching of indices. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l275" id="l275"> 275</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l276" id="l276"> 276</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l277" id="l277"> 277</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l278" id="l278"> 278</a> The <<custom-ident>> production in <<single-transition-property>> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l279" id="l279"> 279</a> also excludes the keyword ''transition-property/none'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l280" id="l280"> 280</a> in addition to the keywords always excluded from <<custom-ident>>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l281" id="l281"> 281</a> This means that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l282" id="l282"> 282</a> ''transition-property/none'', ''inherit'', and ''initial'' are not </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l283" id="l283"> 283</a> permitted as items within a list of more that one identifier; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l284" id="l284"> 284</a> any list that uses them is syntactically invalid. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l285" id="l285"> 285</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l286" id="l286"> 286</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l287" id="l287"> 287</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l288" id="l288"> 288</a> For the keyword ''transition-property/all'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l289" id="l289"> 289</a> or if one of the identifiers listed is a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l290" id="l290"> 290</a> shorthand property, implementations must start transitions for </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l291" id="l291"> 291</a> all its longhand sub-properties (or, for </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l292" id="l292"> 292</a> ''transition-property/all'', all properties), using the duration, delay, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l293" id="l293"> 293</a> and timing function at the index corresponding to the shorthand. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l294" id="l294"> 294</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l295" id="l295"> 295</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l296" id="l296"> 296</a> If a property is specified multiple times in the value of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l297" id="l297"> 297</a> 'transition-property' (either on its own, via a shorthand that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l298" id="l298"> 298</a> contains it, or via the ''transition-property/all'' value), then the transition that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l299" id="l299"> 299</a> starts uses the duration, delay, and timing function at the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l300" id="l300"> 300</a> index corresponding to the <em>last</em> item in the value of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l301" id="l301"> 301</a> 'transition-property' that calls for animating that property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l302" id="l302"> 302</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l303" id="l303"> 303</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l304" id="l304"> 304</a> Note: The ''transition-property/all'' value and 'all' shorthand </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l305" id="l305"> 305</a> property work in similar ways, so the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l306" id="l306"> 306</a> ''transition-property/all'' value is just like a shorthand that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l307" id="l307"> 307</a> covers all properties. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l308" id="l308"> 308</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l309" id="l309"> 309</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l310" id="l310"> 310</a> <span id="the-transition-duration-property-">The 'transition-duration' Property</span> {#transition-duration-property} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l311" id="l311"> 311</a> ---------------------------------------------------------------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l312" id="l312"> 312</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l313" id="l313"> 313</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l314" id="l314"> 314</a> The 'transition-duration' property defines the length of time that a transition takes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l315" id="l315"> 315</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l316" id="l316"> 316</a> <pre class="propdef"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l317" id="l317"> 317</a> Name: transition-duration </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l318" id="l318"> 318</a> Value: <<time [0s,鈭瀅>># </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l319" id="l319"> 319</a> Initial: ''0s'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l320" id="l320"> 320</a> Applies to: all elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l321" id="l321"> 321</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l322" id="l322"> 322</a> Percentages: N/A </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l323" id="l323"> 323</a> Computed value: list, each item a duration </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l324" id="l324"> 324</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l325" id="l325"> 325</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l326" id="l326"> 326</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l327" id="l327"> 327</a> This property specifies how long the transition from the old value to the new value should take. By default the value is ''0s'', meaning that the transition is immediate (i.e. there will be no animation). A negative value for 'transition-duration' renders the declaration invalid. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l328" id="l328"> 328</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l329" id="l329"> 329</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l330" id="l330"> 330</a> <span id="transition-timing-function_tag">The 'transition-timing-function' Property</span> {#transition-timing-function-property} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l331" id="l331"> 331</a> --------------------------------------------------------------------------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l332" id="l332"> 332</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l333" id="l333"> 333</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l334" id="l334"> 334</a> The 'transition-timing-function' property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l335" id="l335"> 335</a> describes how the intermediate values used during a transition will be </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l336" id="l336"> 336</a> calculated. It allows for a transition to change speed over its </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l337" id="l337"> 337</a> duration. These effects are commonly called <em>easing</em> functions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l338" id="l338"> 338</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l339" id="l339"> 339</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l340" id="l340"> 340</a> Timing functions are defined in the separate CSS Easing Functions module </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l341" id="l341"> 341</a> [[!css-easing-1]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l342" id="l342"> 342</a> The <a spec=css-easing>input progress value</a> used is the percentage </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l343" id="l343"> 343</a> of the transition duration, and the <a spec=css-easing>output progress </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l344" id="l344"> 344</a> value</a> is used as the <var>p</var> value when [=interpolating=] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l345" id="l345"> 345</a> the property value (see [[#application]]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l346" id="l346"> 346</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l347" id="l347"> 347</a> <pre class="propdef"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l348" id="l348"> 348</a> Name: transition-timing-function </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l349" id="l349"> 349</a> Value: <<easing-function>># </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l350" id="l350"> 350</a> Initial: ''transition-timing-function/ease'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l351" id="l351"> 351</a> Applies to: all elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l352" id="l352"> 352</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l353" id="l353"> 353</a> Percentages: N/A </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l354" id="l354"> 354</a> Computed value: as specified </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l355" id="l355"> 355</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l356" id="l356"> 356</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l357" id="l357"> 357</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l358" id="l358"> 358</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l359" id="l359"> 359</a> <span id="the-transition-delay-property-">The 'transition-delay' Property</span> {#transition-delay-property} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l360" id="l360"> 360</a> ------------------------------------------------------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l361" id="l361"> 361</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l362" id="l362"> 362</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l363" id="l363"> 363</a> The 'transition-delay' property defines when the transition will start. It allows a transition to begin execution after some period of time from when it is applied. A 'transition-delay' value of ''0s'' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l364" id="l364"> 364</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l365" id="l365"> 365</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l366" id="l366"> 366</a> If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative 'transition-delay', the starting values are taken from the moment the property is changed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l367" id="l367"> 367</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l368" id="l368"> 368</a> <pre class="propdef"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l369" id="l369"> 369</a> Name: transition-delay </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l370" id="l370"> 370</a> Value: <<time>># </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l371" id="l371"> 371</a> Initial: ''0s'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l372" id="l372"> 372</a> Applies to: all elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l373" id="l373"> 373</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l374" id="l374"> 374</a> Percentages: N/A </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l375" id="l375"> 375</a> Computed value: list, each item a duration </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l376" id="l376"> 376</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l377" id="l377"> 377</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l378" id="l378"> 378</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l379" id="l379"> 379</a> <span id="the-transition-shorthand-property-">The 'transition' Shorthand Property</span> {#transition-shorthand-property} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l380" id="l380"> 380</a> ------------------------------------------------------------------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l381" id="l381"> 381</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l382" id="l382"> 382</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l383" id="l383"> 383</a> The 'transition' shorthand property combines the four properties described above into a single property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l384" id="l384"> 384</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l385" id="l385"> 385</a> <pre class="propdef shorthand"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l386" id="l386"> 386</a> Name: transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l387" id="l387"> 387</a> Value: <<single-transition>># </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l388" id="l388"> 388</a> Applies to: all elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l389" id="l389"> 389</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l390" id="l390"> 390</a> Percentages: N/A </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l391" id="l391"> 391</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l392" id="l392"> 392</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l393" id="l393"> 393</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l394" id="l394"> 394</a> <div class="prod"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l395" id="l395"> 395</a> <dfn type id="single-transition">&lt;single-transition&gt;</dfn> = [ ''transition-property/none'' | <<single-transition-property>> ] || <<time>> || <<easing-function>> || <<time>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l396" id="l396"> 396</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l397" id="l397"> 397</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l398" id="l398"> 398</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l399" id="l399"> 399</a> Note that order is important within the items in this property: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l400" id="l400"> 400</a> the first value that can be parsed as a time is assigned to the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l401" id="l401"> 401</a> transition-duration, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l402" id="l402"> 402</a> and the second value that can be parsed as a time is assigned to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l403" id="l403"> 403</a> transition-delay. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l404" id="l404"> 404</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l405" id="l405"> 405</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l406" id="l406"> 406</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l407" id="l407"> 407</a> If there is more than one <<single-transition>> in the shorthand, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l408" id="l408"> 408</a> and any of the transitions has </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l409" id="l409"> 409</a> ''transition-property/none'' as the <<single-transition-property>>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l410" id="l410"> 410</a> then the declaration is invalid. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l411" id="l411"> 411</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l412" id="l412"> 412</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l413" id="l413"> 413</a> Starting of transitions {#starting} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l414" id="l414"> 414</a> =================================== </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l415" id="l415"> 415</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l416" id="l416"> 416</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l417" id="l417"> 417</a> Implementations must maintain a set of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l418" id="l418"> 418</a> <dfn export lt="running transition">running transitions</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l419" id="l419"> 419</a> each of which applies to a specific element and non-shorthand </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l420" id="l420"> 420</a> property. Each of these transitions also has a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l421" id="l421"> 421</a> <dfn export for="transition">start time</dfn>, <dfn export for="transition">end time</dfn>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l422" id="l422"> 422</a> <dfn export for="transition">start value</dfn>, <dfn export for="transition">end value</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l423" id="l423"> 423</a> <dfn export for="transition">reversing-adjusted start value</dfn>, and <dfn export for="transition">reversing shortening factor</dfn>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l424" id="l424"> 424</a> Transitions are added to this set as described in this section, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l425" id="l425"> 425</a> and are removed from this set </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l426" id="l426"> 426</a> when they <a>complete</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l427" id="l427"> 427</a> or when implementations are required to <dfn export for="transition">cancel</dfn> them. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l428" id="l428"> 428</a> <span class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l429" id="l429"> 429</a> For the rationale behind the <a>reversing-adjusted start value</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l430" id="l430"> 430</a> and <a>reversing shortening factor</a>, see [[#reversing]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l431" id="l431"> 431</a> </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l432" id="l432"> 432</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l433" id="l433"> 433</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l434" id="l434"> 434</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l435" id="l435"> 435</a> Implementations must also maintain a set of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l436" id="l436"> 436</a> <dfn export lt="completed transition">completed transitions</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l437" id="l437"> 437</a> each of which </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l438" id="l438"> 438</a> (like <a>running transitions</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l439" id="l439"> 439</a> applies to a specific element and non-shorthand property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l440" id="l440"> 440</a> <span class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l441" id="l441"> 441</a> This specification maintains the invariant that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l442" id="l442"> 442</a> there is never both a <a>running transition</a> and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l443" id="l443"> 443</a> a <a>completed transition</a> for the same property and element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l444" id="l444"> 444</a> </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l445" id="l445"> 445</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l446" id="l446"> 446</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l447" id="l447"> 447</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l448" id="l448"> 448</a> If an element is no longer in the document, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l449" id="l449"> 449</a> implementations must <a>cancel</a> any <a>running transitions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l450" id="l450"> 450</a> on it and remove transitions on it from the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l451" id="l451"> 451</a> <a>completed transitions</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l452" id="l452"> 452</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l453" id="l453"> 453</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l454" id="l454"> 454</a> <div class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l455" id="l455"> 455</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l456" id="l456"> 456</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l457" id="l457"> 457</a> This set of completed transitions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l458" id="l458"> 458</a> needs to be maintained </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l459" id="l459"> 459</a> in order to prevent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l460" id="l460"> 460</a> transitions from repeating themselves in certain cases, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l461" id="l461"> 461</a> i.e., to maintain the invariant </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l462" id="l462"> 462</a> that this specification tries to maintain </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l463" id="l463"> 463</a> that unrelated style changes do not trigger transitions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l464" id="l464"> 464</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l465" id="l465"> 465</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l466" id="l466"> 466</a> <p class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l467" id="l467"> 467</a> An example where maintaining the set of completed transitions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l468" id="l468"> 468</a> is necessary would be a transition on </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l469" id="l469"> 469</a> an inherited property, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l470" id="l470"> 470</a> where the parent specifies a transition of that property for </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l471" id="l471"> 471</a> a longer duration (say, ''transition: 4s text-indent'') </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l472" id="l472"> 472</a> and a child element that inherits the parent's value specifies </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l473" id="l473"> 473</a> a transition of the same property for a shorter duration </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l474" id="l474"> 474</a> (say, ''transition: 1s text-indent''). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l475" id="l475"> 475</a> Without the maintenance of this set of completed transitions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l476" id="l476"> 476</a> implementations could start additional transitions on the child </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l477" id="l477"> 477</a> after the initial 1 second transition on the child completes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l478" id="l478"> 478</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l479" id="l479"> 479</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l480" id="l480"> 480</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l481" id="l481"> 481</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l482" id="l482"> 482</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l483" id="l483"> 483</a> Various things can cause the <a>computed values</a> of properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l484" id="l484"> 484</a> on an element to change. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l485" id="l485"> 485</a> These include </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l486" id="l486"> 486</a> insertion and removal of elements from the document tree </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l487" id="l487"> 487</a> (which both changes whether those elements have <a>computed values</a> and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l488" id="l488"> 488</a> can change the styles of other elements through selector matching), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l489" id="l489"> 489</a> changes to the document tree that cause </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l490" id="l490"> 490</a> changes to which selectors match elements, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l491" id="l491"> 491</a> changes to style sheets or style attributes, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l492" id="l492"> 492</a> and other things. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l493" id="l493"> 493</a> This specification does not define when <a>computed values</a> are updated, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l494" id="l494"> 494</a> beyond saying that implementations must not </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l495" id="l495"> 495</a> use, present, or display something resulting from the CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l496" id="l496"> 496</a> cascading, value computation, and inheritance process [[!CSS3CASCADE]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l497" id="l497"> 497</a> without updating the <a>computed value</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l498" id="l498"> 498</a> (which means merely that implementations cannot avoid </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l499" id="l499"> 499</a> meeting requirements of this specification </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l500" id="l500"> 500</a> by claiming not to have updated the <a>computed value</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l501" id="l501"> 501</a> as part of handling a style change). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l502" id="l502"> 502</a> However, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l503" id="l503"> 503</a> when an implementation updates the <a>computed value</a> of a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l504" id="l504"> 504</a> property on an element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l505" id="l505"> 505</a> to reflect one of these changes, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l506" id="l506"> 506</a> or computes the <a>computed value</a> of a property on an element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l507" id="l507"> 507</a> newly added to the document, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l508" id="l508"> 508</a> it must update the <a>computed value</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l509" id="l509"> 509</a> for all properties and elements to reflect all </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l510" id="l510"> 510</a> of these changes at the same time </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l511" id="l511"> 511</a> (or at least it must be undetectable that it was done at a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l512" id="l512"> 512</a> different time). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l513" id="l513"> 513</a> This processing of a set of simultaneous style changes is called a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l514" id="l514"> 514</a> <dfn export>style change event</dfn>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l515" id="l515"> 515</a> (Implementations typically have a <a>style change event</a> to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l516" id="l516"> 516</a> correspond with their desired screen refresh rate, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l517" id="l517"> 517</a> and when up-to-date computed style or layout information is needed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l518" id="l518"> 518</a> for a script API that depends on it.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l519" id="l519"> 519</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l520" id="l520"> 520</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l521" id="l521"> 521</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l522" id="l522"> 522</a> Since this specification does not define </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l523" id="l523"> 523</a> when a <a>style change event</a> occurs, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l524" id="l524"> 524</a> and thus what changes to computed values are considered simultaneous, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l525" id="l525"> 525</a> authors should be aware that changing any of the transition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l526" id="l526"> 526</a> properties a small amount of time after making a change that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l527" id="l527"> 527</a> might transition can result in behavior that varies between </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l528" id="l528"> 528</a> implementations, since the changes might be considered </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l529" id="l529"> 529</a> simultaneous in some implementations but not others. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l530" id="l530"> 530</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l531" id="l531"> 531</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l532" id="l532"> 532</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l533" id="l533"> 533</a> When a <a>style change event</a> occurs, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l534" id="l534"> 534</a> implementations must start transitions based on </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l535" id="l535"> 535</a> the <a>computed values</a> that changed in that event. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l536" id="l536"> 536</a> If an element is not in the document during that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l537" id="l537"> 537</a> style change event or was not in the document during </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l538" id="l538"> 538</a> the previous style change event, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l539" id="l539"> 539</a> then transitions are not started for that element </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l540" id="l540"> 540</a> in that style change event. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l541" id="l541"> 541</a> Otherwise, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l542" id="l542"> 542</a> define the <dfn export>before-change style</dfn> as </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l543" id="l543"> 543</a> the <a>computed values</a> of all properties on the element as of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l544" id="l544"> 544</a> the previous <a>style change event</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l545" id="l545"> 545</a> except with any styles derived from declarative </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l546" id="l546"> 546</a> animations such as CSS Transitions, CSS Animations </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l547" id="l547"> 547</a> ([[CSS3-ANIMATIONS]]), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l548" id="l548"> 548</a> and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]]) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l549" id="l549"> 549</a> updated to the current time. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l550" id="l550"> 550</a> Likewise, define the <dfn export>after-change style</dfn> as </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l551" id="l551"> 551</a> the <a>computed values</a> of all properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l552" id="l552"> 552</a> on the element based on the information </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l553" id="l553"> 553</a> known at the start of that <a>style change event</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l554" id="l554"> 554</a> but using the computed values of the 'animation-*' properties from the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l555" id="l555"> 555</a> <a>before-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l556" id="l556"> 556</a> excluding any styles from CSS Transitions in the computation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l557" id="l557"> 557</a> and inheriting from </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l558" id="l558"> 558</a> the <a>after-change style</a> of the parent. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l559" id="l559"> 559</a> Note that this means the <a>after-change style</a> does not differ from </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l560" id="l560"> 560</a> the <a>before-change style</a> due to newly created or canceled CSS </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l561" id="l561"> 561</a> Animations. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l562" id="l562"> 562</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l563" id="l563"> 563</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l564" id="l564"> 564</a> <div class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l565" id="l565"> 565</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l566" id="l566"> 566</a> Note that this definition of the <a>after-change style</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l567" id="l567"> 567</a> means that a single change </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l568" id="l568"> 568</a> can start a transition on the same property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l569" id="l569"> 569</a> on both an ancestor element and its descendant element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l570" id="l570"> 570</a> This can happen when a property change is inherited </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l571" id="l571"> 571</a> from one element with 'transition-*' properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l572" id="l572"> 572</a> that say to animate the changing property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l573" id="l573"> 573</a> to another element with 'transition-*' properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l574" id="l574"> 574</a> that also say to animate the changing property. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l575" id="l575"> 575</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l576" id="l576"> 576</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l577" id="l577"> 577</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l578" id="l578"> 578</a> When this happens, both transitions will run, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l579" id="l579"> 579</a> and the transition on the descendant will override </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l580" id="l580"> 580</a> the transition on the ancestor </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l581" id="l581"> 581</a> because of the normal </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l582" id="l582"> 582</a> CSS cascading and inheritance rules ([[CSS3CASCADE]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l583" id="l583"> 583</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l584" id="l584"> 584</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l585" id="l585"> 585</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l586" id="l586"> 586</a> If the transition on the descendant completes before </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l587" id="l587"> 587</a> the transition on the ancestor, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l588" id="l588"> 588</a> the descendant will then resume inheriting </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l589" id="l589"> 589</a> the (still transitioning) value from its parent. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l590" id="l590"> 590</a> This effect is likely not a desirable effect, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l591" id="l591"> 591</a> but it is essentially doing what the author asked for. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l592" id="l592"> 592</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l593" id="l593"> 593</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l594" id="l594"> 594</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l595" id="l595"> 595</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l596" id="l596"> 596</a> For each element with a <a>before-change style</a> and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l597" id="l597"> 597</a> an <a>after-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l598" id="l598"> 598</a> and each property (other than shorthands), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l599" id="l599"> 599</a> define the <dfn export>matching transition-property value</dfn> as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l600" id="l600"> 600</a> the last value in the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l601" id="l601"> 601</a> 'transition-property' in the element's <a>after-change style</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l602" id="l602"> 602</a> that matches the property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l603" id="l603"> 603</a> as described in </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l604" id="l604"> 604</a> [[#transition-property-property]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l605" id="l605"> 605</a> If there is such a value, then corresponding to it, there is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l606" id="l606"> 606</a> a <dfn export>matching transition duration</dfn>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l607" id="l607"> 607</a> a <dfn export>matching transition delay</dfn>, and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l608" id="l608"> 608</a> a <dfn export>matching transition timing function</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l609" id="l609"> 609</a> in the values in the <a>after-change style</a> of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l610" id="l610"> 610</a> 'transition-duration', 'transition-delay', and 'transition-timing-function' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l611" id="l611"> 611</a> (see <a href="#list-matching">the rules on matching lists</a>). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l612" id="l612"> 612</a> Define the <dfn export for="transition">combined duration</dfn> of the transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l613" id="l613"> 613</a> as the sum of max(<a>matching transition duration</a>, ''0s'') and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l614" id="l614"> 614</a> the <a>matching transition delay</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l615" id="l615"> 615</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l616" id="l616"> 616</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l617" id="l617"> 617</a> When comparing the [=before-change style=] and [=after-change style=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l618" id="l618"> 618</a> for a given property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l619" id="l619"> 619</a> the property values are <dfn>transitionable</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l620" id="l620"> 620</a> if they have an [=animation type=] that is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l621" id="l621"> 621</a> <em>neither</em> [=not animatable=] <em>nor</em> [=discrete=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l622" id="l622"> 622</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l623" id="l623"> 623</a> Note: Even if a <em>property</em> is defined to have an [=animation type=] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l624" id="l624"> 624</a> that is <em>not</em> [=discrete=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l625" id="l625"> 625</a> for a particular pair of <em>property values</em> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l626" id="l626"> 626</a> the [=animation type=] may be [=discrete=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l627" id="l627"> 627</a> For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l628" id="l628"> 628</a> the [=animation type=] of the 'box-shadow' property is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l629" id="l629"> 629</a> <a lt="combining shadow lists">shadow list</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l630" id="l630"> 630</a> which defines that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l631" id="l631"> 631</a> when the ''shadow/inset'' keyword is absent in one value </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l632" id="l632"> 632</a> but present in the other, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l633" id="l633"> 633</a> [=discrete=] animation is used. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l634" id="l634"> 634</a> As a result </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l635" id="l635"> 635</a> ''0px 0px black'' and ''inset 10px 10px black'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l636" id="l636"> 636</a> are <em>not</em> [=transitionable=]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l637" id="l637"> 637</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l638" id="l638"> 638</a> For each element and property, the implementation must act </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l639" id="l639"> 639</a> as follows: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l640" id="l640"> 640</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l641" id="l641"> 641</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l642" id="l642"> 642</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l643" id="l643"> 643</a> If all of the following are true: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l644" id="l644"> 644</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l645" id="l645"> 645</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l646" id="l646"> 646</a> the element does not have </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l647" id="l647"> 647</a> a <a>running transition</a> for the property, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l648" id="l648"> 648</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l649" id="l649"> 649</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l650" id="l650"> 650</a> the <a>before-change style</a> is different from </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l651" id="l651"> 651</a> the <a>after-change style</a> for that property, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l652" id="l652"> 652</a> and the values for the property are [=transitionable=], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l653" id="l653"> 653</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l654" id="l654"> 654</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l655" id="l655"> 655</a> the element does not have a <a>completed transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l656" id="l656"> 656</a> for the property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l657" id="l657"> 657</a> or the <a>end value</a> of the <a>completed transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l658" id="l658"> 658</a> is different from the <a>after-change style</a> for the property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l659" id="l659"> 659</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l660" id="l660"> 660</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l661" id="l661"> 661</a> there is a <a>matching transition-property value</a>, and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l662" id="l662"> 662</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l663" id="l663"> 663</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l664" id="l664"> 664</a> the <a>combined duration</a> is greater than ''0s'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l665" id="l665"> 665</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l666" id="l666"> 666</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l667" id="l667"> 667</a> then implementations must </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l668" id="l668"> 668</a> remove the <a>completed transition</a> (if present) from the set </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l669" id="l669"> 669</a> of completed transitions and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l670" id="l670"> 670</a> start a transition whose: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l671" id="l671"> 671</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l672" id="l672"> 672</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l673" id="l673"> 673</a> <a>start time</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l674" id="l674"> 674</a> the time of the <a>style change event</a> plus </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l675" id="l675"> 675</a> the <a>matching transition delay</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l676" id="l676"> 676</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l677" id="l677"> 677</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l678" id="l678"> 678</a> <a>end time</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l679" id="l679"> 679</a> the <a>start time</a> plus </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l680" id="l680"> 680</a> the <a>matching transition duration</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l681" id="l681"> 681</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l682" id="l682"> 682</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l683" id="l683"> 683</a> <a>start value</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l684" id="l684"> 684</a> the value of the transitioning property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l685" id="l685"> 685</a> in the <a>before-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l686" id="l686"> 686</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l687" id="l687"> 687</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l688" id="l688"> 688</a> <a>end value</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l689" id="l689"> 689</a> the value of the transitioning property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l690" id="l690"> 690</a> in the <a>after-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l691" id="l691"> 691</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l692" id="l692"> 692</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l693" id="l693"> 693</a> <a>reversing-adjusted start value</a> is the same as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l694" id="l694"> 694</a> the <a>start value</a>, and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l695" id="l695"> 695</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l696" id="l696"> 696</a> <a>reversing shortening factor</a> is 1. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l697" id="l697"> 697</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l698" id="l698"> 698</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l699" id="l699"> 699</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l700" id="l700"> 700</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l701" id="l701"> 701</a> Otherwise, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l702" id="l702"> 702</a> if the element has a <a>completed transition</a> for the property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l703" id="l703"> 703</a> and the <a>end value</a> of the <a>completed transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l704" id="l704"> 704</a> is different from the <a>after-change style</a> for the property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l705" id="l705"> 705</a> then implementations must </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l706" id="l706"> 706</a> remove the <a>completed transition</a> from the set of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l707" id="l707"> 707</a> <a>completed transitions</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l708" id="l708"> 708</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l709" id="l709"> 709</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l710" id="l710"> 710</a> If the element has a <a>running transition</a> or </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l711" id="l711"> 711</a> <a>completed transition</a> for the property, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l712" id="l712"> 712</a> and there is <strong>not</strong> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l713" id="l713"> 713</a> a <a>matching transition-property value</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l714" id="l714"> 714</a> then implementations must </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l715" id="l715"> 715</a> <a>cancel</a> the <a>running transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l716" id="l716"> 716</a> or remove the <a>completed transition</a> from the set of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l717" id="l717"> 717</a> <a>completed transitions</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l718" id="l718"> 718</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l719" id="l719"> 719</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l720" id="l720"> 720</a> If the element has a <a>running transition</a> for the property, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l721" id="l721"> 721</a> there is a <a>matching transition-property value</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l722" id="l722"> 722</a> and the <a>end value</a> of the <a>running transition</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l723" id="l723"> 723</a> <strong>not</strong> equal to the value of the property in the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l724" id="l724"> 724</a> <a>after-change style</a>, then: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l725" id="l725"> 725</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l726" id="l726"> 726</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l727" id="l727"> 727</a> If the <a>current value</a> of the property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l728" id="l728"> 728</a> in the <a>running transition</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l729" id="l729"> 729</a> is equal to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l730" id="l730"> 730</a> the value of the property in the <a>after-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l731" id="l731"> 731</a> or if these two values are not [=transitionable=], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l732" id="l732"> 732</a> then implementations must </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l733" id="l733"> 733</a> <a>cancel</a> the <a>running transition</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l734" id="l734"> 734</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l735" id="l735"> 735</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l736" id="l736"> 736</a> Otherwise, if the <a>combined duration</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l737" id="l737"> 737</a> less than or equal to ''0s'', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l738" id="l738"> 738</a> or if the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l739" id="l739"> 739</a> <a>current value</a> of the property in the <a>running transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l740" id="l740"> 740</a> is not [=transitionable=] with </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l741" id="l741"> 741</a> the value of the property in the <a>after-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l742" id="l742"> 742</a> then implementations must </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l743" id="l743"> 743</a> <a>cancel</a> the <a>running transition</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l744" id="l744"> 744</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l745" id="l745"> 745</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l746" id="l746"> 746</a> Otherwise, if the <a>reversing-adjusted start value</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l747" id="l747"> 747</a> of the <a>running transition</a> is the same as the value of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l748" id="l748"> 748</a> the property in the <a>after-change style</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l749" id="l749"> 749</a> <span class="note">(see the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l750" id="l750"> 750</a> <a href="#reversing">section on reversing of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l751" id="l751"> 751</a> transitions</a> for why these case exists)</span>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l752" id="l752"> 752</a> implementations must </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l753" id="l753"> 753</a> <a>cancel</a> the <a>running transition</a> and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l754" id="l754"> 754</a> start a new transition whose: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l755" id="l755"> 755</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l756" id="l756"> 756</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l757" id="l757"> 757</a> <a>reversing-adjusted start value</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l758" id="l758"> 758</a> the <a>end value</a> of the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l759" id="l759"> 759</a> <a>running transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l760" id="l760"> 760</a> <span class="note">(Note: This represents the logical start state of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l761" id="l761"> 761</a> the transition, and allows some calculations to ignore that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l762" id="l762"> 762</a> the transition started before that state was reached, which </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l763" id="l763"> 763</a> in turn allows repeated reversals of the same transition to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l764" id="l764"> 764</a> work correctly),</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l765" id="l765"> 765</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l766" id="l766"> 766</a> <a>reversing shortening factor</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l767" id="l767"> 767</a> is the absolute value, clamped to the range [0, 1], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l768" id="l768"> 768</a> of the sum of: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l769" id="l769"> 769</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l770" id="l770"> 770</a> <li>the output of the timing function of the old transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l771" id="l771"> 771</a> at the time of the <a>style change event</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l772" id="l772"> 772</a> times the <a>reversing shortening factor</a> of the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l773" id="l773"> 773</a> old transition</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l774" id="l774"> 774</a> <li>1 minus the <a>reversing shortening factor</a> of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l775" id="l775"> 775</a> the old transition.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l776" id="l776"> 776</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l777" id="l777"> 777</a> <span class="note">Note: This represents the portion of the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l778" id="l778"> 778</a> space between the <a>reversing-adjusted start value</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l779" id="l779"> 779</a> and the <a>end value</a> that the old transition has </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l780" id="l780"> 780</a> traversed (in amounts of the value, not time), except with the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l781" id="l781"> 781</a> absolute value and clamping to handle timing functions that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l782" id="l782"> 782</a> have y1 or y2 outside the range [0, 1].</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l783" id="l783"> 783</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l784" id="l784"> 784</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l785" id="l785"> 785</a> <a>start time</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l786" id="l786"> 786</a> the time of the <a>style change event</a> plus: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l787" id="l787"> 787</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l788" id="l788"> 788</a> <li>if the <a>matching transition delay</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l789" id="l789"> 789</a> is nonnegative, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l790" id="l790"> 790</a> the <a>matching transition delay</a>, or </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l791" id="l791"> 791</a> <li>if the <a>matching transition delay</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l792" id="l792"> 792</a> is negative, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l793" id="l793"> 793</a> the product of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l794" id="l794"> 794</a> the new transition's </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l795" id="l795"> 795</a> <a>reversing shortening factor</a> and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l796" id="l796"> 796</a> the <a>matching transition delay</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l797" id="l797"> 797</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l798" id="l798"> 798</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l799" id="l799"> 799</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l800" id="l800"> 800</a> <a>end time</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l801" id="l801"> 801</a> the <a>start time</a> plus the product of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l802" id="l802"> 802</a> the <a>matching transition duration</a> and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l803" id="l803"> 803</a> the new transition's <a>reversing shortening factor</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l804" id="l804"> 804</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l805" id="l805"> 805</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l806" id="l806"> 806</a> <a>start value</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l807" id="l807"> 807</a> the <a>current value</a> of the property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l808" id="l808"> 808</a> in the <a>running transition</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l809" id="l809"> 809</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l810" id="l810"> 810</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l811" id="l811"> 811</a> <a>end value</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l812" id="l812"> 812</a> the value of the property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l813" id="l813"> 813</a> in the <a>after-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l814" id="l814"> 814</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l815" id="l815"> 815</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l816" id="l816"> 816</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l817" id="l817"> 817</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l818" id="l818"> 818</a> Otherwise, implementations must </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l819" id="l819"> 819</a> <a>cancel</a> the <a>running transition</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l820" id="l820"> 820</a> and start a new transition whose: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l821" id="l821"> 821</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l822" id="l822"> 822</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l823" id="l823"> 823</a> <a>start time</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l824" id="l824"> 824</a> the time of the <a>style change event</a> plus </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l825" id="l825"> 825</a> the <a>matching transition delay</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l826" id="l826"> 826</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l827" id="l827"> 827</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l828" id="l828"> 828</a> <a>end time</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l829" id="l829"> 829</a> the <a>start time</a> plus </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l830" id="l830"> 830</a> the <a>matching transition duration</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l831" id="l831"> 831</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l832" id="l832"> 832</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l833" id="l833"> 833</a> <a>start value</a> is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l834" id="l834"> 834</a> the <a>current value</a> of the property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l835" id="l835"> 835</a> in the <a>running transition</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l836" id="l836"> 836</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l837" id="l837"> 837</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l838" id="l838"> 838</a> <a>end value</a> is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l839" id="l839"> 839</a> the value of the property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l840" id="l840"> 840</a> in the <a>after-change style</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l841" id="l841"> 841</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l842" id="l842"> 842</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l843" id="l843"> 843</a> <a>reversing-adjusted start value</a> is the same as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l844" id="l844"> 844</a> the <a>start value</a>, and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l845" id="l845"> 845</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l846" id="l846"> 846</a> <a>reversing shortening factor</a> is 1. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l847" id="l847"> 847</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l848" id="l848"> 848</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l849" id="l849"> 849</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l850" id="l850"> 850</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l851" id="l851"> 851</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l852" id="l852"> 852</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l853" id="l853"> 853</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l854" id="l854"> 854</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l855" id="l855"> 855</a> <div class="note"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l856" id="l856"> 856</a> <p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l857" id="l857"> 857</a> Note that the above rules mean that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l858" id="l858"> 858</a> when the computed value of an animatable property changes, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l859" id="l859"> 859</a> the transitions that start are based on the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l860" id="l860"> 860</a> values of the 'transition-property', 'transition-duration', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l861" id="l861"> 861</a> 'transition-timing-function', and 'transition-delay' properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l862" id="l862"> 862</a> at the time the animatable property would first have its new </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l863" id="l863"> 863</a> computed value. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l864" id="l864"> 864</a> This means that when one of these 'transition-*' properties </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l865" id="l865"> 865</a> changes at the same time as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l866" id="l866"> 866</a> a property whose change might transition, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l867" id="l867"> 867</a> it is the <em>new</em> values of the 'transition-*' properties </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l868" id="l868"> 868</a> that control the transition. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l869" id="l869"> 869</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l870" id="l870"> 870</a> <div class="example" id="manual-reversing-example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l871" id="l871"> 871</a> <p style="display:none"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l872" id="l872"> 872</a> Example(s): </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l873" id="l873"> 873</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l874" id="l874"> 874</a> <p>This provides a way for authors to specify different values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l875" id="l875"> 875</a> of the 'transition-*' properties for the &ldquo;forward&rdquo; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l876" id="l876"> 876</a> and &ldquo;reverse&rdquo; transitions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l877" id="l877"> 877</a> when the transitions are between two states </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l878" id="l878"> 878</a> (but see <a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l879" id="l879"> 879</a> href="#reversing">below</a> for special reversing behavior when </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l880" id="l880"> 880</a> an <em>incomplete</em> transition is interrupted). Authors can </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l881" id="l881"> 881</a> specify the value of 'transition-duration', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l882" id="l882"> 882</a> 'transition-timing-function', or 'transition-delay' in the same </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l883" id="l883"> 883</a> rule where they specify the value that triggers the transition, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l884" id="l884"> 884</a> or can change these properties at the same time as they change </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l885" id="l885"> 885</a> the property that triggers the transition. Since it's the new </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l886" id="l886"> 886</a> values of these 'transition-*' properties that affect the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l887" id="l887"> 887</a> transition, these values will be used for the transitions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l888" id="l888"> 888</a> <em>to</em> the associated transitioning values. For example: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l889" id="l889"> 889</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l890" id="l890"> 890</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l891" id="l891"> 891</a> li { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l892" id="l892"> 892</a> transition: background-color linear 1s; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l893" id="l893"> 893</a> background: blue; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l894" id="l894"> 894</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l895" id="l895"> 895</a> li:hover { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l896" id="l896"> 896</a> background-color: green; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l897" id="l897"> 897</a> transition-duration: 2s; /* applies to the transition *to* the :hover state */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l898" id="l898"> 898</a> }</pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l899" id="l899"> 899</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l900" id="l900"> 900</a> When a list item with these style rules enters the :hover </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l901" id="l901"> 901</a> state, the computed 'transition-duration' at the time that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l902" id="l902"> 902</a> 'background-color' would have its new value (''green'') is ''2s'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l903" id="l903"> 903</a> so the transition from ''blue'' to ''green'' takes 2 seconds. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l904" id="l904"> 904</a> However, when the list item leaves the :hover state, the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l905" id="l905"> 905</a> transition from ''green'' to ''blue'' takes 1 second. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l906" id="l906"> 906</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l907" id="l907"> 907</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l908" id="l908"> 908</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l909" id="l909"> 909</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l910" id="l910"> 910</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l911" id="l911"> 911</a> Note that once the transition of a property has started </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l912" id="l912"> 912</a> (including being in its delay phase), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l913" id="l913"> 913</a> it continues running based on </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l914" id="l914"> 914</a> the original timing function, duration, and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l915" id="l915"> 915</a> delay, even if the 'transition-timing-function', </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l916" id="l916"> 916</a> 'transition-duration', or 'transition-delay' property changes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l917" id="l917"> 917</a> before the transition is complete. However, if the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l918" id="l918"> 918</a> 'transition-property' property changes such that the transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l919" id="l919"> 919</a> would not have started, the transition stops (and the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l920" id="l920"> 920</a> property immediately changes to its final value). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l921" id="l921"> 921</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l922" id="l922"> 922</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l923" id="l923"> 923</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l924" id="l924"> 924</a> Note that above rules mean that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l925" id="l925"> 925</a> transitions do not start when the computed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l926" id="l926"> 926</a> value of a property changes as a result of declarative animation </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l927" id="l927"> 927</a> (as opposed to scripted animation). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l928" id="l928"> 928</a> This happens because the before-change style includes up-to-date </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l929" id="l929"> 929</a> style for declarative animations. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l930" id="l930"> 930</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l931" id="l931"> 931</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l932" id="l932"> 932</a> Faster reversing of interrupted transitions {#reversing} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l933" id="l933"> 933</a> -------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l934" id="l934"> 934</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l935" id="l935"> 935</a> <div class="note"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l936" id="l936"> 936</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l937" id="l937"> 937</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l938" id="l938"> 938</a> Many common transitions effects involve transitions between two states, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l939" id="l939"> 939</a> such as the transition that occurs when the mouse pointer moves </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l940" id="l940"> 940</a> over a user interface element, and then later moves out of that element. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l941" id="l941"> 941</a> With these effects, it is common for a running transition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l942" id="l942"> 942</a> to be interrupted before it completes, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l943" id="l943"> 943</a> and the property reset to the starting value of that transition. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l944" id="l944"> 944</a> An example is a hover effect on an element, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l945" id="l945"> 945</a> where a transition starts when the pointer enters the element, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l946" id="l946"> 946</a> and then the pointer exits the element before the effect has completed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l947" id="l947"> 947</a> If the outgoing and incoming transitions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l948" id="l948"> 948</a> are executed using their specified durations and timing functions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l949" id="l949"> 949</a> the resulting effect can be distractingly asymmetric </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l950" id="l950"> 950</a> because the second transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l951" id="l951"> 951</a> takes the full specified time to move a shortened distance. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l952" id="l952"> 952</a> Instead, this specification makes second transition shorter. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l953" id="l953"> 953</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l954" id="l954"> 954</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l955" id="l955"> 955</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l956" id="l956"> 956</a> The mechanism the above rules use to cause this involves the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l957" id="l957"> 957</a> <a>reversing shortening factor</a> and the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l958" id="l958"> 958</a> <a>reversing-adjusted start value</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l959" id="l959"> 959</a> In particular, the reversing behavior is present whenever </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l960" id="l960"> 960</a> the <a>reversing shortening factor</a> is less than 1. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l961" id="l961"> 961</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l962" id="l962"> 962</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l963" id="l963"> 963</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l964" id="l964"> 964</a> Note that these rules do not fully address the problem for </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l965" id="l965"> 965</a> transition patterns that involve more than two states. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l966" id="l966"> 966</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l967" id="l967"> 967</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l968" id="l968"> 968</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l969" id="l969"> 969</a> Note that these rules lead to the entire timing function of the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l970" id="l970"> 970</a> new transition being used, rather than jumping into the middle </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l971" id="l971"> 971</a> of a timing function, which can create a jarring effect. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l972" id="l972"> 972</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l973" id="l973"> 973</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l974" id="l974"> 974</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l975" id="l975"> 975</a> This was one of several possibilities that was considered by the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l976" id="l976"> 976</a> working group. See the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l977" id="l977"> 977</a> <a href="examples/transition-reversing-demo">reversing demo</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l978" id="l978"> 978</a> demonstrating a number of them, leading to a working group </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l979" id="l979"> 979</a> resolution made on 2013-06-07 and edits made on 2013-11-11. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l980" id="l980"> 980</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l981" id="l981"> 981</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l982" id="l982"> 982</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l983" id="l983"> 983</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l984" id="l984"> 984</a> Application of transitions {#application} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l985" id="l985"> 985</a> ========================================= </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l986" id="l986"> 986</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l987" id="l987"> 987</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l988" id="l988"> 988</a> When a property on an element is undergoing a transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l989" id="l989"> 989</a> (that is, when or after the transition has started and before the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l990" id="l990"> 990</a> <a>end time</a> of the transition) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l991" id="l991"> 991</a> the transition adds a style called the <dfn export>current value</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l992" id="l992"> 992</a> to the CSS cascade </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l993" id="l993"> 993</a> at the level defined for CSS Transitions in [[!CSS3CASCADE]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l994" id="l994"> 994</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l995" id="l995"> 995</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l996" id="l996"> 996</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l997" id="l997"> 997</a> Note that this means that computed values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l998" id="l998"> 998</a> resulting from CSS transitions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l999" id="l999"> 999</a> can inherit to descendants just like </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1000" id="l1000"> 1000</a> any other computed values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1001" id="l1001"> 1001</a> In the normal case, this means that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1002" id="l1002"> 1002</a> a transition of an inherited property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1003" id="l1003"> 1003</a> applies to descendant elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1004" id="l1004"> 1004</a> just as an author would expect. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1005" id="l1005"> 1005</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1006" id="l1006"> 1006</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1007" id="l1007"> 1007</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1008" id="l1008"> 1008</a> Implementations must add this value to the cascade </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1009" id="l1009"> 1009</a> if and only if </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1010" id="l1010"> 1010</a> that property is not currently </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1011" id="l1011"> 1011</a> undergoing a CSS Animation ([[!CSS3-ANIMATIONS]]) on the same element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1012" id="l1012"> 1012</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1013" id="l1013"> 1013</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1014" id="l1014"> 1014</a> <p class="note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1015" id="l1015"> 1015</a> Note that this behavior of transitions not applying to the cascade </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1016" id="l1016"> 1016</a> when an animation on the same element and property is running </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1017" id="l1017"> 1017</a> does not affect whether the transition has started or ended. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1018" id="l1018"> 1018</a> APIs that expose whether transitions are running </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1019" id="l1019"> 1019</a> (such as <a href="#transition-events">transition events</a>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1020" id="l1020"> 1020</a> still report that a transition is running. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1021" id="l1021"> 1021</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1022" id="l1022"> 1022</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1023" id="l1023"> 1023</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1024" id="l1024"> 1024</a> If the current time is at or before the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1025" id="l1025"> 1025</a> <a>start time</a> of the transition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1026" id="l1026"> 1026</a> (that is, during the delay phase of the transition), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1027" id="l1027"> 1027</a> the <a>current value</a> is a specified style that will compute </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1028" id="l1028"> 1028</a> to the <a>start value</a> of the transition. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1029" id="l1029"> 1029</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1030" id="l1030"> 1030</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1031" id="l1031"> 1031</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1032" id="l1032"> 1032</a> If the current time is after the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1033" id="l1033"> 1033</a> <a>start time</a> of the transition </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1034" id="l1034"> 1034</a> (that is, during the duration phase of the transition), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1035" id="l1035"> 1035</a> the <a>current value</a> is a specified style that will compute </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1036" id="l1036"> 1036</a> to the result of [=interpolating=] the property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1037" id="l1037"> 1037</a> using the following values: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1038" id="l1038"> 1038</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1039" id="l1039"> 1039</a> * <var ignore>V<sub>a</sub></var>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1040" id="l1040"> 1040</a> <a>start value</a> of the transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1041" id="l1041"> 1041</a> * <var ignore>V<sub>b</sub></var>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1042" id="l1042"> 1042</a> <a>end value</a> of the transition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1043" id="l1043"> 1043</a> * <var>p</var>: the output of the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1044" id="l1044"> 1044</a> <a href="#transition-timing-function-property">timing function</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1045" id="l1045"> 1045</a> for input (current time - start time) / (end time - start time) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1046" id="l1046"> 1046</a> </p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1047" id="l1047"> 1047</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1048" id="l1048"> 1048</a> The specific [=interpolation=] procedure to be used </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1049" id="l1049"> 1049</a> is defined by the property's [=animation type=]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1050" id="l1050"> 1050</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1051" id="l1051"> 1051</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1052" id="l1052"> 1052</a> Completion of transitions {#complete} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1053" id="l1053"> 1053</a> ===================================== </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1054" id="l1054"> 1054</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1055" id="l1055"> 1055</a> <p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1056" id="l1056"> 1056</a> <a>Running transitions</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1057" id="l1057"> 1057</a> <dfn export for="transition" id="dfn-complete">complete</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1058" id="l1058"> 1058</a> at a time that is equal to or after their end time, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1059" id="l1059"> 1059</a> but prior to the first <a>style change event</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1060" id="l1060"> 1060</a> whose time is equal to or after their <a>end time</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1061" id="l1061"> 1061</a> When a transition completes, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1062" id="l1062"> 1062</a> implementations must move </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1063" id="l1063"> 1063</a> all transitions that complete at that time </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1064" id="l1064"> 1064</a> from the set of <a>running transitions</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1065" id="l1065"> 1065</a> to the set of <a>completed transitions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1066" id="l1066"> 1066</a> and then fire the <a href="#transition-events">events</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1067" id="l1067"> 1067</a> for those completions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1068" id="l1068"> 1068</a> <span class="note">(Note that doing otherwise, that is, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1069" id="l1069"> 1069</a> firing some of the events before doing all of the moving </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1070" id="l1070"> 1070</a> from <a>running transitions</a> to <a>completed transitions</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1071" id="l1071"> 1071</a> could allow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1072" id="l1072"> 1072</a> a style change event to happen </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1073" id="l1073"> 1073</a> without the necessary transitions completing, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1074" id="l1074"> 1074</a> since firing the event could cause a style change event, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1075" id="l1075"> 1075</a> if an event handler requests up-to-date computed style or </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1076" id="l1076"> 1076</a> layout data.)</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1077" id="l1077"> 1077</a> </p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1078" id="l1078"> 1078</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1079" id="l1079"> 1079</a> <span id="transition-events-">Transition Events</span> {#transition-events} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1080" id="l1080"> 1080</a> =========================================================================== </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1081" id="l1081"> 1081</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1082" id="l1082"> 1082</a> The creation, beginning, completion, and cancellation of CSS transitions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1083" id="l1083"> 1083</a> generate corresponding DOM Events. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1084" id="l1084"> 1084</a> An event is <a>dispatched</a> to the element for each property that undergoes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1085" id="l1085"> 1085</a> a transition on that element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1086" id="l1086"> 1086</a> This allows a content developer to perform actions that synchronize </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1087" id="l1087"> 1087</a> with changes to transitions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1088" id="l1088"> 1088</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1089" id="l1089"> 1089</a> Each event provides the name of the property the transition is </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1090" id="l1090"> 1090</a> associated with as well as the duration of the transition. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1091" id="l1091"> 1091</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1092" id="l1092"> 1092</a> ## Interface {{TransitionEvent}} ## {#interface-transitionevent} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1093" id="l1093"> 1093</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1094" id="l1094"> 1094</a> The {{TransitionEvent}} interface provides specific contextual information </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1095" id="l1095"> 1095</a> associated with transitions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1096" id="l1096"> 1096</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1097" id="l1097"> 1097</a> ### IDL Definition ### {#interface-transitionevent-idl} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1098" id="l1098"> 1098</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1099" id="l1099"> 1099</a> <pre class="idl"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1100" id="l1100"> 1100</a> [Exposed=Window] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1101" id="l1101"> 1101</a> interface TransitionEvent : Event { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1102" id="l1102"> 1102</a> constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict = {}); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1103" id="l1103"> 1103</a> readonly attribute CSSOMString propertyName; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1104" id="l1104"> 1104</a> readonly attribute double elapsedTime; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1105" id="l1105"> 1105</a> readonly attribute CSSOMString pseudoElement; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1106" id="l1106"> 1106</a> }; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1107" id="l1107"> 1107</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1108" id="l1108"> 1108</a> dictionary TransitionEventInit : EventInit { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1109" id="l1109"> 1109</a> CSSOMString propertyName = ""; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1110" id="l1110"> 1110</a> double elapsedTime = 0.0; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1111" id="l1111"> 1111</a> CSSOMString pseudoElement = ""; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1112" id="l1112"> 1112</a> }; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1113" id="l1113"> 1113</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1114" id="l1114"> 1114</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1115" id="l1115"> 1115</a> ### Attributes ### {#interface-transitionevent-attributes} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1116" id="l1116"> 1116</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1117" id="l1117"> 1117</a> : <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-propertyName">propertyName</dfn></code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1118" id="l1118"> 1118</a> :: The name of the CSS property associated with the transition. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1119" id="l1119"> 1119</a> <p class="note">Note: This is always the name of a longhand property. See 'transition-property' for how specifying shorthand properties causes transitions on longhands.</p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1120" id="l1120"> 1120</a> : <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-elapsedTime">elapsedTime</dfn></code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1121" id="l1121"> 1121</a> :: The amount of time the transition has been running, in seconds, when this </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1122" id="l1122"> 1122</a> event fired not including any time spent in the delay phase. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1123" id="l1123"> 1123</a> The calculation for of this member is defined along with each event type. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1124" id="l1124"> 1124</a> : <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-pseudoElement">pseudoElement</dfn></code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1125" id="l1125"> 1125</a> :: The name (beginning with two colons) of the CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1126" id="l1126"> 1126</a> pseudo-element on which the transition occurred (in </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1127" id="l1127"> 1127</a> which case the target of the event is that </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1128" id="l1128"> 1128</a> pseudo-element's corresponding element), or the empty </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1129" id="l1129"> 1129</a> string if the transition occurred on an element (which </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1130" id="l1130"> 1130</a> means the target of the event is that element). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1131" id="l1131"> 1131</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1132" id="l1132"> 1132</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1133" id="l1133"> 1133</a> <code id="TransitionEvent-constructor"><dfn constructor </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1134" id="l1134"> 1134</a> for="TransitionEvent">TransitionEvent(type, transitionEventInitDict)</dfn></code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1135" id="l1135"> 1135</a> is an <a>event constructor</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1136" id="l1136"> 1136</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1137" id="l1137"> 1137</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1138" id="l1138"> 1138</a> Types of <code>TransitionEvent</code> {#event-transitionevent} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1139" id="l1139"> 1139</a> -------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1140" id="l1140"> 1140</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1141" id="l1141"> 1141</a> The different types of transition events that can occur are: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1142" id="l1142"> 1142</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1143" id="l1143"> 1143</a> <dl dfn-type=event dfn-for=GlobalEventHandlers> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1144" id="l1144"> 1144</a> <dt><dfn id=transitionrun>transitionrun</dfn></dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1145" id="l1145"> 1145</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1146" id="l1146"> 1146</a> The {{transitionrun}} event occurs when a transition is created (i.e., </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1147" id="l1147"> 1147</a> when it is added to the set of <a>running transitions</a>). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1148" id="l1148"> 1148</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1149" id="l1149"> 1149</a> A negative 'transition-delay' will cause the event to fire with </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1150" id="l1150"> 1150</a> an {{TransitionEvent/elapsedTime}} equal to the absolute value of the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1151" id="l1151"> 1151</a> delay capped to the 'transition-duration' of the animation. That is, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1152" id="l1152"> 1152</a> the elapsed time is equal to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1153" id="l1153"> 1153</a> <code>min(max(-'transition-delay', 0), 'transition-duration'</a>)</code>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1154" id="l1154"> 1154</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1155" id="l1155"> 1155</a> <li>Bubbles: Yes</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1156" id="l1156"> 1156</a> <li>Cancelable: No</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1157" id="l1157"> 1157</a> <li>Context Info: propertyName, elapsedTime, pseudoElement</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1158" id="l1158"> 1158</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1159" id="l1159"> 1159</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1160" id="l1160"> 1160</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1161" id="l1161"> 1161</a> <dt><dfn id=transitionstart>transitionstart</dfn></dt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1162" id="l1162"> 1162</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1163" id="l1163"> 1163</a> The {{transitionstart}} event occurs when a transition's delay phase ends. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1164" id="l1164"> 1164</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1165" id="l1165"> 1165</a> The value of {{TransitionEvent/elapsedTime}} for {{transitionstart}} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1166" id="l1166"> 1166</a> events is the same as the value used for {{transitionrun}} events. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1167" id="l1167"> 1167</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1168" id="l1168"> 1168</a> <li>Bubbles: Yes</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1169" id="l1169"> 1169</a> <li>Cancelable: No</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1170" id="l1170"> 1170</a> <li>Context Info: propertyName, elapsedTime, pseudoElement</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1171" id="l1171"> 1171</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1172" id="l1172"> 1172</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1173" id="l1173"> 1173</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1174" id="l1174"> 1174</a> <dt><dfn id=transitionend>transitionend</dfn></dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1175" id="l1175"> 1175</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1176" id="l1176"> 1176</a> The {{transitionend}} event occurs at the completion of the transition. In </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1177" id="l1177"> 1177</a> the case where a transition is removed before completion, such as if the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1178" id="l1178"> 1178</a> 'transition-property' is removed, then the event will not fire. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1179" id="l1179"> 1179</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1180" id="l1180"> 1180</a> The value of {{TransitionEvent/elapsedTime}} for this event is equal to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1181" id="l1181"> 1181</a> the value of 'transition-duration'. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1182" id="l1182"> 1182</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1183" id="l1183"> 1183</a> <li>Bubbles: Yes</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1184" id="l1184"> 1184</a> <li>Cancelable: No</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1185" id="l1185"> 1185</a> <li>Context Info: propertyName, elapsedTime, pseudoElement</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1186" id="l1186"> 1186</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1187" id="l1187"> 1187</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1188" id="l1188"> 1188</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1189" id="l1189"> 1189</a> <dt><dfn id=transitioncancel>transitioncancel</dfn></dt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1190" id="l1190"> 1190</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1191" id="l1191"> 1191</a> The {{transitioncancel}} event occurs when a transition is <a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1192" id="l1192"> 1192</a> lt="cancel">canceled</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1193" id="l1193"> 1193</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1194" id="l1194"> 1194</a> The {{TransitionEvent/elapsedTime}} for {{transitioncancel}} events is </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1195" id="l1195"> 1195</a> the number of seconds from the end of the transition's delay to the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1196" id="l1196"> 1196</a> moment when the transition was canceled. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1197" id="l1197"> 1197</a> If the transition had a negative 'transition-delay', the beginning of the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1198" id="l1198"> 1198</a> transition is the moment equal to the absolute value of 'transition-delay' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1199" id="l1199"> 1199</a> seconds <em>prior</em> to when the transition was actually triggered. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1200" id="l1200"> 1200</a> Alternatively, if the transition had a positive 'transition-delay' and the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1201" id="l1201"> 1201</a> event is fired before the transition's delay has expired, the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1202" id="l1202"> 1202</a> {{AnimationEvent/elapsedTime}} will be zero. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1203" id="l1203"> 1203</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1204" id="l1204"> 1204</a> <li>Bubbles: Yes</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1205" id="l1205"> 1205</a> <li>Cancelable: No</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1206" id="l1206"> 1206</a> <li>Context Info: propertyName, elapsedTime, pseudoElement</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1207" id="l1207"> 1207</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1208" id="l1208"> 1208</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1209" id="l1209"> 1209</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1210" id="l1210"> 1210</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1211" id="l1211"> 1211</a> Event handlers on elements, <code>Document</code> objects, and <code>Window</code> objects {#event-handlers-on-elements-document-objects-and-window-objects} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1212" id="l1212"> 1212</a> --------------------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1213" id="l1213"> 1213</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1214" id="l1214"> 1214</a> The following are the <a>event handlers</a> (and their corresponding <a>event </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1215" id="l1215"> 1215</a> handler event types</a>) that must be supported by all <a>HTML elements</a>, as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1216" id="l1216"> 1216</a> both <a>event handler content attributes</a> and <a>event handler IDL </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1217" id="l1217"> 1217</a> attributes</a>; and that must be supported by all {{Document}} and {{Window}} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1218" id="l1218"> 1218</a> objects, as <a>event handler IDL attributes</a>: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1219" id="l1219"> 1219</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1220" id="l1220"> 1220</a> <table class="event-handlers"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1221" id="l1221"> 1221</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1222" id="l1222"> 1222</a> <th><a>Event handler</a></th> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1223" id="l1223"> 1223</a> <th><a>Event handler event type</a></th> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1224" id="l1224"> 1224</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1225" id="l1225"> 1225</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1226" id="l1226"> 1226</a> <td>{{GlobalEventHandlers/ontransitionrun}}</td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1227" id="l1227"> 1227</a> <td><a idl>transitionrun</a></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1228" id="l1228"> 1228</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1229" id="l1229"> 1229</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1230" id="l1230"> 1230</a> <td>{{GlobalEventHandlers/ontransitionstart}}</td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1231" id="l1231"> 1231</a> <td><a idl>transitionstart</a></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1232" id="l1232"> 1232</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1233" id="l1233"> 1233</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1234" id="l1234"> 1234</a> <td>{{GlobalEventHandlers/ontransitionend}}</td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1235" id="l1235"> 1235</a> <td><a idl>transitionend</a></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1236" id="l1236"> 1236</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1237" id="l1237"> 1237</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1238" id="l1238"> 1238</a> <td>{{GlobalEventHandlers/ontransitioncancel}}</td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1239" id="l1239"> 1239</a> <td><a idl>transitioncancel</a></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1240" id="l1240"> 1240</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1241" id="l1241"> 1241</a> </table> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1242" id="l1242"> 1242</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1243" id="l1243"> 1243</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1244" id="l1244"> 1244</a> DOM Interfaces {#interface-dom} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1245" id="l1245"> 1245</a> =============================== </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1246" id="l1246"> 1246</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1247" id="l1247"> 1247</a> This specification extends the {{GlobalEventHandlers}} interface mixin from HTML to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1248" id="l1248"> 1248</a> add <a>event handler IDL attributes</a> for <a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1249" id="l1249"> 1249</a> href="#transition-events">transition events</a> as defined in [[#event-handlers-on-elements-document-objects-and-window-objects]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1250" id="l1250"> 1250</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1251" id="l1251"> 1251</a> IDL Definition {#interface-globaleventhandlers-idl} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1252" id="l1252"> 1252</a> -------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1253" id="l1253"> 1253</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1254" id="l1254"> 1254</a> <pre class="idl"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1255" id="l1255"> 1255</a> partial interface mixin GlobalEventHandlers { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1256" id="l1256"> 1256</a> attribute EventHandler ontransitionrun; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1257" id="l1257"> 1257</a> attribute EventHandler ontransitionstart; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1258" id="l1258"> 1258</a> attribute EventHandler ontransitionend; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1259" id="l1259"> 1259</a> attribute EventHandler ontransitioncancel; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1260" id="l1260"> 1260</a> }; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1261" id="l1261"> 1261</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1262" id="l1262"> 1262</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1263" id="l1263"> 1263</a> Security Considerations {#security} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1264" id="l1264"> 1264</a> =================================== </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1265" id="l1265"> 1265</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1266" id="l1266"> 1266</a> <em>This section is not normative.</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1267" id="l1267"> 1267</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1268" id="l1268"> 1268</a> The security implications of this specification are limited </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1269" id="l1269"> 1269</a> because it doesn't allow Web content to do things </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1270" id="l1270"> 1270</a> that it could not do before. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1271" id="l1271"> 1271</a> Rather, it allows things that could previously be done with script </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1272" id="l1272"> 1272</a> to be done declaratively, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1273" id="l1273"> 1273</a> and it ways that implementations can optimize (for frame rate and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1274" id="l1274"> 1274</a> CPU usage). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1275" id="l1275"> 1275</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1276" id="l1276"> 1276</a> One of the major categories of optimizations </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1277" id="l1277"> 1277</a> that implementations can make is implementing animation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1278" id="l1278"> 1278</a> of certain high-value properties (such as 'transform' and 'opacity') </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1279" id="l1279"> 1279</a> run on a browser's compositor thread or process </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1280" id="l1280"> 1280</a> without updating style or layout on the main Web content thread </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1281" id="l1281"> 1281</a> unless up-to-date style data are needed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1282" id="l1282"> 1282</a> This optimization often requires allocations of graphics memory </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1283" id="l1283"> 1283</a> to display the contents of the element being animated. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1284" id="l1284"> 1284</a> Implementations should take care to ensure that Web content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1285" id="l1285"> 1285</a> cannot trigger unsafe out-of-memory handling </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1286" id="l1286"> 1286</a> by using large numbers of animations </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1287" id="l1287"> 1287</a> or animations on elements covering large areas </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1288" id="l1288"> 1288</a> (where large may be defined in terms of pre-transform or post-transform size). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1289" id="l1289"> 1289</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1290" id="l1290"> 1290</a> Privacy Considerations {#privacy} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1291" id="l1291"> 1291</a> ================================= </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1292" id="l1292"> 1292</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1293" id="l1293"> 1293</a> <em>This section is not normative.</em> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1294" id="l1294"> 1294</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1295" id="l1295"> 1295</a> As for security, the privacy considerations of this specification are limited </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1296" id="l1296"> 1296</a> because it does not allow Web content to do things that it could not do before. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1297" id="l1297"> 1297</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1298" id="l1298"> 1298</a> This specification may provide additional mechanisms that help to determine </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1299" id="l1299"> 1299</a> characteristics of the user's hardware or software. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1300" id="l1300"> 1300</a> However, ability to determine performance characteristics of the user's </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1301" id="l1301"> 1301</a> hardware or software is common to many Web technologies, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1302" id="l1302"> 1302</a> and this specification does not introduce new capabilities. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1303" id="l1303"> 1303</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1304" id="l1304"> 1304</a> As described in [[#accessibility]], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1305" id="l1305"> 1305</a> implementations may provide mitigations to help users with disabilities. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1306" id="l1306"> 1306</a> These mitigations are likely to be detectable by Web content, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1307" id="l1307"> 1307</a> which means that users who would benefit from these mitigations </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1308" id="l1308"> 1308</a> may face a tradeoff between keeping their disability private from </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1309" id="l1309"> 1309</a> the Web content or benefiting from the mitigation. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1310" id="l1310"> 1310</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1311" id="l1311"> 1311</a> Accessibility Considerations {#accessibility} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1312" id="l1312"> 1312</a> ============================================= </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1313" id="l1313"> 1313</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1314" id="l1314"> 1314</a> <em>This section is not normative.</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1315" id="l1315"> 1315</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1316" id="l1316"> 1316</a> Motion {#accessibility-motion} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1317" id="l1317"> 1317</a> ------------------------------ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1318" id="l1318"> 1318</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1319" id="l1319"> 1319</a> This specification provides declarative mechanisms for animations </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1320" id="l1320"> 1320</a> that previously needed to be done using script. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1321" id="l1321"> 1321</a> Providing a declarative mechanism has multiple effects: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1322" id="l1322"> 1322</a> it makes such animations easier to make and thus likely to be more common, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1323" id="l1323"> 1323</a> but it also makes it easier for user agents to modify those animations </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1324" id="l1324"> 1324</a> if such modifications are needed to meet a user's accessibility needs. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1325" id="l1325"> 1325</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1326" id="l1326"> 1326</a> Thus, users who are sensitive to movement, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1327" id="l1327"> 1327</a> or who require additional time to read or understand content, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1328" id="l1328"> 1328</a> may benefit from user agent features that allow </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1329" id="l1329"> 1329</a> animations to be disabled or slowed down. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1330" id="l1330"> 1330</a> (But see [[#privacy]] for information on the privacy implications </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1331" id="l1331"> 1331</a> of such mitigations.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1332" id="l1332"> 1332</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1333" id="l1333"> 1333</a> User agent implementors should be aware that Web content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1334" id="l1334"> 1334</a> may depend on the firing of <a href="#transition-events">transition events</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1335" id="l1335"> 1335</a> so implementations of such mitigations may wish to fire transition events </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1336" id="l1336"> 1336</a> even if the transitions were not run as continuous animations. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1337" id="l1337"> 1337</a> However, it is probably poor practice for Web content to depend on </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1338" id="l1338"> 1338</a> such events to function correctly. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1339" id="l1339"> 1339</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1340" id="l1340"> 1340</a> Cascade {#accessibility-cascade} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1341" id="l1341"> 1341</a> -------------------------------- </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1342" id="l1342"> 1342</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1343" id="l1343"> 1343</a> The CSS <a>cascade</a> is a general mechanism in CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1344" id="l1344"> 1344</a> that allows user needs to interact with author styles. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1345" id="l1345"> 1345</a> This specification interacts with the cascade, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1346" id="l1346"> 1346</a> but since it only allows animation between values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1347" id="l1347"> 1347</a> that result from the existing cascade rules, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1348" id="l1348"> 1348</a> it does not interfere with the user's ability to force </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1349" id="l1349"> 1349</a> CSS properties to have particular values. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1350" id="l1350"> 1350</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1351" id="l1351"> 1351</a> The cascade also allows users to disable transitions entirely </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1352" id="l1352"> 1352</a> by overriding the transition properties. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1353" id="l1353"> 1353</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1354" id="l1354"> 1354</a> Changes {#changes} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1355" id="l1355"> 1355</a> ================== </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1356" id="l1356"> 1356</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1357" id="l1357"> 1357</a> Changes since Working Draft of 11 October 2018 {#changes-2018} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1358" id="l1358"> 1358</a> -------------------------------------------------------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1359" id="l1359"> 1359</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1360" id="l1360"> 1360</a> The following are the substantive changes made since the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1361" id="l1361"> 1361</a> <a href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/">Working Draft </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1362" id="l1362"> 1362</a> dated 11 October 2018</a>: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1363" id="l1363"> 1363</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1364" id="l1364"> 1364</a> * (Not up to date) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1365" id="l1365"> 1365</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1366" id="l1366"> 1366</a> For more details on these changes, see the version control </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1367" id="l1367"> 1367</a> <a href="https://github.com/w3c/csswg-drafts/commits/main/css-transitions-1/Overview.bs">change log</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1368" id="l1368"> 1368</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1369" id="l1369"> 1369</a> Earlier changes {#changes-earlier} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1370" id="l1370"> 1370</a> ---------------------------------- </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1371" id="l1371"> 1371</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1372" id="l1372"> 1372</a> For changes in earlier working drafts: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1373" id="l1373"> 1373</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1374" id="l1374"> 1374</a> 1. See the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1375" id="l1375"> 1375</a> <a href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/#changes">changes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1376" id="l1376"> 1376</a> section in the 11 October 2018 Working Draft</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1377" id="l1377"> 1377</a> 1. See the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1378" id="l1378"> 1378</a> <a href="https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#changes">changes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1379" id="l1379"> 1379</a> section in the 30 November 2017 Working Draft</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1380" id="l1380"> 1380</a> 1. See the <a href="https://www.w3.org/TR/2013/WD-css3-transitions-20131119/#changes">changes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1381" id="l1381"> 1381</a> section in the 19 November 2013 Working Draft</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1382" id="l1382"> 1382</a> 1. See the <a href="https://www.w3.org/TR/2013/WD-css3-transitions-20130212/ChangeLog">the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1383" id="l1383"> 1383</a> ChangeLog</a> for changes in previous working drafts. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1384" id="l1384"> 1384</a> 1. For more details on these changes, see the version control change logs, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1385" id="l1385"> 1385</a> which are split in many parts because of file renaming: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1386" id="l1386"> 1386</a> * <a href="https://github.com/w3c/csswg-drafts/commits/master/css-transitions-1/Overview.bs">change log since 2017 October 12</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1387" id="l1387"> 1387</a> * <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.bs">change log from 2015 January 26 to 2017 October 12</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1388" id="l1388"> 1388</a> * <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.src.html">change log from 2013 March 28 to 2015 January 26</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1389" id="l1389"> 1389</a> * <a href="https://hg.csswg.org/drafts/log/tip/css3-transitions/Overview.src.html">change log before 2013 March 28</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1390" id="l1390"> 1390</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1391" id="l1391"> 1391</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1392" id="l1392"> 1392</a> Acknowledgments {#acknowledgments} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1393" id="l1393"> 1393</a> ================================== </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1394" id="l1394"> 1394</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1395" id="l1395"> 1395</a> <p>Thanks especially to the feedback from </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1396" id="l1396"> 1396</a> Tab Atkins, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1397" id="l1397"> 1397</a> Carine Bournez, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1398" id="l1398"> 1398</a> Aryeh Gregor, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1399" id="l1399"> 1399</a> Vincent Hardy, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1400" id="l1400"> 1400</a> Anne van Kesteren, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1401" id="l1401"> 1401</a> Cameron McCormack, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1402" id="l1402"> 1402</a> Alex Mogilevsky, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1403" id="l1403"> 1403</a> Jasper St. Pierre, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1404" id="l1404"> 1404</a> Estelle Weyl, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1405" id="l1405"> 1405</a> and all the rest of the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1406" id="l1406"> 1406</a> <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p> </pre> </div> </div> <script type="text/javascript">process_dates()</script> <div class="page-footer"> <p>Mercurial Repository: drafts</p> <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <p><a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a></p> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>