Javascript-forum
CSS Animationen verbinden - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Css (https://javascript-forum.de/forumdisplay.php?fid=7)
+--- Thema: CSS Animationen verbinden (/showthread.php?tid=2809)

CSS Animationen verbinden - envoy - 18.03.2024

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

RE: CSS Animationen verbinden - AndreasB - 18.03.2024

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);


RE: CSS Animationen verbinden - envoy - 18.03.2024

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>


RE: CSS Animationen verbinden - envoy - 19.03.2024

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; }

RE: CSS Animationen verbinden - AndreasB - 20.03.2024

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.

RE: CSS Animationen verbinden - envoy - 20.03.2024

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?

RE: CSS Animationen verbinden - AndreasB - 21.03.2024

(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; }
}


RE: CSS Animationen verbinden - envoy - 21.03.2024

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

RE: CSS Animationen verbinden - AndreasB - 21.03.2024

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.