AnimXYZ

Es gibt ziemlich viele CSS-Animationsbibliotheken. Sie sind in der Regel ein Haufen von Klassennamen, die Sie nach Bedarf anwenden können, wie z. B. "bounce" oder "slide-right", und sie... tun diese Dinge. Sie sind in der Regel ziemlich meinungsbildend mit schönen Standardeinstellungen und nicht besonders auf Anpassung ausgelegt.

AnimXYZ scheint hochgradig anpassbar zu sein und nennt sich selbst "das erste komponierbare CSS-Animations-Toolkit".

Sie verwenden so viele der verschiedenen komponierbaren Teile, wie Sie für die gewünschte Ein-/Aus-Animation benötigen. Spielen Sie mit ihrem Builder herum und Sie werden Ausgaben wie diese sehen

<div
  class="square-group"
  xyz="tall-2 duration-6 ease-out-back stagger-1 skew-left-2 big-25% fade-50% right-5"
>
  <div class="square xyz-out"></div>
  <div class="square xyz-out"></div>
  <div class="square xyz-out"></div>
</div>

Der Klassenname xyz-out wird zu xyz-in, um die entgegengesetzte Animation auszulösen.

Ich mag es nicht, wenn Bibliotheken erfundene HTML-Attribute verwenden, um sich selbst zu steuern. Es ist unwahrscheinlich, dass Webstandards in Zukunft xyz verwenden werden, aber wer weiß, und wenn dies auf genügend Produktionssites geschieht, ist diese Tür für immer geschlossen. Aber schlimmer noch, es ermutigt andere Bibliotheken, dasselbe zu tun.

Alle diese Attributwerte erinnern an Tailwind. Um Tailwind effektiv zu nutzen, führt der Build-Prozess PurgeCSS aus, um alle ungenutzten Klassen zu entfernen, die nur einen winzigen Bruchteil der vollständigen Menge von Tailwind-Klassen ausmachen. Ich denke daran, weil das verarbeitete Stylesheet von AnimXYZ ~9,7 kB komprimiert ist, was größer ist als die Dateigröße, die Tailwind als Beispiel auf ihrer Marketingseite verwendet. Der Punkt ist, wenn Klassen verwendet würden, gäbe es wahrscheinlich einen direkteren Weg, die ungenutzten Klassen zu entfernen, was die Größe wahrscheinlich fast vernachlässigbar machen würde. Vielleicht ist die spezifische Verwendung von JavaScript-Frameworks cleverer.

Aber abgesehen von diesen Kritikpunkten ist es cool! Nicht nur gibt es clevere Standardeinstellungen, die hochgradig komponierbar sind, sondern Sie haben auch 100% Kontrolle über CSS Custom Properties.

Verpassen Sie nicht den XYZ-ray-Button unten rechts auf der Website, mit dem Sie sehen können, welche Animationen welche Elemente antreiben. Das gibt es auch in der Dokumentation, die super nett ist.

Es gibt einfach etwas Schönes an deklarativen Animationen. Ich erinnere mich, wie ich mit Matt Perry über Framer Motion gesprochen und seinen Ansatz genossen habe.