diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index a196ea3d5bf..76eba3bde5f 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -125,16 +125,126 @@ The syntax for specifying an [=easing function=] is as follows: <> -

The linear easing function: ''linear''

+

The linear easing function: ''linear()''

-The linear easing -function is an identity function -meaning that its [=output progress value=] is equal to the -[=input progress value=] for all inputs. +A linear easing function +is an easing function +that interpolates linearly +between its [=linear easing function/points=]. -The syntax for the [=linear easing function=] is simply the -linear keyword. +A [=linear easing function=] has points, +a [=/list=] of [=linear easing points=]. +Initially a new empty [=/list=]. +A linear easing point +is a [=/struct=] +that has: + +
+ +: input +:: A number or null + + Note: The [=linear easing point/input=] is only null during the [=create a linear easing function=] algorithm. + +: output +:: A number + + +
+ +
+ +To calculate linear output progress +for a given [=linear easing function=] |linearEasingFunction|, +and an [=input progress value=] |inputProgress|, +perform the following. +It returns an [=output progress value=]. + +1. If |linearEasingFunction|'s [=linear easing function/points=] [=list/is empty=], + then return |inputProgress|. + +1. If |linearEasingFunction|'s [=linear easing function/points=] [=list/size=] is 1, + then return |linearEasingFunction|'s [=linear easing function/points=][0]'s [=linear easing point/output=]. + +1. Plot |linearEasingFunction|'s [=linear easing function/points=] points on a graph + using [=linear easing point/input=] as the x-axis + and [=linear easing point/output=] as the y-axis. + +1. Interpolate the points linearly. + +1. Extend the ends of the graph to infinity using the final angle of the line at either end. + If the line starts/ends with two points of the same position, the line should extend along the x-axis. + +1. Return the y-axis value corresponding to the x-axis value of |inputProgress|. + +
+ +linear(<>) + +
+  <linear-stop-list> = [ <> ]#
+  <linear-stop> = <> && <>?
+  <linear-stop-length> = <>{1,2}
+
+ +
+ +To create a linear easing function +from a <> |stopList|, +perform the following. +It returns a [=linear easing function=]. + +1. Let |function| be a new [=linear easing function=]. + +1. Let |largestInput| be negative infinity. + +1. For each |stop| in |stopList|: + + 1. Let |point| be a new [=linear easing point=]. + + 1. [=list/Append=] |point| to |function|'s [=linear easing function/points=]. + + 1. Set |point|'s [=linear easing point/output=] to |stop|'s <>. + + 1. If |stop| has a <>, then: + + 1. Set |point|'s [=linear easing point/input=] to whichever is greater: + |stop|'s <>'s first <> as a number, + or |largestInput|. + + 1. Set |largestInput| to |point|'s [=linear easing point/input=]. + + 1. If |stop|'s <> has a second <>, then: + + 1. Let |extraPoint| be a new [=linear easing point=]. + + 1. [=list/Append=] |extraPoint| to |function|'s [=linear easing function/points=]. + + 1. Set |extraPoint|'s [=linear easing point/output=] to |stop|'s <>. + + 1. Set |extraPoint|'s [=linear easing point/input=] to whichever is greater: + |stop|'s <>'s second <> as a number, + or |largestInput|. + + 1. Set |largestInput| to |extraPoint|'s [=linear easing point/input=]. + + 1. Otherwise, if |stop| is the first [=list/item=] in |stopList|, + then set |point|'s [=linear easing point/input=] to 0. + + 1. Otherwise, if |stop| is the last [=list/item=] in |stopList|, + then set |point|'s [=linear easing point/input=] to 1. + +1. For runs of [=list/items=] in |function|'s [=linear easing function/points=] that have a null [=linear easing point/input=], + assign a number to the [=linear easing point/input=] by linearly interpolating between the previous and next [=linear easing function/points=] that have a non-null [=linear easing point/input=]. + +1. Return |function|. + +
+ +

The linear easing keyword: ''linear''

+ +The linear keyword is equivalent to ''linear()''.

Cubic Bézier easing functions: