1
1
<pre class=metadata>
2
2
Title : CSS Easing Functions Level 2
3
- Status : ED
3
+ Status : FPWD
4
+ Prepare for TR : yes
5
+ Date : 2024-08-29
4
6
Work Status : exploring
5
7
Shortname : css-easing
6
8
Level : 2
@@ -82,7 +84,7 @@ input progress value and producing a corresponding transformed output progress
82
84
value.
83
85
84
86
<figure>
85
- <img class="easing-graph" src="easing-function-example.svg" width="535" height="510"
87
+ <img class="easing-graph" src="images/ easing-function-example.svg" width="535" height="510"
86
88
alt="Example of an easing function that produces an ease-in effect.">
87
89
<figcaption>
88
90
Example of an easing function that produces an ease-in effect.<br>
@@ -352,7 +354,7 @@ It returns an [=output progress value=].
352
354
that moves linearly from 0, to 0.25, then to 1:
353
355
354
356
<figure>
355
- <img class="easing-graph" src="simple-linear-example.svg" width="535" height="510"
357
+ <img class="easing-graph" src="images/ simple-linear-example.svg" width="535" height="510"
356
358
alt="linear(0, 0.25, 1) plotted on a graph">
357
359
</figure>
358
360
</div>
@@ -365,7 +367,7 @@ It returns an [=output progress value=].
365
367
then the last 25% transitioning from ''.25'' to ''1'' :
366
368
367
369
<figure>
368
- <img class="easing-graph" src="linear-with-input-example.svg" width="535" height="510"
370
+ <img class="easing-graph" src="images/ linear-with-input-example.svg" width="535" height="510"
369
371
alt="linear(0, 0.25 75%, 1) plotted on a graph.
370
372
The graph has three points.
371
373
The first is at 0,0.
@@ -382,7 +384,7 @@ It returns an [=output progress value=].
382
384
producing the following easing function:
383
385
384
386
<figure>
385
- <img class="easing-graph" src="linear-with-double-input-example.svg" width="535" height="510"
387
+ <img class="easing-graph" src="images/ linear-with-double-input-example.svg" width="535" height="510"
386
388
alt="linear(0, 0.25 75%, 1) plotted on a graph.
387
389
The graph has four points.
388
390
The first is at 0,0.
@@ -398,7 +400,7 @@ It returns an [=output progress value=].
398
400
For example, here are the implicit values from the previous function:
399
401
400
402
<figure>
401
- <img class="easing-graph" src="linear-with-double-input-example-continued.svg" width="535" height="510"
403
+ <img class="easing-graph" src="images/ linear-with-double-input-example-continued.svg" width="535" height="510"
402
404
alt="linear(0, 0.25 75%, 1) plotted on a graph.
403
405
The graph has four points.
404
406
The first is at 0,0.
@@ -436,7 +438,7 @@ It returns an [=output progress value=].
436
438
so inputs greater than 1 always output 1.
437
439
438
440
<figure>
439
- <img class="easing-graph" src="linear-bounce-example.svg" width="535" height="510"
441
+ <img class="easing-graph" src="images/ linear-bounce-example.svg" width="535" height="510"
440
442
alt="The graph of a rough bounce easing.">
441
443
</figure>
442
444
@@ -483,7 +485,7 @@ The <var>x</var> coordinates of <var>P1</var> and <var>P2</var>
483
485
are restricted to the range [0, 1] .
484
486
485
487
<figure>
486
- <img class="easing-graph" src="cubic-bezier-easing-curve.svg" width="535" height="510"
488
+ <img class="easing-graph" src="images/ cubic-bezier-easing-curve.svg" width="535" height="510"
487
489
alt="A cubic Bezier curve used as an easing function.">
488
490
<figcaption>
489
491
A cubic Bézier curve used as an easing function.<br>
@@ -528,7 +530,7 @@ The meaning of each value is as follows:
528
530
The keyword values listed above are illustrated below.
529
531
530
532
<figure>
531
- <img class="easing-graph" src="curve-keywords.svg" width="500"
533
+ <img class="easing-graph" src="images/ curve-keywords.svg" width="500"
532
534
alt="The easing functions produced by keyword values.">
533
535
<figcaption>
534
536
The easing functions produced by each of the cubic Bézier easing
@@ -607,7 +609,7 @@ The meaning of each value is as follows:
607
609
:: Computes to ''steps(1, end)''
608
610
609
611
<figure>
610
- <img class="easing-graph" src="step-easing-keyword-examples.svg" width="500"
612
+ <img class="easing-graph" src="images/ step-easing-keyword-examples.svg" width="500"
611
613
alt="Example step easing keywords.">
612
614
<figcaption>
613
615
Example step easing function keyword values.
@@ -646,7 +648,7 @@ The meaning of each value is as follows:
646
648
These values are illustrated below:
647
649
648
650
<figure>
649
- <img class="easing-graph" src="step-easing-func-examples.svg" width="500"
651
+ <img class="easing-graph" src="images/ step-easing-func-examples.svg" width="500"
650
652
alt="Example step easing functions.">
651
653
<figcaption>
652
654
Example step easing functions.
0 commit comments