1.1 --- a/css3-transitions/Overview.src.html Tue Feb 05 09:57:09 2013 -0800
1.2 +++ b/css3-transitions/Overview.src.html Tue Feb 05 11:00:46 2013 -0700
1.3 @@ -1293,6 +1293,18 @@
1.4 As resolved in
1.5 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
1.6 -->
1.7 +
1.8 + <p>The definition of each CSS property defines
1.9 + when the values of that property can be interpolated
1.10 + by referring to the definitions of property types
1.11 + in the <a href="#animatable-types">previous section</a>.
1.12 + Values are animatable when
1.13 + both the from and the to values of the property have the type described.
1.14 + (When a composite type such as "length, percentage, or calc" is listed,
1.15 + this means that both values must fit into that composite type.)
1.16 + When multiple types are listed in the form "either A or B",
1.17 + both values must be of the same type to be interpolable.</p>
1.18 +
1.19 <p>For properties that exist at the time this specification was
1.20 developed, this specification defines whether and how they are
1.21 animated. However, future CSS specifications may define
1.22 @@ -1316,12 +1328,11 @@
1.23 Properties from CSS
1.24 </a></h3>
1.25
1.26 - <p>The following properties are animatable when both the from and
1.27 - the to values of the property have the type described.
1.28 - When multiple types are listed, both values must be of the same type.
1.29 - (When a composite type such as "length, percentage, or calc" is listed,
1.30 - this means that both values must fit into that composite
1.31 - type.)</p>
1.32 + <p>
1.33 + The following definitions define the animation behavior for
1.34 + properties in CSS Level 2 ([[CSS2]], [[CSS21]]) and in Level 3 of
1.35 + the CSS Color Module ([[CSS3COLOR]]).
1.36 + </p>
1.37
1.38 <table class="animatable-properties">
1.39 <tr>
1.40 @@ -1329,141 +1340,141 @@
1.41 <th>Type</th>
1.42 </tr>
1.43 <tr>
1.44 - <td>background-color</td><td><a href="#animtype-color">color</a></tr>
1.45 + <td>background-color</td><td>as <a href="#animtype-color">color</a></tr>
1.46 <tr>
1.47 - <td>background-position</td><td><a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.48 + <td>background-position</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.49 </tr>
1.50 <tr>
1.51 - <td>border-bottom-color</td><td><a href="#animtype-color">color</a></td>
1.52 + <td>border-bottom-color</td><td>as <a href="#animtype-color">color</a></td>
1.53 </tr>
1.54 <tr>
1.55 - <td>border-bottom-width</td><td><a href="#animtype-length">length</a></td>
1.56 + <td>border-bottom-width</td><td>as <a href="#animtype-length">length</a></td>
1.57 </tr>
1.58 <tr>
1.59 - <td>border-left-color</td><td><a href="#animtype-color">color</a></td>
1.60 + <td>border-left-color</td><td>as <a href="#animtype-color">color</a></td>
1.61 </tr>
1.62 <tr>
1.63 - <td>border-left-width</td><td><a href="#animtype-length">length</a></td>
1.64 + <td>border-left-width</td><td>as <a href="#animtype-length">length</a></td>
1.65 </tr>
1.66 <tr>
1.67 - <td>border-right-color</td><td><a href="#animtype-color">color</a></td>
1.68 + <td>border-right-color</td><td>as <a href="#animtype-color">color</a></td>
1.69 </tr>
1.70 <tr>
1.71 - <td>border-right-width</td><td><a href="#animtype-length">length</a></td>
1.72 + <td>border-right-width</td><td>as <a href="#animtype-length">length</a></td>
1.73 </tr>
1.74 <tr>
1.75 - <td>border-spacing</td><td><a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
1.76 + <td>border-spacing</td><td>as <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
1.77 </tr>
1.78 <tr>
1.79 - <td>border-top-color</td><td><a href="#animtype-color">color</a></td>
1.80 + <td>border-top-color</td><td>as <a href="#animtype-color">color</a></td>
1.81 </tr>
1.82 <tr>
1.83 - <td>border-top-width</td><td><a href="#animtype-length">length</a></td>
1.84 + <td>border-top-width</td><td>as <a href="#animtype-length">length</a></td>
1.85 </tr>
1.86 <tr>
1.87 - <td>bottom</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.88 + <td>bottom</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.89 </tr>
1.90 <tr>
1.91 - <td>clip</td><td><a href="#animtype-rect">rectangle</a></td>
1.92 + <td>clip</td><td>as <a href="#animtype-rect">rectangle</a></td>
1.93 </tr>
1.94 <tr>
1.95 - <td>color</td><td><a href="#animtype-color">color</a></td>
1.96 + <td>color</td><td>as <a href="#animtype-color">color</a></td>
1.97 </tr>
1.98 <tr>
1.99 - <td>crop <span class="issue">move to css3-content</span></td><td>rectangle</td>
1.100 + <td>crop <span class="issue">move to css3-content</span></td><td>as rectangle</td>
1.101 </tr>
1.102 <tr>
1.103 - <td>font-size</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.104 + <td>font-size</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.105 </tr>
1.106 <tr>
1.107 - <td>font-weight</td><td><a href="#animtype-font-weight">font weight</a></td>
1.108 + <td>font-weight</td><td>as <a href="#animtype-font-weight">font weight</a></td>
1.109 </tr>
1.110 <tr>
1.111 - <td>height</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.112 + <td>height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.113 </tr>
1.114 <tr>
1.115 - <td>left</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.116 + <td>left</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.117 </tr>
1.118 <tr>
1.119 - <td>letter-spacing</td><td><a href="#animtype-length">length</a></td>
1.120 + <td>letter-spacing</td><td>as <a href="#animtype-length">length</a></td>
1.121 </tr>
1.122 <tr>
1.123 - <td>line-height</td><td><ul><li><a href="#animtype-number">number</a></li><li><a href="#animtype-lpcalc">length, percentage, or calc</a></li></ul></td>
1.124 + <td>line-height</td><td>as either <a href="#animtype-number">number</a> or <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.125 </tr>
1.126 <tr>
1.127 - <td>margin-bottom</td><td><a href="#animtype-length">length</a></td>
1.128 + <td>margin-bottom</td><td>as <a href="#animtype-length">length</a></td>
1.129 </tr>
1.130 <tr>
1.131 - <td>margin-left</td><td><a href="#animtype-length">length</a></td>
1.132 + <td>margin-left</td><td>as <a href="#animtype-length">length</a></td>
1.133 </tr>
1.134 <tr>
1.135 - <td>margin-right</td><td><a href="#animtype-length">length</a></td>
1.136 + <td>margin-right</td><td>as <a href="#animtype-length">length</a></td>
1.137 </tr>
1.138 <tr>
1.139 - <td>margin-top</td><td><a href="#animtype-length">length</a></td>
1.140 + <td>margin-top</td><td>as <a href="#animtype-length">length</a></td>
1.141 </tr>
1.142 <tr>
1.143 - <td>max-height</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.144 + <td>max-height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.145 </tr>
1.146 <tr>
1.147 - <td>max-width</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.148 + <td>max-width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.149 </tr>
1.150 <tr>
1.151 - <td>min-height</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.152 + <td>min-height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.153 </tr>
1.154 <tr>
1.155 - <td>min-width</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.156 + <td>min-width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.157 </tr>
1.158 <tr>
1.159 - <td>opacity</td><td><a href="#animtype-number">number</a></td>
1.160 + <td>opacity</td><td>as <a href="#animtype-number">number</a></td>
1.161 </tr>
1.162 <tr>
1.163 - <td>outline-color</td><td><a href="#animtype-color">color</a></td>
1.164 + <td>outline-color</td><td>as <a href="#animtype-color">color</a></td>
1.165 </tr>
1.166 <tr>
1.167 - <td>outline-offset <span class="issue">move to css3-ui</span></td><td><a href="#animtype-length">length</a></td>
1.168 + <td>outline-offset <span class="issue">move to css3-ui</span></td><td>as <a href="#animtype-length">length</a></td>
1.169 </tr>
1.170 <tr>
1.171 - <td>outline-width</td><td><a href="#animtype-length">length</a></td>
1.172 + <td>outline-width</td><td>as <a href="#animtype-length">length</a></td>
1.173 </tr>
1.174 <tr>
1.175 - <td>padding-bottom</td><td><a href="#animtype-length">length</a></td>
1.176 + <td>padding-bottom</td><td>as <a href="#animtype-length">length</a></td>
1.177 </tr>
1.178 <tr>
1.179 - <td>padding-left</td><td><a href="#animtype-length">length</a></td>
1.180 + <td>padding-left</td><td>as <a href="#animtype-length">length</a></td>
1.181 </tr>
1.182 <tr>
1.183 - <td>padding-right</td><td><a href="#animtype-length">length</a></td>
1.184 + <td>padding-right</td><td>as <a href="#animtype-length">length</a></td>
1.185 </tr>
1.186 <tr>
1.187 - <td>padding-top</td><td><a href="#animtype-length">length</a></td>
1.188 + <td>padding-top</td><td>as <a href="#animtype-length">length</a></td>
1.189 </tr>
1.190 <tr>
1.191 - <td>right</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.192 + <td>right</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.193 </tr>
1.194 <tr>
1.195 - <td>text-indent</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.196 + <td>text-indent</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.197 </tr>
1.198 <tr>
1.199 - <td>text-shadow</td><td><a href="#animtype-shadow-list">shadow list</a></td>
1.200 + <td>text-shadow</td><td>as <a href="#animtype-shadow-list">shadow list</a></td>
1.201 </tr>
1.202 <tr>
1.203 - <td>top</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.204 + <td>top</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.205 </tr>
1.206 <tr>
1.207 - <td>vertical-align</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.208 + <td>vertical-align</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.209 </tr>
1.210 <tr>
1.211 - <td>visibility</td><td><a href="#animtype-visibility">visibility</a></td>
1.212 + <td>visibility</td><td>as <a href="#animtype-visibility">visibility</a></td>
1.213 </tr>
1.214 <tr>
1.215 - <td>width</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.216 + <td>width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.217 </tr>
1.218 <tr>
1.219 - <td>word-spacing</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.220 + <td>word-spacing</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1.221 </tr>
1.222 <tr>
1.223 - <td>z-index</td><td><a href="#animtype-integer">integer</a></td>
1.224 + <td>z-index</td><td>as <a href="#animtype-integer">integer</a></td>
1.225 </tr>
1.226 </table>
1.227
1.228 @@ -1500,40 +1511,40 @@
1.229 <th>Property Name</th><th>Type</th>
1.230 </tr>
1.231 <tr>
1.232 - <td>stop-color</td><td><a href="#animtype-color">color</a></td>
1.233 + <td>stop-color</td><td>as <a href="#animtype-color">color</a></td>
1.234 </tr>
1.235 <tr>
1.236 - <td>stop-opacity</td><td><a href="#animtype-number">number</a></td>
1.237 + <td>stop-opacity</td><td>as <a href="#animtype-number">number</a></td>
1.238 </tr>
1.239 <tr>
1.240 - <td>fill</td><td><a href="#animtype-paintserver">paint server</a></td>
1.241 + <td>fill</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1.242 </tr>
1.243 <tr>
1.244 - <td>fill-opacity</td><td><a href="#animtype-number">number</a></td>
1.245 + <td>fill-opacity</td><td>as <a href="#animtype-number">number</a></td>
1.246 </tr>
1.247 <tr>
1.248 - <td>stroke</td><td><a href="#animtype-paintserver">paint server</a></td>
1.249 + <td>stroke</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1.250 </tr>
1.251 <tr>
1.252 - <td>stroke-dasharray</td><td><a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
1.253 + <td>stroke-dasharray</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
1.254 </tr>
1.255 <tr>
1.256 - <td>stroke-dashoffset</td><td><a href="#animtype-number">number</a></td>
1.257 + <td>stroke-dashoffset</td><td>as <a href="#animtype-number">number</a></td>
1.258 </tr>
1.259 <tr>
1.260 - <td>stroke-miterlimit</td><td><a href="#animtype-number">number</a></td>
1.261 + <td>stroke-miterlimit</td><td>as <a href="#animtype-number">number</a></td>
1.262 </tr>
1.263 <tr>
1.264 - <td>stroke-opacity</td><td><a href="#animtype-number">number</a></td>
1.265 + <td>stroke-opacity</td><td>as <a href="#animtype-number">number</a></td>
1.266 </tr>
1.267 <tr>
1.268 - <td>stroke-width</td><td><a href="#animtype-number">number</a></td>
1.269 + <td>stroke-width</td><td>as <a href="#animtype-number">number</a></td>
1.270 </tr>
1.271 <tr>
1.272 - <td>viewport-fill</td><td><a href="#animtype-color">color</a></td>
1.273 + <td>viewport-fill</td><td>as <a href="#animtype-color">color</a></td>
1.274 </tr>
1.275 <tr>
1.276 - <td>viewport-fill-opacity</td><td><a href="#animtype-color">color</a></td>
1.277 + <td>viewport-fill-opacity</td><td>as <a href="#animtype-color">color</a></td>
1.278 </tr>
1.279 </table> -->
1.280
