Verwenden von benutzerdefinierten Eigenschaften zur Steuerung von Variationen in Keyframe Animationen

Haben Sie sich jemals gefragt, wie man CSS-Animations-Keyframes anpassen kann, ohne eine Preprocessor-Funktion wie Mixins zu verwenden? Ich greife aus diesem Grund immer wieder zu Preprozessoren, aber es wäre so schön, eine weitere Abhängigkeit fallen zu lassen und mit reinem CSS zu arbeiten.

Nun, ich habe einen Weg gefunden, Variationen innerhalb einer Keyframe-Animation zu berücksichtigen, indem ich nichts weiter als CSS verwende, und das dank benutzerdefinierter Eigenschaften! Lassen Sie uns ein wenig mehr darüber lernen, wie CSS-Keyframes funktionieren und wie wir sie mit CSS und einem Hauch von benutzerdefinierten Eigenschaften verbessern können.

Verständnis der Vererbung von CSS-Animationen

Wenn wir einem Element eine Animation zuweisen, können wir einige seiner Eigenschaften wie Dauer, Verzögerung usw. anpassen. Lassen Sie mich Ihnen ein Dummy-Beispiel zeigen: Wir haben zwei Klassen: .walk und .run. Beide teilen sich dieselbe Animation (namens breath) und .run führt die Animation schneller aus als .walk (0,5s bis 2s).

@keyframes breath {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1.5);
  }
}

/* Both share the same animation, but walking is _slower_ than running */
.walk {
  animation: breath 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}

Jedes Mal, wenn wir eine Animation wiederverwenden, **kann sie sich basierend auf den zugewiesenen Eigenschaften unterschiedlich verhalten**. Wir können also sagen, dass eine Animation ihr Verhalten basierend auf dem Element erbt, auf das sie angewendet wird.

Aber was ist mit den Animations*regeln* (in diesem Fall der Skalierung)? Gehen wir zurück zum breath Animationsbeispiel: Die Klasse .walk führt breath langsamer aus, muss aber auch tiefer sein, daher müssen wir ihren Skalierungswert größer machen, als er für die Klasse .run ist, die kleinere, häufigere Atemzüge macht.

Der übliche Ansatz in reinem CSS besteht darin, die ursprüngliche Animation zu duplizieren und die Werte direkt in der Klasse zu verändern

@keyframes breath {
  /* same as before... */
}

/* similar to breath, but with different scales */
@keyframes breathDeep {
  from {
    transform: scale(0.3);
  }
  to {
    transform: scale(1.7);
  }
}

.walk {
  animation: breathDeep 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}

Das funktioniert zwar, aber es gibt eine bessere Lösung, die es uns ermöglicht, sowohl die Eigenschaften der Animation als auch ihre Werte wiederzuverwenden! Wie? Indem wir die Vererbung von CSS-Variablen nutzen! Sehen wir uns an, wie.

/* breath behaves based on the
CSS variables values that are inherited */
@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

Cool, oder? Jetzt müssen wir keine *duplizierten* Animationen schreiben, um unterschiedliche Effekte aus derselben Animation zu erzielen!

Wenn Sie noch weiter gehen müssen, denken Sie daran, dass wir CSS-benutzerdefinierte Eigenschaften auch mit JavaScript aktualisieren können. Nicht nur Root-Variablen, sondern auch in bestimmten Elementen. Ich finde das unglaublich leistungsfähig, weil wir effizientere Animationen erstellen können, indem wir JavaScript nutzen, ohne die nativen Optimierungen von CSS-Animationen zu verlieren. Das ist ein Gewinn für beide Seiten!

Siehe den Pen
Dynamische CSS @keyframes mit Vanilla CSS von Sandrina Pereira (@sandrina-p)
auf CodePen.