<!DOCTYPE html>
<head>
<style>
.ball-container {
position: absolute;
width: 200px;
height: 400px;
}
.box {
position: absolute;
left: 300px;
width: 200px;
height: 200px;
background-color: blue;
border-radius: 10px;
}
#box1 {
top: 50px;
}
#box2 {
top: 300px;
}
#box3 {
position: absolute;
left: 550px;
width: 200px;
height: 200px;
top: 50px;
overflow: hidden;
}
#box3-inner {
width: 200px;
height: 450px;
background-color: blue;
border-radius: 10px;
}
#box4 {
height: 50px;
top: 600px;
left: 50px;
}
</style>
</head>
<body>
<svg viewBox="0 0 100 200" class="ball-container">
<circle id="ball0" class="ball" cx="50" cy="50" r="50" fill="rgb(220, 105, 105)"></circle>
<circle id="ball1" class="ball" cx="50" cy="40" r="40" fill="rgb(200, 90, 90)"></circle>
<circle id="ball2" class="ball" cx="50" cy="30" r="30" fill="rgb(180, 75, 75)"></circle>
<circle id="ball3" class="ball" cx="50" cy="20" r="20" fill="rgb(160, 60, 60)"></circle>
<circle id="ball4" class="ball" cx="50" cy="10" r="10" fill="rgb(140, 45, 45)"></circle>
<rect x="0" y="197" width="100" height="3" fill="black"></rect>
</svg>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div id="box3">
<div id="box3-inner"></div>
</div>
<div class="box" id="box4"></div>
<script>
for (let i = 0; i < 5; i++) {
const ball = document.getElementById(`ball${i}`);
ball.animate([
{ transform: "translateY(0px)" },
{ transform: `translateY(${100 + 20 * i}px)` },
{ transform: "translateY(0px)" },
], {
duration: 1000,
iterations: Infinity,
easing: "ease-in-out"
});
}
box1.animate({ backgroundColor: ["red"] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate"
});
box2.animate({ opacity: [0] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate",
});
// Discrete property animation
box3.animate({ overflow: ["visible"] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate",
});
box4.animate([
{ transform: "none" },
{ transform: "translateX(400px) rotate3d(1, 1, 0, 50deg)" },
], {
duration: 2000,
iterations: Infinity,
direction: "alternate"
});
</script>
</body>
