Login

envoy · 18.03.2024, 13:36

Hallo,

ich habe 2 einzelne CSS @keyframe Animationen, einmal einen pulsierenden circle und eine animierte Positionsänderung und möchte diese gerne in
einer Animation verbinden, sodass der pulsierende circle seine Position verändert. Wie kann ich diese beiden Animationen in eine packen?

Viele Grüße

AndreasB · 18.03.2024, 14:26

Hallo @envoy,

Man kann in CSS mehrere animationen, Komma separiert auflisten.
Entweder shorthand, als Wert für die animation Property, oder einzeln als Werte für die animation-* Property.

Für dich so:

Code:
animation: scaleIn 4s infinite cubic-bezier(.0, .5, .5, 1.0), animation 4s infinite cubic-bezier(.0, .5, .5, 1.0);

oder so:

Code:
animation-name: scaleIn, animation;

animation-duration: 4s;

animation-iteration-count: infinite;

animation-timing-function: cubic-bezier(.0, .5, .5, 1.0);

envoy · 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>

envoy · 19.03.2024, 23:19

Ich habe versucht das delay mit in das .element zu packen, funktioiert leider nicht.

@keyframes

scaleIn {
from { transform: scale(0.0, 0.0); opacity: 0.5; }
to { transform: scale(1.0, 1.0); opacity: 0.0; }
}

.element {
width: 100px;
height: 100px;
position: absolute;
background: white;
border-radius: 50%;
animation: scaleIn 6s;
animation-delay: 0.0s, 1.0s, 2.0s;
animation-iteration-count: infinite; }

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.

envoy · 20.03.2024, 13:51

Danke für die schnelle Hilfe, ja das ist was ich umsetzen wollte

Code:
@keyframes animation { 

0%, 100% {  top: 100px;  left: 0px; }  

10% {  top: 100px;  left: 200px; }  

20% {  top: 100px;  left: 200px; }  

30% {  top: 100px;  left: 400px; }  

40% {  top: 100px;  left: 400px; }  

50% {  top: 100px;  left: 600px; }  

60% {  top: 100px;  left: 600px; }  

80% {  top: 100px;  left: 800px; }  

90% {  top: 100px;  left: 0px; }

Ich wollte noch Pausen in der Animation einfügen, an dem der Punkt zwischendurch stehen bleibt. Ich habe das über die % Postionen gelöst und Stop-Punkte
definiert, das aber bestimmt nicht besonders sinnvoll gelöst.

Kann ich im .element noch einen Parameter definieren, das nach jedem Step ein Zeit x stehen bleibt?

AndreasB · 21.03.2024, 07:51

(20.03.2024, 13:51)envoy schrieb: Kann ich im .element noch einen Parameter definieren, das nach jedem Step ein Zeit x stehen bleibt?

Nein, das musst du - wie du es schon gemacht hast - über die Keyframes lösen.

Du kannst aber das Ganze noch aufräumen:

Code:
@keyframes animation {

    0%,  90% {  top: 100px;  left: 0px; }

    10%, 20% {  top: 100px;  left: 200px; }

    30%, 40% {  top: 100px;  left: 400px; }

    50%, 60% {  top: 100px;  left: 600px; }

    80%      {  top: 100px;  left: 800px; }

}

envoy · 21.03.2024, 08:16

alles klar danke, die Möglichkeit mit @keyframes zu animieren ist eine schöne einfache Sache, es wäre toll wenn es noch mehr Möglichkeiten zur Steuerung gäbe, da kommt man dann wahrscheinlich doch nicht an javascript vorbei

AndreasB · 21.03.2024, 08:23

Genau. Mit JavaScript gibt es dann viel mehr Möglichkeiten.
Entweder nativ über Styles, über die Web Animations API oder mit Hilfe von Frameworks wie GSAP.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken