Login

AndreasB · 20.03.2024, 09:11

Code:
animation-delay: 0.0s, 1.0s, 2.0s;

funktioniert nicht da jedes Delay für eine andere Animation, die in animation-name definiert ist, gilt.
Du hast aber nur eine Animation scaleIn definiert.
Außerdem überschreibt dein inline Style das animation-delay.

Ich denke du willst so was:

CSS:

Code:
.element {

    width: 100px;

    height: 100px;

    position: absolute;

    background: white;

    border-radius: 50%;

    animation-name: scaleIn, animation;

    animation-duration: 6s;

    animation-iteration-count: infinite;

}

.element-2 {

    /* Hier ist das erste Delay für scaleIn das zweite für animation */

    animation-delay: 0.5s, 0s

}

.element-3 {

    animation-delay: 1.0s, 0s

}

HTML:

Code:
<body style="background-color: black">

    <div class="element element-1"></div>

    <div class="element element-2"></div>

    <div class="element element-3"></div>

</body>

Ich habe das jetzt für die Übersichtlichkeit im Style-Tag gemacht, du könntest das auch in deinen Inline-Styles ergänzen.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken