CSS-Animationsgenerator Erstellen Sie CSS-Keyframe-Animationen mit vorgefertigten Effekten und anpassbarer Zeitsteuerung.

CSS-Animationen verwenden die Animations-Kurzschreibweise mit @keyframes-Regeln. Die Animations-Eigenschaft kombiniert: animation-name (verweist auf die @keyframes-Regel), animation-duration, animation-timing-function (ease, linear, ease-in, ease-out, ease-in-out oder benutzerdefinierte cubic-bezier), animation-delay, animation-iteration-count (Zahl oder infinite), animation-direction (normal, reverse, alternate, alternate-reverse), animation-fill-mode (none, forwards, backwards, both) und animation-play-state (running, paused). Die @keyframes-Regel definiert die Animationsstadien mithilfe von Prozentsätzen (0% bis 100%) oder from/to-Schlüsselwörtern. Für eine gute Leistung sollten Sie nur transform und opacity-Eigenschaften animieren, wenn möglich, da diese GPU-beschleunigt werden können. Andere Eigenschaften wie width, height, margin und padding lösen Layout-Neuberechnungen aus. Verwenden Sie die will-change-Eigenschaft, um den Browser über bevorstehende Animationen zu informieren.