Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
background-color: lime;
height: 100px;
width: 100px;
}
.cssanimation-normal {
animation: cssanimation 1000s;
}
.cssanimation-linear {
animation: cssanimation 1000s linear;
}
@keyframes cssanimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="cssanimation-normal"></div>
<div class="cssanimation-linear"></div>
<script>
"use strict";
const duration = 1000000;
function createAnimation(keyframes, effect, className) {
const div = document.createElement("div");
div.classList.add(className);
document.body.appendChild(div);
effect.duration = duration;
div.animate(keyframes, effect);
}
createAnimation({ opacity: [0, 1] },
{ delay: 500000, id: "test-delay-animation" },
"delay-positive");
createAnimation({ opacity: [0, 1] },
{ delay: -500000, id: "test-negative-delay-animation" },
"delay-negative");
createAnimation({ opacity: [0, 1] },
{ easing: "steps(2)" },
"easing-step");
createAnimation({ opacity: [0, 1] },
{ endDelay: 500000 },
"enddelay-positive");
createAnimation({ opacity: [0, 1] },
{ endDelay: -500000 },
"enddelay-negative");
createAnimation({ opacity: [0, 1] },
{ endDelay: 500000, fill: "forwards" },
"enddelay-with-fill-forwards");
createAnimation({ opacity: [0, 1] },
{ endDelay: 500000, iterations: Infinity },
"enddelay-with-iterations-infinity");
createAnimation({ opacity: [0, 1] },
{ direction: "alternate", iterations: Infinity },
"direction-alternate-with-iterations-infinity");
createAnimation({ opacity: [0, 1] },
{ direction: "alternate-reverse", iterations: Infinity },
"direction-alternate-reverse-with-iterations-infinity");
createAnimation({ opacity: [0, 1] },
{ direction: "reverse", iterations: Infinity },
"direction-reverse-with-iterations-infinity");
createAnimation({ opacity: [0, 1] },
{ fill: "backwards" },
"fill-backwards");
createAnimation({ opacity: [0, 1] },
{ fill: "backwards", delay: 500000, iterationStart: 0.5 },
"fill-backwards-with-delay-iterationstart");
createAnimation({ opacity: [0, 1] },
{ fill: "both" },
"fill-both");
createAnimation({ opacity: [0, 1] },
{ fill: "both", delay: 500000, iterationStart: 0.5 },
"fill-both-width-delay-iterationstart");
createAnimation({ opacity: [0, 1] },
{ fill: "forwards" },
"fill-forwards");
createAnimation({ opacity: [0, 1] },
{ iterationStart: 0.5 },
"iterationstart");
createAnimation({ width: ["100px", "150px"] },
{},
"no-compositor");
createAnimation([{ opacity: 0, easing: "steps(2)" }, { opacity: 1 }],
{},
"keyframes-easing-step");
createAnimation(
[
{
opacity: 0,
offset: 0,
},
{
opacity: 1,
offset: 0.1,
easing: "steps(1)",
},
{
opacity: 0,
offset: 0.13,
},
],
{},
"narrow-keyframes");
createAnimation(
[
{
offset: 0,
opacity: 1,
},
{
offset: 0.5,
opacity: 1,
},
{
offset: 0.5,
easing: "steps(1)",
opacity: 0,
},
{
offset: 1,
opacity: 1,
},
],
{},
"duplicate-offsets");
createAnimation({ opacity: [0, 1] },
{ delay: -250000 },
"delay-negative-25");
createAnimation({ opacity: [0, 1] },
{ delay: -750000 },
"delay-negative-75");
</script>
</body>
</html>