Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@property --ball-color {
syntax: "<color>";
inherits: true;
initial-value: #f06;
}
.ball {
width: 80px;
height: 80px;
border: 1px solid transparent;
border-radius: 50%;
background: var(--ball-color);
position: absolute;
}
.still {
top: 0;
left: 10px;
}
.animated {
top: 100px;
left: 10px;
animation: simple-animation 2s infinite alternate;
}
.multi {
top: 200px;
left: 10px;
animation: simple-animation 2s infinite alternate,
other-animation 5s infinite alternate;
}
.delayed {
top: 300px;
left: 10px;
background: rebeccapurple;
animation: simple-animation 3s 60s 10;
}
.multi-finite {
top: 400px;
left: 10px;
background: yellow;
animation: simple-animation 3s,
other-animation 4s;
}
.short {
top: 500px;
left: 10px;
background: red;
animation: simple-animation 2s normal;
}
.long {
top: 600px;
left: 10px;
background: blue;
animation: simple-animation 120s;
}
.negative-delay {
top: 700px;
left: 10px;
background: gray;
animation: simple-animation 15s -10s;
animation-fill-mode: forwards;
}
.no-compositor {
top: 0;
right: 10px;
background: gold;
animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
}
.compositor-all {
animation: compositor-all 2s infinite;
}
.compositor-notall {
animation: compositor-notall 2s infinite;
}
.compositor-warning {
animation: compositor-all 2s infinite;
}
.warning-observer {
width: 10px;
height: 10px;
background-image: -moz-element(#warning);
}
.longhand {
animation: longhand 10s infinite;
}
@keyframes simple-animation {
100% {
transform: translateX(300px);
}
}
@keyframes other-animation {
100% {
background: blue;
}
}
@keyframes no-compositor {
100% {
margin-right: 600px;
}
}
@keyframes compositor-all {
to { opacity: 0.5 }
}
@keyframes compositor-notall {
from {
--ball-color: tomato;
opacity: 0;
width: 0px;
transform: translate(0px);
}
to {
--ball-color: gold;
opacity: 1;
width: 100px;
transform: translate(100px);
}
}
@keyframes longhand {
from {
background: red;
padding: 0 0 0 10px;
}
to {
background: lime;
padding: 0 0 0 20px;
}
}
</style>
</head>
<body>
<!-- Comment node -->
<div class="ball still"></div>
<div class="ball animated"></div>
<div class="ball multi"></div>
<div class="ball delayed"></div>
<div class="ball multi-finite"></div>
<div class="ball short"></div>
<div class="ball long"></div>
<div class="ball negative-delay"></div>
<div class="ball no-compositor"></div>
<div class="ball end-delay"></div>
<div class="ball compositor-all"></div>
<div class="ball compositor-notall"></div>
<div class="ball compositor-warning" id="warning"></div>
<div class="ball longhand"></div>
<div class="warning-observer"></div>
<script>
/* globals KeyframeEffect, Animation */
"use strict";
const el = document.querySelector(".end-delay");
const effect = new KeyframeEffect(el, [
{ opacity: 0, offset: 0 },
{ opacity: 1, offset: 1 },
], { duration: 1000000, endDelay: 500000, fill: "none" });
const animation = new Animation(effect, document.timeline);
animation.play();
</script>
</body>
</html>