Verwenden benutzerdefinierter Eigenschaften, um Variationen in Keyframe -Animationen zu streiten

Verwenden Sie die benutzerdefinierten CSS -Eigenschaften, um Varianten der Keyframe -Animation flexibel zu steuern, ohne dass ein Präprozessor erforderlich ist! In diesem Artikel wird untersucht, wie CSS und benutzerdefinierte Eigenschaften nur zur Implementierung der Anpassung von Keyframe -Animationen verwendet werden und die zusätzlichen Abhängigkeiten vermieden werden, die mit der Verwendung von Präzessoren wie Mixins mitgebracht werden.

Haben Sie sich jemals gefragt, wie Sie CSS -Animations -Keyframes anpassen können, ohne sich auf einen Präprozessor zu verlassen? Ich wende mich oft für Vorprozessoren dafür, aber wäre es nicht besser, nur native CSS zu verwenden, wenn ich diese Abhängigkeit loswerden kann?

Es stellt sich heraus, dass die Steuerung der Keyframe -Animationsvarianten allein durch CSS -benutzerdefinierte Eigenschaften allein mit CSS erreicht werden kann! Lassen Sie uns darüber nachgedacht, wie CSS -Keyframes funktionieren und wie Sie CSS und benutzerdefinierte Eigenschaften nutzen können, um sie zu verbessern.

CSS -Animationserbranzmechanismus

Wenn wir Animation auf Elemente anwenden, können wir einige Eigenschaften wie Dauer, Verzögerung usw. anpassen. Schauen wir uns ein einfaches Beispiel an: Es gibt zwei Klassen .Walk und .run, die beide die gleiche Animation verwenden (benanntem Atem), aber die Animationsausführungsgeschwindigkeit von .run ist schneller als .walk (0,5 bzw. 2s).

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Jedes Mal, wenn eine Animation wiederverwendet wird, variiert ihr Verhalten je nach den Eigenschaften, die wir zuweisen . Daher kann gesagt werden, dass das Verhalten der Animation von den Elementen ererbt, in denen sie angewendet wird.

Aber wie sollen die Animationsregeln (das Skalierungsverhältnis in diesem Beispiel) behandelt werden? Kehren Sie zum Beispiel der Atemanimation zurück: Die Walk -Klasse führt langsam Atemanimation durch, erfordert aber auch ein größeres Skalierungsverhältnis. Daher müssen wir ihren Skalierungswert so festlegen, dass sie größer sind als die .run -Klasse, während die .run -Klasse kleinere und häufigere Skalierungsänderungen annimmt.

In reinem CSS ist es üblich, die ursprüngliche Animation zu kopieren und dann die Werte direkt in der Klasse anzupassen:

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Während dieser Ansatz funktioniert, besteht eine bessere Lösung darin, die Eigenschaften und Werte der Animation gleichzeitig wiederzuverwenden! Wie macht ich das? Verwenden Sie den Vererbungsmechanismus von CSS -Variablen! Mal sehen, wie man es implementiert:

 <code>/* breath动画的行为基于继承的CSS变量值*/ @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; }</code>

Ist es nicht cool? Jetzt können wir verschiedene Effekte als die gleiche Animation bekommen, ohne wiederholte Animationen zu schreiben!

Wenn Sie noch einen Schritt weiter gehen müssen, denken Sie daran, dass wir auch die benutzerdefinierten CSS -Eigenschaften mit JavaScript aktualisieren können, die nicht nur die Stammvariablen, sondern auch die Variablen bestimmter Elemente aktualisiert. Ich finde das sehr leistungsstark, weil wir mit JavaScript effizientere Animationen erstellen können, ohne native Optimierungen für CSS -Animationen zu verlieren. Dies ist eine Win-Win-Situation!

Das obige ist der detaillierte Inhalt vonVerwenden benutzerdefinierter Eigenschaften, um Variationen in Keyframe -Animationen zu streiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!