18.03.2024, 18:14
Code:
danke, einen Schritt bin ich weiter gekommen, durch die delays im body ist die Kreisanimation aber zerlegt, wie bekomme ich es als Einheit hin?
Ich würde gern auch noch eine Zeit definieren, an dem die Animation beim Postionswechsel stehen bleibt, gibt es dafür einen Parameter?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
@keyframes scaleIn {
from { transform: scale(.0, .0); opacity: .5; }
to { transform: scale(1.0, 1.0); opacity: 0; }
}
.element { width: 100px; height: 100px; position: absolute; background: white; border-radius: 50%; animation: scaleIn 2s infinite cubic-bezier(.0, .5, .5, 1.0), animation 10s; animation-iteration-count: infinite; }
@keyframes animation {
0%, 100% { top: 50px; left: 50px; }
25% { top: 50px; left: 600px; }
50% { top: 600px; left: 600px; }
75% { top: 600px; left: 50px; }
}
</style>
</head>
<body style="background-color: black">
<div class="element" style="animation-delay: 0s"></div>
<div class="element" style="animation-delay: 0.5s"></div>
<div class="element" style="animation-delay: 1.0s"></div>
</body>
</html>