Meinung zu Animation via CSS-Klassen?

[Rolf B]

Hallo Christian,

ich habe den von Dir genannten Test mal nachprogrammiert und finde nur geringe Laufzeitunterschiede. Merklich sind sie ohnehin nur bei tausenden von Zellen. Für die Animation eines einzelnen Elementes ist das irrelevant.

Entscheidungskriterium sollte sein: Sofern sich die Animation mittels CSS Animation darstellen lässt (d.h. die gewünschte räumliche und zeitliche Abfolge von Positionen), sollte man das auch tun. Angesichts der Möglichkeiten, die Keyframes bieten, gibt es eine Menge Luft nach oben, bevor man an die Decke stößt. Ist die Bewegung dennoch zu komplex, kann man sie entweder per Script aus CSS Animationen zusammensetzen (was sicherlich tricky ist) oder komplett zu Fuß animieren. In dem Fall dann aber über das style-Attribut und passende Eigenschaften (z.B. transform).

Ob man die CSS Animation mittels direkter Zuweisung eines style-Attributs oder durch Setzen einer Klasse auslöst, ist aber eine andere Frage. Eine Klasse bietet sich an, wenn es sich um eine Standard-Animation handelt. Sobald Dinge berechnet werden müssen (über die in CSS gegebenen Möglichkeiten hinaus), ist eher style angebracht. Werden Keyframes gebraucht, muss das ohnehin im Stylesheet angegeben werden. Durch Einsatz von Custom Properties (aka CSS Variablen) kann man CSS Regeln und Keyframes auch noch dynamisch modifizieren.

p {
  --dauer: 1s;
  --topFrom: 10px;
  --topTo: 100px;
  position: absolute;
  animation-duration: var(--dauer);
  animation-name: moveTop;
}

@keyframes moveTop {
  from {  top: var(--topFrom);  }
  to {  top: var(--topTo); }
}

<p style="--topFrom: 100px; --topTo: 0px; --dauer: 10s">Ein Ring, sie zu knechten</p>

Es gibt also kein starres richtig und falsch, sondern wie immer ist es ein "kommt drauf an was man braucht".

Rolf