8000 [css-transitions] Define that transitions do not affect style when an… · w3c/csswg-drafts@c16d802 · GitHub
Skip to content

Commit c16d802

Browse files
dbarondbaron
committed
[css-transitions] Define that transitions do not affect style when animations are running for the same property-element pair.
This implements the group's replacement for part B of the proposal in http://lists.w3.org/Archives/Public/www-style/2013Mar/0297.html as resolved in http://lists.w3.org/Archives/Public/www-style/2013Jun/0682.html
1 parent 0af9d50 commit c16d802

2 files changed

Lines changed: 157 additions & 44 deletions

File tree

‎css-transitions/Overview.html‎

Lines changed: 96 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -196,32 +196,35 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
196196
<li><a href="#starting"><span class=secno>3. </span> Starting of
197197
transitions </a>
198198

199-
<li><a href="#reversing"><span class=secno>4. </span> Automatically
199+
<li><a href="#application"><span class=secno>4. </span> Application of
200+
transitions </a>
201+
202+
<li><a href="#reversing"><span class=secno>5. </span> Automatically
200203
reversing interrupted transitions </a>
201204

202-
<li><a href="#transition-events"><span class=secno>5. </span> Transition
205+
<li><a href="#transition-events"><span class=secno>6. </span> Transition
203206
Events </a>
204207

205-
<li><a href="#animatable-types"><span class=secno>6. </span> Animation of
208+
<li><a href="#animatable-types"><span class=secno>7. </span> Animation of
206209
property types </a>
207210

208-
<li><a href="#animatable-properties"><span class=secno>7. </span>
211+
<li><a href="#animatable-properties"><span class=secno>8. </span>
209212
Animatable properties </a>
210213
<ul class=toc>
211-
<li><a href="#animatable-css"><span class=secno>7.1. </span> Properties
214+
<li><a href="#animatable-css"><span class=secno>8.1. </span> Properties
212215
from CSS </a>
213216

214-
<li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties
217+
<li><a href="#animatable-svg"><span class=secno>8.2. </span> Properties
215218
from SVG </a>
216219
</ul>
217220

218-
<li><a href="#changes"><span class=secno>8. </span>Changes since Working
221+
<li><a href="#changes"><span class=secno>9. </span>Changes since Working
219222
Draft of 12 February 2013</a>
220223

221-
<li><a href="#acknowledgments"><span class=secno>9.
224+
<li><a href="#acknowledgments"><span class=secno>10.
222225
</span>Acknowledgments</a>
223226

224-
<li><a href="#references"><span class=secno>10. </span>References</a>
227+
<li><a href="#references"><span class=secno>11. </span>References</a>
225228
<ul class=toc>
226229
<li class=no-num><a href="#normative-references">Normative
227230
references</a>
@@ -990,24 +993,27 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
990993
definition of ‘<code class=property>transition-property</code>’</a>)
991994
in the computed value of ‘<a href="#transition-property"><code
992995
class=property>transition-property</code></a>’. Corresponding to this
993-
item there are computed values of ‘<a href="#transition-duration"><code
994-
class=property>transition-duration</code></a>’ and ‘<a
995-
href="#transition-delay"><code
996-
class=property>transition-delay</code></a>’ (see <a
997-
href="#list-matching">the rules on matching lists</a>). Define the <dfn
998-
id=combined-duration>combined duration</dfn> of the transition as the sum
999-
of max(‘<a href="#transition-duration"><code
1000-
class=property>transition-duration</code></a>’, ‘<code
1001-
class=css>0s</code>’) and ‘<a href="#transition-delay"><code
1002-
class=property>transition-delay</code></a>’. When the combined duration
1003-
is greater than ‘<code class=css>0s</code>’, then a transition starts
1004-
based on the values of ‘<a href="#transition-duration"><code
996+
item there is a <span>matching transition duration</span>, a
997+
<span>matching transition delay</span>, and a <span>matching transition
998+
timing function</span> in the computed values of ‘<a
999+
href="#transition-duration"><code
10051000
class=property>transition-duration</code></a>’, ‘<a
10061001
href="#transition-delay"><code
10071002
class=property>transition-delay</code></a>’, and ‘<a
10081003
href="#transition-timing-function"><code
1009-
class=property>transition-timing-function</code></a>’; in other cases
1010-
transitions do not occur.
1004+
class=property>transition-timing-function</code></a>’ (see <a
1005+
href="#list-matching">the rules on matching lists</a>). Define the <dfn
1006+
id=combined-duration>combined duration</dfn> of the transition as the sum
1007+
of max(matching transition duration, ‘<code class=css>0s</code>’) and
1008+
the matching transition-delay. When the combined duration is greater than
1009+
‘<code class=css>0s</code>’, then a transition starts based on the
1010+
values of the matching transition duration, the matching transition delay,
1011+
and the matching transition-timing-function; in other cases transitions do
1012+
not occur. The <dfn id=start-time>start time</dfn> of this transition is
1013+
defined as the time of the <a href="#style-change-event">style change
1014+
event</a> plus the matching transition delay. The <dfn id=end-time>end
1015+
time</dfn> of this transition is defined as the <a
1016+
href="#start-time">start time</a> plus the matching transition duration.
10111017

10121018
<p> Once the transition of a property has started, it must continue running
10131019
based on the original timing function, duration, and delay, even if the
@@ -1038,7 +1044,40 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
10381044
of issues and proposed model</a>. Working Group resolution from 2013-06-06
10391045
needs to be edited.
10401046

1041-
<h2 id=reversing><span class=secno>4. </span> Automatically reversing
1047+
<h2 id=application><span class=secno>4. </span> Application of transitions</h2>
1048+
1049+
<p> When a property on an element is undergoing a transition (that is, when
1050+
or after the transition has started and before the <a href="#end-time">end
1051+
time</a> of the transition) the transition adds a style to the CSS cascade
1052+
at the level defined for CSS Transitions in <a href="#CSS3CASCADE"
1053+
rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>.
1054+
1055+
<p> Implementations must add this value to the cascade if and only if that
1056+
property is not currently undergoing a CSS Animation (<a
1057+
href="#CSS3-ANIMATIONS"
1058+
rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>) on the
1059+
same element.
1060+
1061+
<p> If the current time is at or before the <a href="#start-time">start
1062+
time</a> of the transition (that is, during the delay phase of the
1063+
transition), this value is a specified style that will compute to the
1064+
<span>before-change style</span> in the <a
1065+
href="#style-change-event">style change event</a> in which the transition
1066+
was started.
1067+
1068+
<p> If the current time is after the <a href="#start-time">start time</a>
1069+
of the transition (that is, during the duration phase of the transition),
1070+
this value is a specified style that will compute to the <a
1071+
href="#animatable-types">result of interpolating the property</a> using
1072+
the <span>before-change style</span> for the property as
1073+
<i>V</i><sub>start</sub>, using the <span>after-change style</span> for
1074+
the property as <i>V</i><sub>end</sub>, and using (current time - start
1075+
time) / (end time - start time) as the input to the timing function. (The
1076+
<span>before-change style</span> and <span>after-change style</span> <a
1077+
href="#style-change-event">style change event</a> in which the transition
1078+
was started.)
1079+
1080+
<h2 id=reversing><span class=secno>5. </span> Automatically reversing
10421081
interrupted transitions</h2>
10431082

10441083
<p> A common type of transition effect is when a running transition is
@@ -1110,7 +1149,7 @@ <h2 id=reversing><span class=secno>4. </span> Automatically reversing
11101149
2012-10-30</a>, <a href=transition-reversing-demo>reversing demo</a>.
11111150
Working Group resolution from 2013-06-07 needs to be edited.
11121151

1113-
<h2 id=transition-events><span class=secno>5. </span><a
1152+
<h2 id=transition-events><span class=secno>6. </span><a
11141153
id=transition-events-> Transition Events </a></h2>
11151154

11161155
<p> The completion of a CSS Transition generates a corresponding <a
@@ -1225,7 +1264,7 @@ <h2 id=transition-events><span class=secno>5. </span><a
12251264
</ul>
12261265
</dl>
12271266

1228-
<h2 id=animatable-types><span class=secno>6. </span><a
1267+
<h2 id=animatable-types><span class=secno>7. </span><a
12291268
id=animation-of-property-types-> Animation of property types </a></h2>
12301269

12311270
<p> When interpolating between two values, <i>V</i><sub>start</sub> and
@@ -1342,7 +1381,7 @@ <h2 id=animatable-types><span class=secno>6. </span><a
13421381
shorthand properties and the ‘<code class=css>all</code>’ value is
13431382
applied to any properties (in the shorthand) that can be animated.
13441383

1345-
<h2 id=animatable-properties><span class=secno>7. </span><a
1384+
<h2 id=animatable-properties><span class=secno>8. </span><a
13461385
id=animatable-properties-> Animatable properties </a></h2>
13471386
<!--
13481387
As resolved in
@@ -1375,7 +1414,7 @@ <h2 id=animatable-properties><span class=secno>7. </span><a
13751414
the property animates. Such definitions override those given in this
13761415
specification.
13771416

1378-
<h3 id=animatable-css><span class=secno>7.1. </span><a
1417+
<h3 id=animatable-css><span class=secno>8.1. </span><a
13791418
id=properties-from-css-> Properties from CSS </a></h3>
13801419

13811420
<p> The following definitions define the animation behavior for properties
@@ -1616,7 +1655,7 @@ <h3 id=animatable-css><span class=secno>7.1. </span><a
16161655
<td>as <a href="#animtype-integer">integer</a>
16171656
</table>
16181657

1619-
<h3 id=animatable-svg><span class=secno>7.2. </span><a
1658+
<h3 id=animatable-svg><span class=secno>8.2. </span><a
16201659
id=properties-from-svg-> Properties from SVG </a></h3>
16211660

16221661
<p> All properties defined as animatable in the SVG specification, provided
@@ -1663,7 +1702,7 @@ <h3 id=animatable-svg><span class=secno>7.2. </span><a
16631702
</tr>
16641703
</table> -->
16651704

1666-
<h2 id=changes><span class=secno>8. </span>Changes since Working Draft of
1705+
<h2 id=changes><span class=secno>9. </span>Changes since Working Draft of
16671706
12 February 2013</h2>
16681707

16691708
<p>The following are the substantive changes made since the <a
@@ -1694,6 +1733,9 @@ <h2 id=changes><span class=secno>8. </span>Changes since Working Draft of
16941733
<li>Define the <span>before-change style</span> and <span>after-change
16951734
style</span> used for the style comparison, using the new concept of a
16961735
<a href="#style-change-event">style change event</a>.
1736+
1737+
<li>Define that a CSS transition for a property does not affect computed
1738+
style when a CSS Animation for the same property is running.
16971739
</ul>
16981740
</ul>
16991741

@@ -1708,15 +1750,15 @@ <h2 id=changes><span class=secno>8. </span>Changes since Working Draft of
17081750
href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/ChangeLog">the
17091751
ChangeLog</a>, and the above version control logs.
17101752

1711-
<h2 id=acknowledgments><span class=secno>9. </span>Acknowledgments</h2>
1753+
<h2 id=acknowledgments><span class=secno>10. </span>Acknowledgments</h2>
17121754

17131755
<p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh
17141756
Gregor, Vincent Hardy, Anne van Kesteren, Cameron McCormack, Alex
17151757
Mogilevsky, and all the rest of the <a
17161758
href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
17171759
community.
17181760

1719-
<h2 id=references><span class=secno>10. </span>References</h2>
1761+
<h2 id=references><span class=secno>11. </span>References</h2>
17201762

17211763
<h3 class=no-num id=normative-references>Normative references</h3>
17221764
<!--begin-normative-->
@@ -1766,6 +1808,16 @@ <h3 class=no-num id=other-references>Other references</h3>
17661808
</dd>
17671809
<!---->
17681810

1811+
<dt id=CSS3CASCADE>[CSS3CASCADE]
1812+
1813+
<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr. <a
1814+
href="http://www.w3.org/TR/2013/WD-css3-cascade-20130103/"><cite>CSS
1815+
Cascading and Inheritance Level 3.</cite></a> 3 January 2013. W3C Working
1816+
Draft. (Work in progress.) URL: <a
1817+
href="http://www.w3.org/TR/2013/WD-css3-cascade-20130103/">http://www.w3.org/TR/2013/WD-css3-cascade-20130103/</a>
1818+
</dd>
1819+
<!---->
1820+
17691821
<dt id=CSS3COLOR>[CSS3COLOR]
17701822

17711823
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
@@ -1916,6 +1968,9 @@ <h2 class=no-num id=index>Index</h2>
19161968
<li>combined duration, <a href="#combined-duration"
19171969
title="section 3."><strong>3.</strong></a>
19181970

1971+
<li>end time, <a href="#end-time"
1972+
title="section 3."><strong>3.</strong></a>
1973+
19191974
<li>&lt;single-transition&gt;, <a href="#single-transition"
19201975
title="section 2.5."><strong>2.5.</strong></a>
19211976

@@ -1927,6 +1982,9 @@ <h2 class=no-num id=index>Index</h2>
19271982
href="#single-transition-timing-function"
19281983
title="section 2.3."><strong>2.3.</str 8096 ong></a>
19291984

1985+
<li>start time, <a href="#start-time"
1986+
title="section 3."><strong>3.</strong></a>
1987+
19301988
<li>style change event, <a href="#style-change-event"
19311989
title="section 3."><strong>3.</strong></a>
19321990

@@ -1940,23 +1998,23 @@ <h2 class=no-num id=index>Index</h2>
19401998
title="section 2.2."><strong>2.2.</strong></a>
19411999

19422000
<li>transitionend, <a href="#transitionend"
1943-
title="section 5."><strong>5.</strong></a>
2001+
title="section 6."><strong>6.</strong></a>
19442002

19452003
<li>TransitionEvent, <a href="#Events-TransitionEvent"
1946-
title="section 5."><strong>5.</strong></a>
2004+
title="section 6."><strong>6.</strong></a>
19472005
<ul>
19482006
<li>elapsedTime, <a href="#Events-TransitionEvent-elapsedTime"
1949-
title="section 5."><strong>5.</strong></a>
2007+
title="section 6."><strong>6.</strong></a>
19502008

19512009
<li>propertyName, <a href="#Events-TransitionEvent-propertyName"
1952-
title="section 5."><strong>5.</strong></a>
2010+
title="section 6."><strong>6.</strong></a>
19532011

19542012
<li>pseudoElement, <a href="#Events-TransitionEvent-pseudoElement"
1955-
title="section 5."><strong>5.</strong></a>
2013+
title="section 6."><strong>6.</strong></a>
19562014
</ul>
19572015

19582016
<li>TransitionEventInit, <a href="#TransitionEventInit"
1959-
title="section 5."><strong>5.</strong></a>
2017+
title="section 6."><strong>6.</strong></a>
19602018

19612019
<li>transition-property, <a href="#transition-property"
19622020
title="section 2.1."><strong>2.1.</strong></a>

‎css-transitions/Overview.src.html‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -988,16 +988,26 @@ <h2 id="starting">
988988
href="#transition-property">the definition of
989989
'transition-property'</a>) in the computed value of
990990
'transition-property'.
991-
Corresponding to this item there are
992-
computed values of 'transition-duration' and 'transition-delay'
991+
Corresponding to this item there is
992+
a <span>matching transition duration</span>,
993+
a <span>matching transition delay</span>, and
994+
a <span>matching transition timing function</span>
995+
in the computed values of
996+
'transition-duration', 'transition-delay', and 'transition-timing-function'
993997
(see <a href="#list-matching">the rules on matching lists</a>).
994998
Define the <dfn>combined duration</dfn> of the transition
995-
as the sum of max('transition-duration', ''0s'') and 'transition-delay'.
999+
as the sum of max(matching transition duration, ''0s'') and
1000+
the matching transition-delay.
9961001
When the combined duration is greater than ''0s'',
997-
then a transition starts based on the values of
998-
'transition-duration', 'transition-delay',
999-
and 'transition-timing-function';
1002+
then a transition starts based on the values of the
1003+
matching transition duration, the matching transition delay,
1004+
and the matching transition-timing-function;
10001005
in other cases transitions do not occur.
1006+
The <dfn>start time</dfn> of this transition is defined as
1007+
the time of the <span>style change event</span> plus
1008+
the matching transition delay.
1009+
The <dfn>end time</dfn> of this transition is defined as
1010+
the <span>start time</span> plus the matching transition duration.
10011011
</p>
10021012

10031013
<p>
@@ -1032,6 +1042,50 @@ <h2 id="starting">
10321042
Working Group resolution from 2013-06-06 needs to be edited.
10331043
</p>
10341044

1045+
<h2 id="application">
1046+
Application of transitions
1047+
</h2>
1048+
1049+
<p>
1050+
When a property on an element is undergoing a transition
1051+
(that is, when or after the transition has started and before the
1052+
<span>end time</span> of the transition)
1053+
the transition adds a style to the CSS cascade
1054+
at the level defined for CSS Transitions in [[CSS3CASCADE]].
1055+
</p>
1056+
1057+
<p>
1058+
Implementations must add this value to the cascade
1059+
if and only if
1060+
that property is not currently
1061+
undergoing a CSS Animation ([[CSS3-ANIMATIONS]]) on the same element.
1062+
</p>
1063+
1064+
<p>
1065+
If the current time is at or before the
1066+
<span>start time</span> of the transition
1067+
(that is, during the delay phase of the transition),
1068+
this value is a specified style that will compute
1069+
to the <span>before-change style</span> in the
1070+
<span>style change event</span> in which the transition was started.
1071+
</p>
1072+
1073+
<p>
1074+
If the current time is after the
1075+
<span>start time</span> of the transition
1076+
(that is, during the duration phase of the transition),
1077+
this value is a specified style that will compute
1078+
to the <a href="#animatable-types">result of interpolating the property</a>
1079+
using the <span>before-change style</span> for the property as
1080+
<i>V</i><sub>start</sub>,
1081+
using the <span>after-change style</span> for the property as
1082+
<i>V</i><sub>end</sub>,
1083+
and using (current time - start time) / (end time - start time)
1084+
as the input to the timing function.
1085+
(The <span>before-change style</span> and <span>after-change style</span>
1086+
<span>style change event</span> in which the transition was started.)
1087+
</p>
1088+
10351089
<h2 id="reversing">
10361090
Automatically reversing interrupted transitions
10371091
</h2>
@@ -1621,6 +1675,7 @@ <h2 id="changes">Changes since Working Draft of 12 February 2013</h2>
16211675
<li>Define the model for starting of transitions and their interaction with other animations more precisely:
16221676
<ul>
16231677
<li>Define the <span>before-change style</span> and <span>after-change style</span> used for the style comparison, using the new concept of a <span>style change event</span>.
1678+
<li>Define that a CSS transition for a property does not affect computed style when a CSS Animation for the same property is running.
16241679
</ul>
16251680
</ul>
16261681

0 commit comments

Comments
 (0)