OLD | NEW |
1 Tests the display of animations on the animation timeline. | 1 Tests the display of animations on the animation timeline. |
2 | 2 |
3 >>>> Animation with start delay only | 3 >>>> Animation with start delay only |
4 <div class="animation-name" style="transform: translateX(229.22px); width: 444px
;"></div> | 4 <div class="animation-name" style="transform: translateX(229.22px); width: 444px
;"></div> |
5 <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; t
ransform: translateX(0px);"><g style="transform: translateX(222.22px);"><g style
="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="3
2" x2="451.44" style="stroke: rgb(0, 0, 0);"></line><path class="animation-keyfr
ame" d="M 0 32 L 0.02 13.35 L 0.94 13.35 L 3.51 13.35 L 7.66 13.35 L 13.28 13.35
L 20.28 13.35 L 28.59 13.35 L 38.10 13.35 L 48.73 13.35 L 60.39 13.35 L 72.99 1
3.35 L 86.44 13.35 L 100.65 13.35 L 115.54 13.35 L 131.00 13.35 L 146.95 13.35 L
163.31 13.35 L 179.98 13.35 L 196.87 13.35 L 213.90 13.35 L 230.96 13.35 L 247.
99 13.35 L 264.88 13.35 L 281.54 13.35 L 297.89 13.35 L 313.83 13.35 L 329.28 13
.35 L 344.15 13.35 L 358.34 13.35 L 371.77 13.35 L 384.35 13.35 L 395.99 13.35 L
406.60 13.35 L 416.08 13.35 L 424.36 13.35 L 431.33 13.35 L 436.92 13.35 L 441.
03 13.35 L 443.56 13.35 L 444.44 13.35 L 444.44 32 Z" style="transform: translat
eX(7px); fill: rgb(0, 0, 0);"></path><circle class="animation-endpoint" cx="7.00
" cy="32" r="3.5" style="stroke: rgb(0, 0, 0); fill: rgb(0, 0, 0);"></circle><ci
rcle class="animation-endpoint" cx="451.44" cy="32" r="3.5" style="stroke: rgb(0
, 0, 0); fill: rgb(0, 0, 0);"></circle></g><g class="animation-tail-iterations">
</g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="229.22" st
yle="stroke: rgb(0, 0, 0);"></line><line class="animation-delay-line" x1="7" y1=
"32" y2="32" x2="7.00" style="stroke: rgb(0, 0, 0); transform: translateX(666.67
px);"></line></svg> | 5 <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; t
ransform: translateX(0px);"><g style="transform: translateX(222.22px);"><g style
="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="3
2" x2="451.44" style="stroke: black;"></line><path class="animation-keyframe" d=
"M 0 32 L 0.02 13.35 L 0.94 13.35 L 3.51 13.35 L 7.66 13.35 L 13.28 13.35 L 20.2
8 13.35 L 28.59 13.35 L 38.10 13.35 L 48.73 13.35 L 60.39 13.35 L 72.99 13.35 L
86.44 13.35 L 100.65 13.35 L 115.54 13.35 L 131.00 13.35 L 146.95 13.35 L 163.31
13.35 L 179.98 13.35 L 196.87 13.35 L 213.90 13.35 L 230.96 13.35 L 247.99 13.3
5 L 264.88 13.35 L 281.54 13.35 L 297.89 13.35 L 313.83 13.35 L 329.28 13.35 L 3
44.15 13.35 L 358.34 13.35 L 371.77 13.35 L 384.35 13.35 L 395.99 13.35 L 406.60
13.35 L 416.08 13.35 L 424.36 13.35 L 431.33 13.35 L 436.92 13.35 L 441.03 13.3
5 L 443.56 13.35 L 444.44 13.35 L 444.44 32 Z" style="transform: translateX(7px)
; fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3
.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoi
nt" cx="451.44" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g
><g class="animation-tail-iterations"></g></g><line class="animation-delay-line"
x1="7" y1="32" y2="32" x2="229.22" style="stroke: black;"></line><line class="a
nimation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; tran
sform: translateX(666.67px);"></line></svg> |
6 >>>> Animation with start and end delay | 6 >>>> Animation with start and end delay |
7 <div class="animation-name" style="transform: translateX(10.28px); width: 600px;
"></div> | 7 <div class="animation-name" style="transform: translateX(10.28px); width: 600px;
"></div> |
8 <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; t
ransform: translateX(0px);"><g style="transform: translateX(3.28px);"><g style="
transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32"
x2="663.81" style="stroke: rgb(0, 0, 0);"></line><path class="animation-keyfram
e" d="M 0 32 L 0.03 13.35 L 1.39 13.35 L 5.19 13.35 L 11.32 13.35 L 19.62 13.35
L 29.97 13.35 L 42.25 13.35 L 56.31 13.35 L 72.02 13.35 L 89.25 13.35 L 107.87 1
3.35 L 127.75 13.35 L 148.75 13.35 L 170.74 13.35 L 193.59 13.35 L 217.17 13.35
L 241.34 13.35 L 265.98 13.35 L 290.94 13.35 L 316.10 13.35 L 341.33 13.35 L 366
.49 13.35 L 391.44 13.35 L 416.07 13.35 L 440.23 13.35 L 463.79 13.35 L 486.62 1
3.35 L 508.59 13.35 L 529.57 13.35 L 549.42 13.35 L 568.01 13.35 L 585.21 13.35
L 600.88 13.35 L 614.90 13.35 L 627.13 13.35 L 637.44 13.35 L 645.70 13.35 L 651
.76 13.35 L 655.51 13.35 L 656.81 13.35 L 656.81 32 Z" style="transform: transla
teX(7px); fill: rgb(0, 0, 0);"></path><circle class="animation-endpoint" cx="7.0
0" cy="32" r="3.5" style="stroke: rgb(0, 0, 0); fill: rgb(0, 0, 0);"></circle><c
ircle class="animation-endpoint" cx="663.81" cy="32" r="3.5" style="stroke: rgb(
0, 0, 0); fill: rgb(0, 0, 0);"></circle></g><g class="animation-tail-iterations"
></g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="10.28" st
yle="stroke: rgb(0, 0, 0);"></line><line class="animation-delay-line" x1="7" y1=
"32" y2="32" x2="13.57" style="stroke: rgb(0, 0, 0); transform: translateX(660.1
px);"></line></svg> | 8 <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; t
ransform: translateX(0px);"><g style="transform: translateX(3.28px);"><g style="
transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32"
x2="663.81" style="stroke: black;"></line><path class="animation-keyframe" d="M
0 32 L 0.03 13.35 L 1.39 13.35 L 5.19 13.35 L 11.32 13.35 L 19.62 13.35 L 29.97
13.35 L 42.25 13.35 L 56.31 13.35 L 72.02 13.35 L 89.25 13.35 L 107.87 13.35 L
127.75 13.35 L 148.75 13.35 L 170.74 13.35 L 193.59 13.35 L 217.17 13.35 L 241.3
4 13.35 L 265.98 13.35 L 290.94 13.35 L 316.10 13.35 L 341.33 13.35 L 366.49 13.
35 L 391.44 13.35 L 416.07 13.35 L 440.23 13.35 L 463.79 13.35 L 486.62 13.35 L
508.59 13.35 L 529.57 13.35 L 549.42 13.35 L 568.01 13.35 L 585.21 13.35 L 600.8
8 13.35 L 614.90 13.35 L 627.13 13.35 L 637.44 13.35 L 645.70 13.35 L 651.76 13.
35 L 655.51 13.35 L 656.81 13.35 L 656.81 32 Z" style="transform: translateX(7px
); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="
3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpo
int" cx="663.81" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></
g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line
" x1="7" y1="32" y2="32" x2="10.28" style="stroke: black;"></line><line class="a
nimation-delay-line" x1="7" y1="32" y2="32" x2="13.57" style="stroke: black; tra
nsform: translateX(660.1px);"></line></svg> |
9 >>>> Animation canceled | 9 >>>> Animation canceled |
10 <div class="animation-name" style="transform: translateX(10.28px); width: 600px;
"></div> | 10 <div class="animation-name" style="transform: translateX(10.28px); width: 600px;
"></div> |
11 <svg class="animation-ui animation-ui-canceled" height="80" width="680.67" style
="margin-left: -7px; transform: translateX(0px);"><g style="transform: translate
X(3.28px);"><g style="transform: translateX(0px);"><line class="animation-line"
x1="7" y1="32" y2="32" x2="663.81" style="stroke: rgb(0, 0, 0);"></line><path cl
ass="animation-keyframe" d="M 0 32 L 0.03 13.35 L 1.39 13.35 L 5.19 13.35 L 11.3
2 13.35 L 19.62 13.35 L 29.97 13.35 L 42.25 13.35 L 56.31 13.35 L 72.02 13.35 L
89.25 13.35 L 107.87 13.35 L 127.75 13.35 L 148.75 13.35 L 170.74 13.35 L 193.59
13.35 L 217.17 13.35 L 241.34 13.35 L 265.98 13.35 L 290.94 13.35 L 316.10 13.3
5 L 341.33 13.35 L 366.49 13.35 L 391.44 13.35 L 416.07 13.35 L 440.23 13.35 L 4
63.79 13.35 L 486.62 13.35 L 508.59 13.35 L 529.57 13.35 L 549.42 13.35 L 568.01
13.35 L 585.21 13.35 L 600.88 13.35 L 614.90 13.35 L 627.13 13.35 L 637.44 13.3
5 L 645.70 13.35 L 651.76 13.35 L 655.51 13.35 L 656.81 13.35 L 656.81 32 Z" sty
le="transform: translateX(7px); fill: rgb(0, 0, 0);"></path><circle class="anima
tion-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: rgb(0, 0, 0); fill: rgb(
0, 0, 0);"></circle><circle class="animation-endpoint" cx="663.81" cy="32" r="3.
5" style="stroke: rgb(0, 0, 0); fill: rgb(0, 0, 0);"></circle></g><g class="anim
ation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="32"
y2="32" x2="10.28" style="stroke: rgb(0, 0, 0);"></line><line class="animation-
delay-line" x1="7" y1="32" y2="32" x2="13.57" style="stroke: rgb(0, 0, 0); trans
form: translateX(660.1px);"></line></svg> | 11 <svg class="animation-ui animation-ui-canceled" height="80" width="680.67" style
="margin-left: -7px; transform: translateX(0px);"><g style="transform: translate
X(3.28px);"><g style="transform: translateX(0px);"><line class="animation-line"
x1="7" y1="32" y2="32" x2="663.81" style="stroke: black;"></line><path class="an
imation-keyframe" d="M 0 32 L 0.03 13.35 L 1.39 13.35 L 5.19 13.35 L 11.32 13.35
L 19.62 13.35 L 29.97 13.35 L 42.25 13.35 L 56.31 13.35 L 72.02 13.35 L 89.25 1
3.35 L 107.87 13.35 L 127.75 13.35 L 148.75 13.35 L 170.74 13.35 L 193.59 13.35
L 217.17 13.35 L 241.34 13.35 L 265.98 13.35 L 290.94 13.35 L 316.10 13.35 L 341
.33 13.35 L 366.49 13.35 L 391.44 13.35 L 416.07 13.35 L 440.23 13.35 L 463.79 1
3.35 L 486.62 13.35 L 508.59 13.35 L 529.57 13.35 L 549.42 13.35 L 568.01 13.35
L 585.21 13.35 L 600.88 13.35 L 614.90 13.35 L 627.13 13.35 L 637.44 13.35 L 645
.70 13.35 L 651.76 13.35 L 655.51 13.35 L 656.81 13.35 L 656.81 32 Z" style="tra
nsform: translateX(7px); fill: black;"></path><circle class="animation-endpoint"
cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle
class="animation-endpoint" cx="663.81" cy="32" r="3.5" style="stroke: black; fil
l: black;"></circle></g><g class="animation-tail-iterations"></g></g><line class
="animation-delay-line" x1="7" y1="32" y2="32" x2="10.28" style="stroke: black;"
></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="13.57" sty
le="stroke: black; transform: translateX(660.1px);"></line></svg> |
12 >>>> Animation with step timing function | 12 >>>> Animation with step timing function |
13 <div class="animation-name" style="transform: translateX(7px); width: 666px;"></
div> | 13 <div class="animation-name" style="transform: translateX(7px); width: 666px;"></
div> |
14 <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; t
ransform: translateX(0px);"><g style="transform: translateX(0px);"><g style="tra
nsform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2
="673.67" style="stroke: rgb(0, 0, 0);"></line><path class="animation-keyframe"
d="M 0 32 L 0.03 13.35 L 1.41 13.35 L 5.27 13.35 L 11.49 13.35 L 19.91 13.35 L 3
0.42 13.35 L 42.88 13.35 L 57.15 13.35 L 73.10 13.35 L 90.59 13.35 L 109.49 13.3
5 L 129.66 13.35 L 150.98 13.35 L 173.30 13.35 L 196.50 13.35 L 220.43 13.35 L 2
44.96 13.35 L 269.97 13.35 L 295.31 13.35 L 320.84 13.35 L 346.45 13.35 L 371.98
13.35 L 397.31 13.35 L 422.31 13.35 L 446.83 13.35 L 470.75 13.35 L 493.92 13.3
5 L 516.22 13.35 L 537.51 13.35 L 557.66 13.35 L 576.53 13.35 L 593.99 13.35 L 6
09.90 13.35 L 624.13 13.35 L 636.54 13.35 L 647.00 13.35 L 655.38 13.35 L 661.54
13.35 L 665.35 13.35 L 666.67 13.35 L 666.67 32 Z" style="transform: translateX
(7px); fill: rgb(0, 0, 0);"></path><circle class="animation-endpoint" cx="7.00"
cy="32" r="3.5" style="stroke: rgb(0, 0, 0); fill: rgb(0, 0, 0);"></circle><circ
le class="animation-endpoint" cx="673.67" cy="32" r="3.5" style="stroke: rgb(0,
0, 0); fill: rgb(0, 0, 0);"></circle></g><g class="animation-tail-iterations"></
g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style=
"stroke: rgb(0, 0, 0);"></line><line class="animation-delay-line" x1="7" y1="32"
y2="32" x2="7.00" style="stroke: rgb(0, 0, 0); transform: translateX(666.67px);
"></line></svg> | 14 <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; t
ransform: translateX(0px);"><g style="transform: translateX(0px);"><g style="tra
nsform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2
="673.67" style="stroke: black;"></line><path class="animation-keyframe" d="M 0
32 L 0.03 13.35 L 1.41 13.35 L 5.27 13.35 L 11.49 13.35 L 19.91 13.35 L 30.42 13
.35 L 42.88 13.35 L 57.15 13.35 L 73.10 13.35 L 90.59 13.35 L 109.49 13.35 L 129
.66 13.35 L 150.98 13.35 L 173.30 13.35 L 196.50 13.35 L 220.43 13.35 L 244.96 1
3.35 L 269.97 13.35 L 295.31 13.35 L 320.84 13.35 L 346.45 13.35 L 371.98 13.35
L 397.31 13.35 L 422.31 13.35 L 446.83 13.35 L 470.75 13.35 L 493.92 13.35 L 516
.22 13.35 L 537.51 13.35 L 557.66 13.35 L 576.53 13.35 L 593.99 13.35 L 609.90 1
3.35 L 624.13 13.35 L 636.54 13.35 L 647.00 13.35 L 655.38 13.35 L 661.54 13.35
L 665.35 13.35 L 666.67 13.35 L 666.67 32 Z" style="transform: translateX(7px);
fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5
" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint
" cx="673.67" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><
g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x
1="7" y1="32" y2="32" x2="7.00" style="stroke: black;"></line><line class="anima
tion-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transfor
m: translateX(666.67px);"></line></svg> |
15 | 15 |
OLD | NEW |