Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[css-transitions] Specify serialization for timing functions
See thread starting:
https://lists.w3.org/Archives/Public/www-style/2016Apr/0107.html

In particular, notice that Edge/Blink/Gecko all serialize 'steps(1)'
differently and at least Gecko and Blink differ with regards to how they
handle the optional 'end' / 'start' value.
  • Loading branch information
birtles committed Jul 25, 2016
commit 19c7a70275ba4961d1a80c61349dcc504b9eb39e
20 changes: 20 additions & 0 deletions css-transitions/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,26 @@ Introduction {#introduction}
</dd>
</dl>

### Serializing a timing function ### {#serializing-a-timing-function}

Timing functions are serialized using the common serialization patterns
defined in [[CSSOM]] with the following additional requirements:

* The keyword values ''ease'', ''linear'', ''ease-in'', ''ease-out'',
and ''ease-in-out'' are serialized as-is, that is, they are
<em>not</em> converted to the equivalent <a lt="cubic-bezier()"
Copy link
Member

@tabatkins tabatkins Jul 26, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just use ''cubic-bezier()'' - that shorthand covers CSS functions too. Same for the steps() down below.

function>cubic-bezier()</a> function before serializing.

* Step timing functions, whether they are specified using the <a
lt="steps()" function>steps()</a> function or either of the
''step-start'' or ''step-end'' keywords, are serialized as follows:

1. If the point at which the value changes is ''end'', serialize
as <a lt="steps()" function>steps(&lt;integer&gt;)</a>.

2. Otherwise, serialize as <a lt="steps()"
function>steps(&lt;integer&gt;, start)</a>.

<span id="the-transition-delay-property-">The 'transition-delay' Property</span> {#transition-delay-property}
-------------------------------------------------------------------------------------------------------------

Expand Down