Thu, 28 Jun 2012 11:43:37 -0700
Untabify the <pre> elements and regenerate so that we end up with pretty much the same result as before.
css3-animations/Overview.html | file | annotate | diff | comparison | revisions | |
css3-animations/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-animations/Overview.html Wed Jun 27 19:04:16 2012 -0700 1.2 +++ b/css3-animations/Overview.html Thu Jun 28 11:43:37 2012 -0700 1.3 @@ -1,4 +1,3 @@ 1.4 - 1.5 <!DOCTYPE html> 1.6 1.7 <html lang=en> 1.8 @@ -16,14 +15,14 @@ 1.9 1.10 <h1>CSS Animations</h1> 1.11 1.12 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 June 2012</h2> 1.13 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 June 2012</h2> 1.14 1.15 <dl> 1.16 <dt>This version: 1.17 1.18 <dd><a 1.19 - href="http://www.w3.org/TR/2012/ED-css3-animations-20120620/">http://dev.w3.org/csswg/css3-animations/</a> 1.20 - <!--http://www.w3.org/TR/2012/WD-css3-animations-20120620/--> 1.21 + href="http://www.w3.org/TR/2012/ED-css3-animations-20120628/">http://dev.w3.org/csswg/css3-animations/</a> 1.22 + <!--http://www.w3.org/TR/2012/WD-css3-animations-20120628/--> 1.23 1.24 <dt>Latest version: 1.25 1.26 @@ -631,50 +630,50 @@ 1.27 grammar</abbr> 1.28 </table> 1.29 <!-- 1.30 - <p> 1.31 - It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 1.32 - 1.33 - <div class="example"> 1.34 - <p style="display:none"> 1.35 - Example(s): 1.36 - 1.37 - <pre> 1.38 - @keyframes 'border-bloat' { 1.39 - from { 1.40 - border-width: 0; 1.41 - } 1.42 - to { 1.43 - border-width: 10px; 1.44 - } 1.45 - } 1.46 + <p> 1.47 + It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 1.48 + 1.49 + <div class="example"> 1.50 + <p style="display:none"> 1.51 + Example(s): 1.52 + 1.53 + <pre> 1.54 + @keyframes 'border-bloat' { 1.55 + from { 1.56 + border-width: 0; 1.57 + } 1.58 + to { 1.59 + border-width: 10px; 1.60 + } 1.61 + } 1.62 1.63 - @keyframes 'border-diet' { 1.64 - from { 1.65 - border-width: 4px; 1.66 - } 1.67 - to { 1.68 - border-width: 2px; 1.69 - } 1.70 - } 1.71 + @keyframes 'border-diet' { 1.72 + from { 1.73 + border-width: 4px; 1.74 + } 1.75 + to { 1.76 + border-width: 2px; 1.77 + } 1.78 + } 1.79 1.80 - div { 1.81 - animation-name: 'border-bloat', 'border-diet'; 1.82 - animation-duration: 10s, 4s; 1.83 - } 1.84 - </pre> 1.85 - <p> 1.86 - The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.87 - resulting value for the property will be the addition of the values from the 1.88 - two animations. 1.89 - 1.90 - <p> 1.91 - At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.92 - At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.93 - At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.94 - 'border-diet' as it is no longer executing). 1.95 - 1.96 - </div> 1.97 - --> 1.98 + div { 1.99 + animation-name: 'border-bloat', 'border-diet'; 1.100 + animation-duration: 10s, 4s; 1.101 + } 1.102 + </pre> 1.103 + <p> 1.104 + The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.105 + resulting value for the property will be the addition of the values from the 1.106 + two animations. 1.107 + 1.108 + <p> 1.109 + At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.110 + At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.111 + At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.112 + 'border-diet' as it is no longer executing). 1.113 + 1.114 + </div> 1.115 + --> 1.116 1.117 <h3 id=animation-duration-property><span class=secno>3.3. </span> The ‘<a 1.118 href="#animation-duration"><code 1.119 @@ -1644,7 +1643,7 @@ 1.120 1.121 <th>Initial 1.122 1.123 - <th>Applies to 1.124 + <th>Applies to 1.125 1.126 <th>Inh. 1.127
2.1 --- a/css3-animations/Overview.src.html Wed Jun 27 19:04:16 2012 -0700 2.2 +++ b/css3-animations/Overview.src.html Thu Jun 28 11:43:37 2012 -0700 2.3 @@ -188,22 +188,22 @@ 2.4 <div class="example"> 2.5 <pre> 2.6 div { 2.7 - animation-name: diagonal-slide; 2.8 - animation-duration: 5s; 2.9 - animation-iteration-count: 10; 2.10 + animation-name: diagonal-slide; 2.11 + animation-duration: 5s; 2.12 + animation-iteration-count: 10; 2.13 } 2.14 2.15 @keyframes diagonal-slide { 2.16 2.17 - from { 2.18 - left: 0; 2.19 - top: 0; 2.20 - } 2.21 + from { 2.22 + left: 0; 2.23 + top: 0; 2.24 + } 2.25 2.26 - to { 2.27 - left: 100px; 2.28 - top: 100px; 2.29 - } 2.30 + to { 2.31 + left: 100px; 2.32 + top: 100px; 2.33 + } 2.34 2.35 }</pre> 2.36 2.37 @@ -286,21 +286,21 @@ 2.38 <div class="example"> 2.39 <pre> 2.40 @keyframes wobble { 2.41 - 0% { 2.42 - left: 100px; 2.43 - } 2.44 + 0% { 2.45 + left: 100px; 2.46 + } 2.47 2.48 - 40% { 2.49 - left: 150px; 2.50 - } 2.51 + 40% { 2.52 + left: 150px; 2.53 + } 2.54 2.55 - 60% { 2.56 - left: 75px; 2.57 - } 2.58 + 60% { 2.59 + left: 75px; 2.60 + } 2.61 2.62 - 100% { 2.63 - left: 100px; 2.64 - } 2.65 + 100% { 2.66 + left: 100px; 2.67 + } 2.68 }</pre> 2.69 2.70 <p> 2.71 @@ -350,29 +350,29 @@ 2.72 <pre> 2.73 @keyframes bounce { 2.74 2.75 - from { 2.76 - top: 100px; 2.77 - animation-timing-function: ease-out; 2.78 - } 2.79 + from { 2.80 + top: 100px; 2.81 + animation-timing-function: ease-out; 2.82 + } 2.83 2.84 - 25% { 2.85 - top: 50px; 2.86 - animation-timing-function: ease-in; 2.87 - } 2.88 + 25% { 2.89 + top: 50px; 2.90 + animation-timing-function: ease-in; 2.91 + } 2.92 2.93 - 50% { 2.94 - top: 100px; 2.95 - animation-timing-function: ease-out; 2.96 - } 2.97 + 50% { 2.98 + top: 100px; 2.99 + animation-timing-function: ease-out; 2.100 + } 2.101 2.102 - 75% { 2.103 - top: 75px; 2.104 - animation-timing-function: ease-in; 2.105 - } 2.106 + 75% { 2.107 + top: 75px; 2.108 + animation-timing-function: ease-in; 2.109 + } 2.110 2.111 - to { 2.112 - top: 100px; 2.113 - } 2.114 + to { 2.115 + top: 100px; 2.116 + } 2.117 2.118 }</pre> 2.119 2.120 @@ -966,13 +966,13 @@ 2.121 2.122 <pre class='idl'> 2.123 interface AnimationEvent : Event { 2.124 - readonly attribute DOMString animationName; 2.125 - readonly attribute float elapsedTime; 2.126 - void initAnimationEvent(in DOMString typeArg, 2.127 - in boolean canBubbleArg, 2.128 - in boolean cancelableArg, 2.129 - in DOMString animationNameArg, 2.130 - in float elapsedTimeArg); 2.131 + readonly attribute DOMString animationName; 2.132 + readonly attribute float elapsedTime; 2.133 + void initAnimationEvent(in DOMString typeArg, 2.134 + in boolean canBubbleArg, 2.135 + in boolean cancelableArg, 2.136 + in DOMString animationNameArg, 2.137 + in float elapsedTimeArg); 2.138 };</pre> 2.139 2.140 2.141 @@ -1105,10 +1105,10 @@ 2.142 2.143 <pre class='idl'> 2.144 interface CSSRule { 2.145 - ... 2.146 - const unsigned short KEYFRAMES_RULE = 7; 2.147 - const unsigned short KEYFRAME_RULE = 8; 2.148 - ... 2.149 + ... 2.150 + const unsigned short KEYFRAMES_RULE = 7; 2.151 + const unsigned short KEYFRAME_RULE = 8; 2.152 + ... 2.153 };</pre> 2.154 2.155 2.156 @@ -1123,8 +1123,8 @@ 2.157 2.158 <pre class='idl'> 2.159 interface CSSKeyframeRule : CSSRule { 2.160 - attribute DOMString keyText; 2.161 - readonly attribute CSSStyleDeclaration style; 2.162 + attribute DOMString keyText; 2.163 + readonly attribute CSSStyleDeclaration style; 2.164 };</pre> 2.165 2.166 2.167 @@ -1159,12 +1159,12 @@ 2.168 2.169 <pre class='idl'> 2.170 interface CSSKeyframesRule : CSSRule { 2.171 - attribute DOMString name; 2.172 - readonly attribute CSSRuleList cssRules; 2.173 + attribute DOMString name; 2.174 + readonly attribute CSSRuleList cssRules; 2.175 2.176 - void appendRule(in DOMString rule); 2.177 - void deleteRule(in DOMString key); 2.178 - CSSKeyframeRule findRule(in DOMString key); 2.179 + void appendRule(in DOMString rule); 2.180 + void deleteRule(in DOMString key); 2.181 + CSSKeyframeRule findRule(in DOMString key); 2.182 };</pre> 2.183 2.184 2.185 @@ -1311,4 +1311,4 @@ 2.186 sgml-local-catalogs:nil 2.187 sgml-local-ecat-files:nil 2.188 End: 2.189 ---> 2.190 \ No newline at end of file 2.191 +-->