1.1 --- a/css3-animations/Overview.src.html Thu Sep 20 10:33:20 2012 -0700
1.2 +++ b/css3-animations/Overview.src.html Thu Sep 20 10:37:35 2012 -0700
1.3 @@ -5,6 +5,9 @@
1.4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
1.5 <link rel="stylesheet" type="text/css" href="../default.css">
1.6 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
1.7 + <style type="text/css">
1.8 + div.prod { margin: 1em 2em; }
1.9 + </style>
1.10 </head>
1.11
1.12 <body>
1.13 @@ -441,7 +444,7 @@
1.14 <td><dfn>animation-name</dfn>
1.15 <tr>
1.16 <th><a href="#values">Value</a>:
1.17 - <td>[ none | IDENT ] [, [ none | IDENT ] ]*
1.18 + <td><single-animation-name> [ ',' <single-animation-name> ]*
1.19 <tr>
1.20 <th>Initial:
1.21 <td>''none''
1.22 @@ -468,6 +471,10 @@
1.23 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.24 </table>
1.25
1.26 + <div class="prod">
1.27 + <dfn><single-animation-name></dfn> = none | <IDENT>
1.28 + </div>
1.29 +
1.30 <!--
1.31 <p>
1.32 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.33 @@ -580,23 +587,7 @@
1.34 <td><dfn>animation-timing-function</dfn>
1.35 <tr>
1.36 <th><a href="#values">Value</a>:
1.37 - <td>
1.38 - [
1.39 - ease | linear | ease-in | ease-out | ease-in-out |
1.40 - step-start | step-end |
1.41 - steps(<number> [, [ start | end ] ]?) |
1.42 - cubic-bezier(<number>, <number>, <number>,
1.43 - <number>)
1.44 - ]
1.45 - [,
1.46 - [
1.47 - ease | linear | ease-in | ease-out | ease-in-out |
1.48 - step-start | step-end |
1.49 - steps(<number> [, [ start | end ] ]?) |
1.50 - cubic-bezier(<number>, <number>, <number>,
1.51 - <number>)
1.52 - ]
1.53 - ]*
1.54 + <td><single-animation-timing-function> [ ',' <single-animation-timing-function> ]*
1.55 <tr>
1.56 <th>Initial:
1.57 <td>''ease''
1.58 @@ -623,6 +614,15 @@
1.59 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.60 </table>
1.61
1.62 + <div class="prod">
1.63 + <dfn><single-animation-timing-function></dfn> =
1.64 + ease | linear | ease-in | ease-out | ease-in-out |
1.65 + step-start | step-end |
1.66 + steps(<number> [, [ start | end ] ]?) |
1.67 + cubic-bezier(<number>, <number>, <number>,
1.68 + <number>)
1.69 + </div>
1.70 +
1.71 <p>
1.72 For a keyframed animation,
1.73 the 'animation-timing-function' applies between keyframes,
1.74 @@ -654,8 +654,7 @@
1.75 <td><dfn>animation-iteration-count</dfn>
1.76 <tr>
1.77 <th><a href="#values">Value</a>:
1.78 - <td> [ infinite | <number> ]
1.79 - [, [ infinite | <number> ] ]*
1.80 + <td><single-animation-iteration-count> [ ',' <single-animation-iteration-count> ]*
1.81 <tr>
1.82 <th>Initial:
1.83 <td>''1''
1.84 @@ -682,6 +681,10 @@
1.85 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.86 </table>
1.87
1.88 + <div class="prod">
1.89 + <dfn><single-animation-iteration-count></dfn> =
1.90 + infinite | <number>
1.91 + </div>
1.92
1.93 <h3 id="animation-direction-property">
1.94 The 'animation-direction' Property</h3>
1.95 @@ -697,8 +700,7 @@
1.96 <td><dfn>animation-direction</dfn>
1.97 <tr>
1.98 <th><a href="#values">Value</a>:
1.99 - <td> [ normal | reverse | alternate | alternate-reverse ]
1.100 - [, [ normal | reverse | alternate | alternate-reverse ] ]*
1.101 + <td><single-animation-direction> [ ',' <single-animation-direction> ]*
1.102 <tr>
1.103 <th>Initial:
1.104 <td>''normal''
1.105 @@ -725,6 +727,11 @@
1.106 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.107 </table>
1.108
1.109 + <div class="prod">
1.110 + <dfn><single-animation-direction></dfn> =
1.111 + normal | reverse | alternate | alternate-reverse
1.112 + </div>
1.113 +
1.114 <dl>
1.115 <dt><dfn>normal</dfn>
1.116 <dd>
1.117 @@ -769,8 +776,7 @@
1.118 <td><dfn>animation-play-state</dfn>
1.119 <tr>
1.120 <th><a href="#values">Value</a>:
1.121 - <td> [ running | paused ]
1.122 - [, [ running | paused ] ]*
1.123 + <td><single-animation-play-state> [ ',' <single-animation-play-state> ]*
1.124 <tr>
1.125 <th>Initial:
1.126 <td>''running''
1.127 @@ -797,6 +803,10 @@
1.128 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.129 </table>
1.130
1.131 + <div class="prod">
1.132 + <dfn><single-animation-play-state></dfn> =
1.133 + running | paused
1.134 + </div>
1.135
1.136 <h3 id="animation-delay-property">
1.137 The 'animation-delay' Property</h3>
1.138 @@ -901,8 +911,7 @@
1.139 <td><dfn>animation-fill-mode</dfn>
1.140 <tr>
1.141 <th><a href="#values">Value</a>:
1.142 - <td> [ none | forwards | backwards | both ]
1.143 - [, [ none | forwards | backwards | both ] ]*
1.144 + <td><single-animation-fill-mode> [ ',' <single-animation-fill-mode> ]*
1.145 <tr>
1.146 <th>Initial:
1.147 <td>''none''
1.148 @@ -929,6 +938,10 @@
1.149 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.150 </table>
1.151
1.152 + <div class="prod">
1.153 + <dfn><single-animation-fill-mode></dfn> =
1.154 + none | forwards | backwards | both
1.155 + </div>
1.156
1.157 <h3 id="animation-shorthand-property">
1.158 The 'animation' Shorthand Property
1.159 @@ -936,38 +949,13 @@
1.160 <p>
1.161 The 'animation' shorthand property combines seven of the animation properties into a single property.
1.162
1.163 - <p>
1.164 - Note that order is important in this property.
1.165 - The first value that can be parsed as a <var><time></var> is assigned to the 'animation-duration'.
1.166 - The second value that can be parsed as a <var><time></var> is assigned to 'animation-delay'.
1.167 -
1.168 - <p class="issue">
1.169 - An alternative proposal is to accept the font shorthand approach
1.170 - of using a "/" character between the values of the same type.
1.171 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds.
1.172 -
1.173 <table class=propdef>
1.174 <tr>
1.175 <th>Name:</th>
1.176 <td><dfn>animation</dfn>
1.177 <tr>
1.178 <th><a href="#values">Value</a>:
1.179 - <td>
1.180 - [
1.181 - <animation-name> || <animation-duration> ||
1.182 - <animation-timing-function> || <animation-delay> ||
1.183 - <animation-iteration-count> || <animation-direction> ||
1.184 - <animation-fill-mode>
1.185 - ]
1.186 - [,
1.187 - [
1.188 - <animation-name> || <animation-duration> ||
1.189 - <animation-timing-function> || <animation-delay> ||
1.190 - <animation-iteration-count> || <animation-direction> ||
1.191 - <animation-fill-mode>
1.192 - ]
1.193 - ]*
1.194 -
1.195 + <td><single-animation> [ ',' <single-animation> ]*
1.196 <tr>
1.197 <th>Initial:
1.198 <td>see individual properties
1.199 @@ -994,6 +982,34 @@
1.200 <td><abbr title="follows order of property value definition">per grammar</abbr>
1.201 </table>
1.202
1.203 + <div class="prod">
1.204 + <dfn><single-animation></dfn> =
1.205 + <single-animation-name> ||
1.206 + <time> ||
1.207 + <single-animation-timing-function> ||
1.208 + <time> ||
1.209 + <single-animation-iteration-count> ||
1.210 + <single-animation-direction> ||
1.211 + <single-animation-fill-mode>
1.212 + </div>
1.213 +
1.214 + <p>
1.215 + Note that order is important within the items in this property:
1.216 + the first value that can be parsed as a <var><time></var> is assigned to the
1.217 + transition-duration,
1.218 + and the second value that can be parsed as a <var><time></var> is assigned to
1.219 + transition-delay.
1.220 + </p>
1.221 +
1.222 + <p class="issue">
1.223 + An alternative proposal is to accept the font shorthand approach
1.224 + of using a "/" character between the values of the same type.
1.225 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds.
1.226 +
1.227 + <p class="issue">
1.228 + Need to also explain how order is important in terms of animation-name
1.229 + versus keywords, and probably also adjust the canonical order to
1.230 + match.
1.231
1.232 <h2 id="animation-events">
1.233 Animation Events</h2>
1.234 @@ -1332,6 +1348,7 @@
1.235
1.236 <p>Thanks especially to the feedback from
1.237 Tab Atkins,
1.238 +Carine Bournez,
1.239 Estelle Weyl,
1.240 and all the rest of the
1.241 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
