Eine Website ist nicht nur ein statisches Dokument, einige Details können die Website lebendiger und interessanter machen. Was ist, wenn der Inhalt der Webseite nicht direkt angezeigt wird, sondern in Popup, Folie, Ausblenden oder gedrehter Weise angezeigt wird? Während solche Animationen nicht immer praktisch sind, können sie in einigen Fällen die Aufmerksamkeit der Benutzer auf bestimmte Elemente auf sich ziehen, die Unterscheidung zwischen Elementen stärken und sogar staatliche Änderungen angeben, sodass sie nicht völlig nutzlos sind.
Deshalb habe ich eine Reihe von CSS -Tools erstellt, um einem Element Animationseffekte hinzuzufügen, wenn es in das Sichtfeld eintritt. Ja, dies ist eine völlig reine CSS -Implementierung. Es liefert nicht nur mehrere Animationen und Varianten, sondern unterstützt auch den Verschachtungseffekt von Animationen, die fast wie das Erstellen einer Szene sein können.
Zum Beispiel so:
Dies ist wirklich nur eine vereinfachte Version dieser fortgeschritteneren Version:
Wir erläutern zunächst die Grundlagen des Erstellens von Animationen und stellen dann einige der Details ein, die ich hinzugefügt habe, wie man Animationen verschachtelt und wie man sie in HTML -Elementen anwendet, und schließlich werden wir sehen, wie das alles in Bezug auf die reduzierten Bewegungspräferenzen des Benutzers erreicht werden kann.
Die Kernidee besteht darin, eine einfache CSS @keyframes -Animation hinzuzufügen und sie auf alles anzuwenden, was wir bei der Ladevorstellung die Seite animieren möchten. Lassen Sie uns ein Element verblassen und von opacity: 0 zu opacity: 1 in einer halben Sekunde:
.animate {
Animationsdauer: 0,5s;
Animationsname: Animate-Fade;
Animation-Zelay: 0,5s;
Animations-Fill-Mode: Rückwärts;
}
@Keyframes Animate-Fade {
0% {Opazität: 0;
100% {Opazität: 1;
} Bitte beachten Sie, dass es hier auch ein animation-delay von 0,5 Sekunden gibt, damit der Rest der Website zuerst geladen werden kann. animation-fill-mode: backwards wird verwendet, um sicherzustellen, dass unser anfänglicher Animationszustand beim Laden der Seite aktiv ist. Ohne dies werden unsere Animationselemente auftauchen, bevor wir wollen.
Wenn wir faul sind, können wir hier anhalten. CSS-Tricks-Leser werden jedoch sicherlich nicht faul sein. Lassen Sie uns also sehen, wie ein System verwendet werden kann, um diese Art von Dingen zu verbessern.
Es macht mehr Spaß, eine Vielzahl von Animationen zu haben, als nur ein oder zwei Animationen zu verwenden. Wir müssen nicht einmal eine Reihe neuer @keyframes erstellen, um mehr Animationen zu erstellen. Das Erstellen einer neuen Klasse ist sehr einfach. Wir müssen nur die von der Animation verwendeten Rahmen ändern und sie für alle Zeiten gleich halten.
Die Anzahl der CSS -Animationen ist nahezu unbegrenzt. (Siehe Animate.Style, eine riesige Sammlung.) CSS -Filter wie blur() , brightness() und saturate() und natürlich CSS -Transformationen können auch verwendet werden, um mehr Varianten zu erstellen.
Beginnen wir jetzt jedoch mit einer neuen Animationsklasse, die die CSS -Transformation verwendet, um das Element "Pop -Up" zu machen.
.animate.pop {
Animationsdauer: 0,5s;
Animationsname: Animate-Pop;
Animations-Timing-Funktion: Kubikbezier (.26, .53, .74, 1,48);
}
@keyframes Animate-Pop {
0% {
Deckkraft: 0;
Transformation: Skala (0,5, 0,5);
}
100% {
Deckkraft: 1;
Transformation: Skala (1, 1);
}
} Ich habe eine kleine Zeitkurve von cubic-bezier() von Lea Verous unverzichtbarer Kubik-bezier.com hinzugefügt, um einen belastbaren Rückpralleffekt zu erzielen.
Wir können es besser machen! Zum Beispiel können wir Elemente zu unterschiedlichen Zeiten animieren. Dies erzeugt einen verschachtelten Effekt und erzeugt komplex aussehende Bewegungen, ohne dass viel Code erforderlich ist.
Dies fühlt sich gut an, wenn CSS -Filter, CSS -Conversions und eine verschachtelte Animation von etwa einem Zehntel Sekunde auf drei Seitenelementen eingezogen sind:
Alles, was wir tun, ist eine neue Klasse für jedes Element zu erstellen, das die Zeit trennt, die das Element mit Animation beginnt, wobei animation-delay -Wert verwendet wird, der ein Zehntel Sekunde voneinander entfernt ist.
.Delay-1 {Animation-Delay: 0,6s;
.Delay-2 {Animation-Delay: 0,7s;
.Delay-3 {Animation-Delay: 0.8s;Alles andere ist genau das gleiche. Denken Sie daran, dass unsere Basislatenz 0,5 Sekunden beträgt, sodass diese Helferklassen von dort aus gezählt werden.
Seien wir ausgezeichnete Web -Bürger und entfernen Animationen für Benutzer, die reduzierte Sportpräferenzen ermöglicht haben:
@media Screen und (bevorzugt (bevorzugt man reduzierte Motion: Reduzieren Sie) {{
.animate {Animation: Keine! Wichtig;
}Auf diese Weise wird die Animation nicht geladen, und die Elemente treten in das Sichtfeld wie gewohnt ein. "Bewegung" reduzieren "bedeutet nicht immer" Entfernung "-Bewegung, was sich erinnert.
Bisher haben wir uns die Basisanimation sowie eine etwas fortgeschrittenere angesehen, die sie mit verschachtelten Animationsverzögerungen (in der neuen Klasse enthalten) stärker erweitert werden können. Wir sehen auch, wie wir gleichzeitig die Sportpräferenzen der Benutzer respektieren können.
Obwohl es Echtzeitdemonstrationen gibt, die diese Konzepte zeigen, behandeln wir nicht, wie wir unsere Arbeit auf HTML anwenden können. Das Coole ist, dass wir es in fast jedem Element verwenden können, egal ob Div, Span, Artikel, Kopfzeile, Abschnitt, Tabelle, Form ... Sie wissen.
Wir werden tun: Wir möchten unser Animationssystem für drei HTML -Elemente verwenden, von denen jedes drei Klassen erhält. Wir können den gesamten Animationscode für das Element selbst hardcodieren, aber es ermöglicht es uns, ein wiederverwendbares Animationssystem zu erhalten.
Unsere Animationselemente sehen also jetzt wie folgt aus:
<h2> Eins!</h2> <h2>Zwei!</h2> <h2>Drei!</h2>
Zählen wir sie!
Schauen Sie es aus: Wir beginnen mit einem scheinbar grundlegenden Satz @keyframes und verwandeln es in ein vollständiges System, um interessante Animationen für Elemente anzuwenden, die in das Sichtfeld eintreten.
Das ist natürlich sehr interessant. Das größte Imbiss für mich ist jedoch, dass die Beispiele, die wir sehen, ein vollständiges System bilden, mit dem Basislinien, verschiedene Arten von Animationen, Verschachtelungsverzögerungen und die Beachtung von Benutzerbewegungseinstellungen erstellt werden können. Für mich sind dies alle Elemente eines flexiblen und benutzerfreundlichen Systems. Es gab uns viel mit sehr kleinen Sachen ohne ein paar zusätzliche Schrott.
Was wir wirklich abdecken können, kann eine komplette Animationsbibliothek sein. Aber natürlich habe ich hier nicht aufgehört. Ich habe Ihnen alle meine CSS -Animationsdateien zur Verfügung gestellt. Es enthält mehrere Animationstypen, darunter 15 Klassen mit unterschiedlichen Verzögerungen, mit denen die Dinge verstärkt werden können. Ich habe diese in meinen eigenen Projekten verwendet, aber dies ist immer noch eine frühe Version und ich würde gerne Feedback dazu erhalten. Bitte genießen Sie und lassen Sie mich wissen, was Sie in den Kommentaren denken!
/* ========================================================================================================
Animationssystem von Neale Van Fleet von Rogue Amoeba
========================================================ieben
.animate {
Animationsdauer: 0,75s;
Animation-Zelay: 0,5s;
Animationsname: Animate-Fade;
Animations-Timing-Funktion: Kubikbezier (.26, .53, .74, 1,48);
Animations-Fill-Mode: Rückwärts;
}
/ * Verblassen in */
.animate.fade {
Animationsname: Animate-Fade;
Animations-Timing-Funktion: Leichtigkeit;
}
@Keyframes Animate-Fade {
0% {Opazität: 0;
100% {Opazität: 1;
}
/ * Pop in */
.Animate.pop {Animationsname: Animate-Pop;
@keyframes Animate-Pop {
0% {
Deckkraft: 0;
Transformation: Skala (0,5, 0,5);
}
100% {
Deckkraft: 1;
Transformation: Skala (1, 1);
}
}
/ * Verwischen in *//
.animate.blur {
Animationsname: Animate-Blur;
Animations-Timing-Funktion: Leichtigkeit;
}
@Keyframes Animate-Blur {
0% {
Deckkraft: 0;
Filter: Blur (15px);
}
100% {
Deckkraft: 1;
Filter: Blur (0px);
}
}
/ * Leuchten ein */
.animate.glow {
Animationsname: Animate-Glow;
Animations-Timing-Funktion: Leichtigkeit;
}
@Keyframes Animate-Glow {
0% {
Deckkraft: 0;
Filter: Helligkeit (3) gesättigt (3);
Transformation: Skala (0,8, 0,8);
}
100% {
Deckkraft: 1;
Filter: Helligkeit (1) gesättigt (1);
Transformation: Skala (1, 1);
}
}
/ * Wachsen in */
.Animate.grow {Animationsname: Animed-Grow;
@keyframes Animate-Grew {
0% {
Deckkraft: 0;
Transformation: Skala (1, 0);
Sichtbarkeit: versteckt;
}
100% {
Deckkraft: 1;
Transformation: Skala (1, 1);
}
}
/ * Splat in */
.Animate.splat {Animationsname: Animate-splat;
@keyframes Animate-splat {
0% {
Deckkraft: 0;
Transformation: Skalierung (0, 0) Drehen (20DEG) Translate (0, -30px);
}
70% {
Deckkraft: 1;
Transformation: Skala (1,1, 1,1) drehen (15 Grad);
}
85% {
Deckkraft: 1;
Transformation: Skalierung (1,1, 1,1) Drehung (15DEG) Translate (0, -10px);
}
100% {
Deckkraft: 1;
Transformation: Skala (1, 1) Drehen (0) Translate (0, 0);
}
}
/ * Rollen in */
.Animate.roll {Animationsname: Animate-Roll;
@keyframes Animate-Roll {
0% {
Deckkraft: 0;
Transformation: Skalierung (0, 0) Drehung (360 Grad);
}
100% {
Deckkraft: 1;
Transformation: Skala (1, 1) Drehen (0deg);
}
}
/ * Drehen Sie ein */
.animate.flip {
Animationsname: Animate-Flip;
Transform-Stil: Preserve-3d;
Perspektive: 1000px;
}
@keyframes Animate-flip {
0% {
Deckkraft: 0;
Transformation: Drehatex (-120DEG) Skala (0,9, 0,9);
}
100% {
Deckkraft: 1;
Transformation: Rotatex (0deg) Skala (1, 1);
}
}
/ * Spin in */
.animate.spin {
Animationsname: Animate-Spin;
Transform-Stil: Preserve-3d;
Perspektive: 1000px;
}
@Keyframes Animate-Spin {
0% {
Deckkraft: 0;
Transformation: Rotatey (-120de) Skala (0,9, 0,9);
}
100% {
Deckkraft: 1;
Transformation: Rotatey (0deg) Skala (1, 1);
}
}
/ * Rutschen ein */
.Animate.slide {Animationsname: Animate-Slide;
@Keyframes Animate-Slide {
0% {
Deckkraft: 0;
Transformation: Translate (0, 20px);
}
100% {
Deckkraft: 1;
Transformation: Translate (0, 0);
}
}
/ * Fallen ein */
.animate.drop {
Animationsname: Animate-Drop;
Animations-Timing-Funktion: Kubikbezier (.77, .14, .91, 1,25);
}
@keyframes Animate-Drop {
0% {
Deckkraft: 0;
Transformation: Translate (0, -300px) Skala (0,9, 1,1);
}
95% {
Deckkraft: 1;
Transformation: Übersetzen (0, 0) Skala (0,9, 1,1);
}
96% {
Deckkraft: 1;
Transformation: Translate (10px, 0) Skala (1,2, 0,9);
}
97% {
Deckkraft: 1;
Transformation: Translate (-10px, 0) Skala (1,2, 0,9);
}
98% {
Deckkraft: 1;
Transformation: Translate (5px, 0) Skala (1,1, 0,9);
}
99% {
Deckkraft: 1;
Transformation: Translate (-5px, 0) Skala (1,1, 0,9);
}
100% {
Deckkraft: 1;
Transformation: Übersetzen (0, 0) Skala (1, 1);
}
}
/ * Animation Verzögerungen */
.Delay-1 {
Animation-Delay: 0,6s;
}
.Delay-2 {
Animation-Delay: 0,7s;
}
.Delay-3 {
Animation-Zelay: 0,8s;
}
.Delay-4 {
Animation-Delay: 0,9s;
}
.delay-5 {
Animation-Delay: 1s;
}
.delay-6 {
Animation-Delay: 1.1s;
}
.Delay-7 {
Animation-Zelay: 1.2s;
}
.delay-8 {
Animation-Zelay: 1.3s;
}
.Delay-9 {
Animation-Zelay: 1.4s;
}
.Delay-10 {
Animation-Zelay: 1,5s;
}
.Delay-11 {
Animation-Zelay: 1,6s;
}
.Delay-12 {
Animation-Zelay: 1.7s;
}
.Delay-13 {
Animation-Zelay: 1,8s;
}
.Delay-14 {
Animation-Zelay: 1.9s;
}
.Delay-15 {
Animation-Delay: 2s;
}
@media Screen und (bevorzugt (bevorzugt man reduzierte Motion: Reduzieren Sie) {{
.animate {
Animation: Keine! Wichtig;
}
}Das obige ist der detaillierte Inhalt vonEin praktisches kleines System für animierte Eingänge in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So aktivieren Sie den abgesicherten Word-Modus
Einführung in die Verwendung der MySQL ELT-Funktion
Was tun, wenn die Win8wifi-Verbindung nicht verfügbar ist?
So verwenden Sie die Zeilenfunktion
Was beinhalten E-Commerce-Plattformen?
So registrieren Sie eine geschäftliche E-Mail-Adresse
So richten Sie den virtuellen Speicher ein
So runden Sie in Matlab
Multifunktionsnutzung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
