Ich bin vor einiger Zeit über ein paar solche Animationen gestolpert und das gab mir die Idee, meine eigenen Versionen mit so wenig Code wie möglich zu erstellen, ohne externe Bibliotheken, unter Verwendung verschiedener Methoden, von denen einige Vorteile von mehr ...
Eines, was einzelne div-Elemente selten tun, ist zu animieren. Wenn Sie Ihr div oder eines seiner Pseudoelemente transformieren können, ist das in Ordnung (wie Lynn Fisher mit ihrem fantastischen BB-8 tut). Aber Sie können die opacity oder transform der einzelnen "Elemente", die Sie in Ihrem div erstellen, nicht direkt ändern, da es sich nicht um tatsächliche DOM-Elemente handelt.
Ich glaube fest daran, etwas anderes und Interessantes auszuprobieren, um Werkzeuge zu lernen, die man sonst vielleicht nie lernen würde. Die Arbeit mit den Einschränkungen eines einzelnen div ist vielleicht nicht gut für Produktionsarbeiten, aber es kann eine großartige Übung (und Herausforderung) sein, um Ihre Fähigkeiten auf unterhaltsame Weise zu erweitern. In diesem Sinne werden wir diese Technik verwenden, um zu untersuchen, wie Custom Properties (CSS-Variablen) funktionieren und uns sogar einen Weg zur Animation innerhalb unseres div bieten.
Ich weiß, dass es da draußen eine Menge reiner CSS-Würfel-Tutorials gibt. Ich habe selbst schon ein paar gemacht. Aber für Mitte 2017, wenn CSS Custom Properties in allen wichtigen Desktop-Browsern unterstützt werden, fühlen sie sich alle ... veraltet und sehr WET an. …
CSS hat jetzt Custom Properties. Wir haben in letzter Zeit viel darüber geschrieben. Die Browserunterstützung ist gut, aber natürlich haben alte, nicht-evergreen Browser wie Internet Explorer sie nicht und werden sie nie haben. Ich kann die Anziehungskraft des Autorens mit ... sehen.
CSS Custom Properties (vielleicht leichter verständlich als CSS-Variablen) bieten uns Möglichkeiten, Code prägnanter zu gestalten und neue Arbeitsweisen mit CSS einzuführen, die vorher nicht möglich waren. Sie können das, was Präprozessor-Variablen können ... ...
Wir haben vor kurzem gepostet über den Unterschied zwischen nativen CSS-Variablen (Custom Properties) und Präprozessor-Variablen. Es gibt ein paar esoterische Dinge, die Präprozessor-Variablen tun können, die native Variablen nicht können, aber meistens können native Variablen ...
CSS Custom Properties geben uns die Möglichkeit, in einen Eigenschaftswert hineinzugreifen und bestimmte Teile davon zu ändern. Das ist an vielen Stellen nützlich, aber besonders nützlich ist es bei Eigenschaften, bei denen wir dies auf keine andere Weise tun können.
Dan Wilson dokumentiert eine klassische Ärgernis mit Transforms
button {
transform: translateY(-150%);
}
button:hover {
/* will (perhaps unintentionally) override the original translate */
transform: scale(.8);
}Die native (und WET) Lösung ist, den ursprünglichen Transform erneut aufzulisten
button:hover {
Ich bin neulich auf ein interessantes Problem gestoßen. Ich wollte ein Element mit einer *zufälligen* animation-duration animieren. …
