Skip to content

Commit cff92a6

Browse files
authored
[css-transitions-2] Add transition-behavior property to specify whether transitions happen on properties with discrete animation type (w3c#9101)
This was resolved here: w3c#8857 Also revert the redefinition of the all keyword to try to solve the same problem.
1 parent 605801e commit cff92a6

File tree

1 file changed

+46
-14
lines changed

1 file changed

+46
-14
lines changed

css-transitions-2/Overview.bs

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -84,20 +84,18 @@ the transition was generated (e.g. 'border-left-width').
8484
ISSUE: Update the defining instance of [=transitionable=]
8585
once it is ported from Level 1.
8686

87-
In CSS Transitions Level 2,
88-
property values are [=transitionable=]
89-
<em>unless</em> they have an [=animation type=] that is [=not animatable=].
90-
Values with a [=discrete=] [=animation type=] <em>are</em> [=transitionable=],
91-
and flip at 50% progress (<var>p</var> = 0.5).
92-
93-
However, the ''transition-property/all'' keyword
94-
continues to expand only to all [=transitionable=] properties
95-
whose [=animation type=] is not [=discrete=].
96-
97-
Note: This is for compatibility with CSS Transitions Level 1
98-
(and because authors will rarely want [=discrete=] properties to transition at 50% by default).
99-
Note this means that the ''tranisition-property/all'' keyword here
100-
maps to a subset of the 'all' [=shorthand property=]’s [=longhand properties=].
87+
In CSS Transitions Level 2, when comparing the [=before-change style=] and
88+
[=after-change style=] for a given property, the property values are
89+
[=transitionable=] if:
90+
<ol>
91+
<li>They have an [=animation type=] that is neither [=not animatable=] nor
92+
[=discrete=], or</li>
93+
<li>The 'transition-behavior' is ''allow-discrete'' and they have an
94+
[=animation type=] that is [=discrete=].</li>
95+
</ol>
96+
97+
Note: When values with a [=discrete=] [=animation type=] are transitioned, they
98+
flip at 50% progress.
10199

102100
## The 'transition-duration' Property ## {#transition-duration-property}
103101

@@ -120,6 +118,40 @@ the reversing shortening factor.
120118
The 'transition-delay' property specifies the [=start delay=]
121119
of the transition's associated [=animation effect=].
122120

121+
## The 'transition-behavior' Property ## {#transition-behavior-property}
122+
123+
The 'transition-behavior' property specifies whether transitions will be
124+
started or not for discrete properties.
125+
126+
<pre class="propdef">
127+
Name: transition-behavior
128+
Value: <<transition-behavior-value>>#
129+
Initial: normal
130+
Applies to: All elements
131+
Inherited: no
132+
Percentages: N/A
133+
Computed value: as specified
134+
Canonical order: per grammar
135+
Animation type: not animatable
136+
</pre>
137+
138+
The syntax for specifying 'transition-behavior' is as follows:
139+
140+
<div class=prod><dfn><<transition-behavior-value>></dfn> = normal | allow-discrete</pre>
141+
142+
When ''transition-behavior-value/normal'' is specified, transitions will not be
143+
started for discrete properties, only for interpolable properties. When
144+
''allow-discrete'' is specified, transitions will be started for discrete
145+
properties as well as interpolable properties.
146+
147+
## The 'transition' Shorthand Property ## {#transition-shorthand-property}
148+
149+
The syntax for specifying an item in the 'transition' shorthand is as follows:
150+
151+
<div class="prod">
152+
<dfn type id="single-transition">&lt;single-transition&gt;</dfn> = [ ''transition-property/none'' | <<single-transition-property>> ] || <<time>> || <<easing-function>> || <<time>> || <<transition-behavior-value>>
153+
</div>
154+
123155

124156
# Starting of transitions # {#starting}
125157

0 commit comments

Comments
 (0)