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; 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? 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; 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 { Code: <body style="background-color: black"> RE: CSS Animationen verbinden - envoy - 20.03.2024 Danke für die schnelle Hilfe, ja das ist was ich umsetzen wollte Code: @keyframes animation { 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 { 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. RE: CSS Animationen verbinden - ajmanproperties1 - 01.05.2024 To connect CSS animations, you need to apply them to HTML elements using CSS selectors. Here's a basic example of how to do it: Define your CSS animations using @keyframes rule. For example: css Copy code @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } Apply the animation to an HTML element using the animation property. For example: css Copy code .animated-element { animation: slideIn 1s ease-in-out; } 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. |