CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin und mehr

Ich habe die Angewohnheit entwickelt, in meiner Freizeit CSS-Animationen zu erstellen, inspiriert von Dingen, denen ich im Laufe des Tages begegne. Um die Animationen so zu erstellen, wie ich sie mir vorstelle, mit möglichst wenigen Elementen, habe ich einige Tricks gefunden, um CSS Dinge tun zu lassen, von denen du vielleicht nicht weißt, dass es möglich ist. Ich möchte sie gerne mit dir teilen.

#1) Sprung zu einem anderen Zustand mitten in der Animation

CSS-Animationen erleichtern den Übergang von Eigenschaften zu einem neuen Wert über die Zeit. Sie haben auch die Fähigkeit, Eigenschaften praktisch sofort auf einen neuen Wert zu *springen*. Der Trick besteht darin, zwei Keyframes mit einem sehr kleinen Unterschied zu verwenden, etwa .001% funktioniert gut.

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Das Folgende ist ein extremes Beispiel dafür, das die Deckkraft und einen Textschatten umschaltet, um eine flackernde Reklametafelbeleuchtung zu simulieren.

Sieh dir den Pen No Vacancy 404 CSS Only von Zach Saucier (@Zeaklous) auf CodePen an.

#2) Negative Animation Delays

Ein positiver Animationsverzug ist, wenn die Animation eine bestimmte Zeit wartet, bevor sie beginnt. Ein *negativer* Animationsverzug startet die Animation sofort, als ob diese Zeit bereits vergangen wäre. Mit anderen Worten, starte die Animation in einem Zustand, der weiter im Animationszyklus liegt. Dies ermöglicht es, Animationen für mehrere Elemente wiederzuverwenden, wobei sich nur die Zeitsteuerung ändert.

Hier ist ein Beispiel dafür, bei dem jeder Kreis sofort in einem anderen Zustand des Animationszyklus beginnt

Sieh dir den Pen Circle Snake von Zach Saucier (@Zeaklous) auf CodePen an

#3) Proportionale Animationen

Ich versuche, alles, was ich in die Produktion gebe, so reaktionsschnell wie möglich zu gestalten, einschließlich meiner Animationen. Reaktionsfähigkeit für CSS-Animationen ist nicht für alle von mir erstellten Animationen möglich, aber manchmal ist sie es, indem Prozente und andere relative Einheiten verwendet werden.

In vielen meiner Animationen verwende ich Elemente wie Kreise und Quadrate, die eine proportionale Breite und Höhe benötigen. Du denkst vielleicht, dass ich feste Breiten- und Höhenwerte verwenden muss, um sie so zu halten, aber das ist nicht der Fall! Ich kann sie mit einer prozentualen Breite, Null Höhe und prozentualem Padding erstellen. Das Padding-Bottom ist der Trick, um es proportional zur Breite zu halten, wie hier

.container {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

Du kannst dies im folgenden Demo in der Praxis sehen, indem du die Größe des Fensters änderst, in dem es sich befindet. Das Demo nutzt auch negative Animationsverzögerungen.

Sieh dir den Pen Responsive CSS bars von Zach Saucier (@Zeaklous) auf CodePen an.

#4) Ändern der Transformationsursprungsmitte während der Animation

Während ich an einer meiner Animationen arbeitete, war ich überrascht festzustellen, dass nicht nur die transform-origin mitten in der Animation geändert werden kann, sie ist auch animierbar! Im folgenden Beispiel ermöglicht uns dies, eine Animation mit Rotationen auf verschiedenen Achsen zu erstellen, anstatt vier separate Animationen zu verwenden.

Sieh dir den Pen Change transformation-origin mid animation von Zach Saucier (@Zeaklous) auf CodePen an

Der Nachteil dieses Tricks ist, dass du animation-fill-mode: forwards; nicht nur für einen Teil einer Animation verwenden kannst. Das bedeutet, dass wir das Element in einen Zustand zurückversetzen müssen, der seinem Zustand vor der Änderung der transform-origin entspricht. Im obigen Beispiel wird dies durch die Verwendung von Translates erreicht, um die Effekte der Rotation zu simulieren. Diese Technik kann jedoch bei komplexeren Beispielen mühsam werden, wie hier gezeigt.

#5) Negative Transformationsursprünge

Du kannst einen negativen transform-origin einstellen, was nützlich ist, um z. B. kreisförmige Bewegungspfade zu erstellen. Anstatt spezifische Translate- und Rotationswerte mit einem Element zu spezifizieren, um Kreisbögen zu erstellen wie Lea Verou beschreibt, können wir dies viel einfacher tun, indem wir negative transform-origin Werte zusätzlich zu einem zweiten Element oder Pseudoelement verwenden (ein Element, wenn wir möchten, dass sich das Element dreht und sich auch in einem Kreisweg bewegt). Durch die Verwendung unterschiedlicher Werte eines negativen Transformationsursprungs können wir dieselbe Animation für mehrere Elemente wiederverwenden und dennoch eine Kreisbewegung für jedes beibehalten.

Sieh dir den Pen CSS Circular Motion Technique von Zach Saucier (@Zeaklous) auf CodePen an.

#6) Box-Schatten-Magie

Für Animationen einfacher Formen ohne Inhalt ist box-shadow recht nützlich. Die `box-shadow`-Eigenschaft kann mehrere Ränder um Elemente erstellen. Diese Idee, kombiniert mit etwas Verschiebung, kann neue animierbare "Elemente" aus zusätzlichen HTML-Elementen erstellen. Dies ermöglicht uns, die folgende Animation zu erstellen, die wie sechs kreisförmige Elemente aussieht, die sich kreisförmig drehen, aber tatsächlich aus einem Element mit einigen versetzten `box-shadow`-Formen besteht.

Sieh dir den Pen Single element color loader von Zach Saucier (@Zeaklous) auf CodePen an

Leider werden Prozente von keinem `box-shadow`-Eigenschaft unterstützt, daher sind sie nicht so leicht reaktionsschnell wie ein natives HTML-Element. Sie können jedoch immer noch manuell in einer Animation geändert oder durch die Verwendung von transform:scale(n) auf dem eigentlichen HTML-Element, zu dem sie gehören, geändert werden.

#7) Verwendung von Pseudoelementen

Ähnlich wie bei `box-shadows` können Pseudoelemente verwendet werden, um einem einzelnen Element mehr Inhalt hinzuzufügen. Sie können separate Animationen von ihrem Elternteil haben, ihre eigenen `box-shadows` und sind sehr ähnlich wie Kindelemente, nur ohne die HTML-Markup. Dies ermöglicht uns, erstaunliche Kreationen aus einem einzigen Element zu erstellen, wie die folgende.

Sieh dir den Pen Single Element gif Recreation von Zach Saucier (@Zeaklous) auf CodePen an

Im Beispiel sind alle großen Kreise um den mittleren blinkenden Kreis sowie zwei der kleineren Kreise am Rand (sich gegenüberliegend) `box-shadows` des Hauptelements. Die anderen beiden kleinen Kreise sind Teil des `box-shadow` eines Pseudoelements, und der aus Strichen bestehende Ring ist eine SVG, die als Hintergrund auf dem anderen Pseudoelement angewendet wird.

Einige weitere Hinweise

Verwenden Sie Transformationen, wann immer Sie können

Transformationen sind performanter als ihre Nicht-Transformations-Gegenstücke, wie Paul Irish gezeigt hat (auch das). Das bedeutet hauptsächlich, `scale` und `translate` anstelle von Änderungen der Abmessungen oder `top`/`left`-Werte zu verwenden.

Transformationen ermöglichen auch ein reaktionsschnelleres Design, indem sie Dinge wie scale relativ zu ihrer ursprünglichen Größe verwenden, wie in dieser Animation von Amos gezeigt wird.

Die Nicht-Verwendung von Transformationen kann auch schwer zu fassende Probleme verursachen. Zum Beispiel wurden in dieser Animation von mir die Elemente in Chrome falsch eingefärbt, obwohl die Werte selbst korrekt waren. Nach der Umstellung auf Transformationen wurden all meine Probleme behoben.

z-index kann Probleme verursachen

Ich verbringe wahrscheinlich mehr Zeit damit, z-index-Probleme mit meinen Animationen zu beheben als mit jedem anderen Problem. Z-Indizes werden von Anbieter zu Anbieter unterschiedlich gehandhabt. Bei Animationen ist der Hauptunterschied, dass Mozilla keine z-index-Werte animiert, sondern Elemente von einem z-index zum nächsten springen lässt, während Anbieter wie Webkit den z-index-Wert animieren.

Eine weitere Anmerkung: Wenn man möchte, dass seine Pseudoelemente hinter seinem Elternelement erscheinen, muss das Pseudoelement einen negativen z-index haben und das Elternteil darf keine andere Stapelreihenfolge als die Standardreihenfolge haben, was bedeutet, dass du keinen z-index oder etwas anderes anwenden kannst, das das Elternteil aus seinem natürlichen Stapelkontext entfernt.

Ein letzter Trick im Umgang mit z-index ist einer, der sich mit der Deckkraft befasst. Sobald einem Element eine Deckkraft von etwas anderem als dem Standardwert "1" zugewiesen wird, erhält es seinen eigenen Stapelkontext. Für weitere Informationen dazu siehe Philips Beitrag

Lass dich inspirieren

Ob es etwas ist, das du in der realen Welt siehst, eine interessante Webseite, die du online findest, Teil eines Video-Intros, eines GIFs oder etwas ganz anderes, finde Dinge, von denen du denkst, dass sie möglich zu erstellen sind und versuche es!

Ich habe festgestellt, dass das Nicht-Anschauen, wie der ursprüngliche Autor es erstellt hat, es mir ermöglicht zu lernen, es in einem einzigartigen Stil zu erstellen und manchmal sogar auf effizientere Weise. Selbst wenn ich bei meiner ursprünglichen Absicht scheitere, werde ich immer vertrauter mit der Sprache, die ich verwende, oder lerne mehr darüber. Oft habe ich etwas vorzuweisen, auch wenn es nicht so grandios ist, wie ich es mir ursprünglich erhofft hatte. Manchmal bin ich völlig überrascht, wie genial meine Kreation ist, wenn ich es gar nicht beabsichtigt hatte!

Ich hoffe, dieser Artikel hilft dir, großartigere Kreationen zu bauen, auch wenn du nichts aus den spezifischen Techniken gelernt hast!