Beispiel:CSS-custom-props-6.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
<title>CSS-Animation mit custom properties</title>
<style>
:root {
--color-1: #c32e04;
--color-2: hsla(201, 50%, 38%, 1);
--color-3: hsla(201, 50%, 38%, .8);
--color-4: hsla(201, 50%, 38%, .6);
--color-5: hsla(201, 50%, 38%, .4);
}
.ball {
--delay: calc(var(--i, 1) * 100ms);
--distance: calc(var(--d, 1) * (2.5 * var(--radius)));
--radius: 20px;
cx: var(--distance);
cy: var(--radius);
r: var(--radius);
animation: moveCircle 1200ms var(--delay) ease-in-out infinite;
}
.ball:nth-child(1) {
fill: var(--color-1);
}
.ball:nth-child(2) {
fill: var(--color-2);
--d: 2;
--i: 2;
}
.ball:nth-child(3) {
fill: var(--color-3);
--d: 3;
--i: 3;
}
.ball:nth-child(4) {
fill: var(--color-4);
--d: 4;
--i: 4;
}
.ball:nth-child(5) {
fill: var(--color-5);
--d: 5;
--i: 5;
}
@keyframes moveCircle {
50% {
cy: 150px;
r: 12.5px;
}
}
</style>
</head>
<body>
<h1>CSS-Animation mit <em>custom properties</em></h1>
<svg width="350" height="250">
<circle class="ball" />
<circle class="ball" />
<circle class="ball" />
<circle class="ball" />
<circle class="ball" />
</svg>
</body></html>