| Tests the display of animations on the animation timeline. |
| |
| >>>> Animation with start delay only |
| <div class="animation-name" style="transform: translateX(229.22px); width: 444px;"></div> |
| <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(222.22px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" 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.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 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.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: 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="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="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transform: translateX(666.67px);"></line></svg> |
| >>>> Animation with start and end delay |
| <div class="animation-name" style="transform: translateX(10.28px); width: 600px;"></div> |
| <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: 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.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 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="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="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="animation-delay-line" x1="7" y1="32" y2="32" x2="13.57" style="stroke: black; transform: translateX(660.1px);"></line></svg> |
| >>>> Animation canceled |
| <div class="animation-name" style="transform: translateX(10.28px); width: 600px;"></div> |
| <svg class="animation-ui animation-ui-canceled" height="80" width="680.67" style="margin-left: -7px; transform: 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.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 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="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="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="animation-delay-line" x1="7" y1="32" y2="32" x2="13.57" style="stroke: black; transform: translateX(660.1px);"></line></svg> |
| >>>> Animation with step timing function |
| <div class="animation-name" style="transform: translateX(7px); width: 666px;"></div> |
| <svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(0px);"><g style="transform: 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 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.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 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: 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" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transform: translateX(666.67px);"></line></svg> |
| |
