Beispiel:CSS-custom-props-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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:Grundlayout.css" >
 <title>CSS-Animation mit custom properties</title>

<style> .ball { 

 --count: sibling-count();
 --index: sibling-index();
 --delay: calc(var(--index) * 100ms);
 --distance: calc(var(--index) * (2.5 * var(--radius)));
 --radius: 16px;

 fill: steelblue;
 opacity: calc(1 - (var(--index) - 1) / var(--count) * 0.8);
 cx: var(--distance);
 cy: var(--radius);
 r: var(--radius);
 animation: moveCircle 1200ms var(--delay) ease-in-out infinite;

}

@keyframes moveCircle { 

 50% {
   cy: 150px;
 }

}

</style>

</head>

<body>

CSS-Animation mit custom properties

<svg width="500" height="250"> 

 <circle class="ball" />
 <circle class="ball" />
 <circle class="ball" />
 <circle class="ball" />
 <circle class="ball" />

</svg>

Füge weitere Bälle ins Markup ein und beobachte, was passiert!
(Dieses Beispiel funktioniert noch nicht im Firefox!)

</body></html>

Abgerufen am 15.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-custom-props-6.html"