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?
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.
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?
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
}
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?
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
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.
In this example, the animation named slideIn will be applied to elements with the class .animated-element. The animation will run for 1 second with an ease-in-out timing function.
Add the HTML element and apply the appropriate class:
html
Copy code
This element will be animated
With these steps, the CSS animation will be connected to the HTML element, and when the page loads, the specified animation will be applied to the element. You can adjust the animation duration, timing function, and other properties according to your design requirements.
