Skip to content

Commit

Permalink
[css-transitions-2] Add transition-behavior property to specify wheth…
Browse files Browse the repository at this point in the history
…er transitions happen on properties with discrete animation type (#9101)

This was resolved here: #8857

Also revert the redefinition of the all keyword to try to solve the same problem.
  • Loading branch information
josepharhar authored Jul 28, 2023
1 parent 605801e commit cff92a6
Showing 1 changed file with 46 additions and 14 deletions.
60 changes: 46 additions & 14 deletions css-transitions-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -84,20 +84,18 @@ the transition was generated (e.g. 'border-left-width').
ISSUE: Update the defining instance of [=transitionable=]
once it is ported from Level 1.

In CSS Transitions Level 2,
property values are [=transitionable=]
<em>unless</em> they have an [=animation type=] that is [=not animatable=].
Values with a [=discrete=] [=animation type=] <em>are</em> [=transitionable=],
and flip at 50% progress (<var>p</var> = 0.5).

However, the ''transition-property/all'' keyword
continues to expand only to all [=transitionable=] properties
whose [=animation type=] is not [=discrete=].

Note: This is for compatibility with CSS Transitions Level 1
(and because authors will rarely want [=discrete=] properties to transition at 50% by default).
Note this means that the ''tranisition-property/all'' keyword here
maps to a subset of the 'all' [=shorthand property=]’s [=longhand properties=].
In CSS Transitions Level 2, when comparing the [=before-change style=] and
[=after-change style=] for a given property, the property values are
[=transitionable=] if:
<ol>
<li>They have an [=animation type=] that is neither [=not animatable=] nor
[=discrete=], or</li>
<li>The 'transition-behavior' is ''allow-discrete'' and they have an
[=animation type=] that is [=discrete=].</li>
</ol>

Note: When values with a [=discrete=] [=animation type=] are transitioned, they
flip at 50% progress.

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

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

## The 'transition-behavior' Property ## {#transition-behavior-property}

The 'transition-behavior' property specifies whether transitions will be
started or not for discrete properties.

<pre class="propdef">
Name: transition-behavior
Value: <<transition-behavior-value>>#
Initial: normal
Applies to: All elements
Inherited: no
Percentages: N/A
Computed value: as specified
Canonical order: per grammar
Animation type: not animatable
</pre>

The syntax for specifying 'transition-behavior' is as follows:

<div class=prod><dfn><<transition-behavior-value>></dfn> = normal | allow-discrete</pre>

When ''transition-behavior-value/normal'' is specified, transitions will not be
started for discrete properties, only for interpolable properties. When
''allow-discrete'' is specified, transitions will be started for discrete
properties as well as interpolable properties.

## The 'transition' Shorthand Property ## {#transition-shorthand-property}

The syntax for specifying an item in the 'transition' shorthand is as follows:

<div class="prod">
<dfn type id="single-transition">&lt;single-transition&gt;</dfn> = [ ''transition-property/none'' | <<single-transition-property>> ] || <<time>> || <<easing-function>> || <<time>> || <<transition-behavior-value>>
</div>


# Starting of transitions # {#starting}

Expand Down

0 comments on commit cff92a6

Please sign in to comment.