Drei Möglichkeiten zur Implementierung von Animationen in CSS3

Hiermit werden die Grundkenntnisse des Interviewten in CSS getestet.

Es gibt drei Hauptmöglichkeiten, Animationen in CSS zu implementieren

Der erste ist: Übergang zur Erzielung einer Verlaufsanimation

Die zweite ist: Transformieren Sie die Übergangsanimation

Drittens: Animation zur Implementierung benutzerdefinierter Animationen

Nachfolgend finden Sie eine detaillierte Beschreibung der Implementierungsmethoden der drei Animationstypen.

Übergangsverlaufsanimation

Schauen wir uns zunächst die Eigenschaften des Übergangs an:

• Eigenschaft: Füllen Sie die CSS-Eigenschaften aus, die geändert werden müssen, wie etwa Breite, Zeilenhöhe, Schriftgröße, Farbe usw., alle Eigenschaften, die sich auf DOM-Stile auswirken;
• Dauer: Die Zeiteinheit, die zum Abschließen des Übergangseffekts erforderlich ist (s oder ms)
• Timing-Funktion: die Geschwindigkeitskurve des Effekts (linear, mühelos, mühelos ein, mühelos aus usw.)
  

Der spezifische Wert der Timing-Funktion ist in der folgenden Tabelle aufgeführt:

• Verzögerung: Verzögerung der Auslösezeit des Animationseffekts (Einheit: ms oder s)

Schauen wir uns ein vollständiges Beispiel an:

<div Klasse="Basis"></div>

.Basis {
            Breite: 100px;
            Höhe: 100px;
            Anzeige: Inline-Block;
            Hintergrundfarbe: #0EA9FF;
            Rahmenbreite: 5px;
            Rahmenstil: durchgezogen;
            Rahmenfarbe: #5daf34;
            Übergangseigenschaft: Breite, Höhe, Hintergrundfarbe, Rahmenbreite;
            Übergangsdauer: 2s;
            Übergangs-Timing-Funktion: Ease-In;
            Übergangsverzögerung: 500 ms;
        /*Abkürzung*/
        /*Übergang: alle 2 s, 500 ms einlaufen lassen;*/
            &:schweben {
                Breite: 200px;
                Höhe: 200px;
                Hintergrundfarbe: #5daf34;
                Rahmenbreite: 10px;
                Rahmenfarbe: #3a8ee6;
            }
        }

Wirkung der Operation:

Sie können sehen, dass die Animation mit einer Verzögerung von 0,5 Sekunden startet, wenn die Maus nach oben bewegt wird. Da in der Übergangseigenschaft keine Rahmenfarbe festgelegt ist, gibt es keine Verlaufsanimation.

Animation transformieren

Die Transform-Eigenschaft wendet eine 2D- oder 3D-Transformation an. Mit diesem Attribut können wir Elemente drehen, skalieren, neigen und verschieben. Es wird normalerweise in Verbindung mit dem Übergangsattribut verwendet.

1. keine: definiert keine Konvertierung, wird im Allgemeinen verwendet, um die Konvertierung zu registrieren.
2. Transformfunktionen: Definiert den Funktionstyp, der transformiert werden soll. Die wichtigsten sind:

2.1 Drehen: hauptsächlich unterteilt in 2D-Drehung und 3D-Drehung. drehen(Winkel), 2D-Rotation, der Parameter ist der Winkel, z. B. 45 Grad; drehen(x,y,z,Winkel), 3D-Rotation, 3D-Rotation um die Linie von der ursprünglichen Position zu (x,y,z); drehenX(Winkel), 3D-Rotation entlang der X-Achse; drehenY(Winkel); drehenZ(Winkel);

2.2 Maßstab: Wird im Allgemeinen verwendet, um die Größe eines Elements festzulegen. Die Haupttypen sind dieselben wie oben, einschließlich scale(x, y), scale3d(x, y, z), scaleX(x), scaleY(y) und scaleZ(z), wobei x, y und z die Schrumpfungsverhältnisse sind.

2.3 Schrägstellen: Wird hauptsächlich verwendet, um den Stil eines Elements zu neigen. skew(x-Winkel, y-Winkel), 2D-Schieftransformation entlang der x- und y-Achse; skewX(Winkel), 2D-Schieftransformation entlang der x-Achse; skew(Winkel), 2D-Schieftransformation entlang der y-Achse.

2.4 Übersetzen: Wird hauptsächlich zum Verschieben von Elementen verwendet. translate(x, y) definiert die Pixelpunkte, die entlang der x- und y-Achse verschoben werden; translate(x, y, z) definiert die Pixelpunkte, die entlang der x-, y- und z-Achse verschoben werden; translateX(x); translateY(y); translateZ(z).

<h5>Transition wird zusammen mit Transform verwendet</h5>
<div Klasse="Basis Basis2"></div>

.base2{
          transformieren: keine;
          Übergangseigenschaft: transformieren;
          &:schweben {
              Transformieren: Skalieren (0,8, 1,5), Drehen (35 Grad), Schrägstellen (5 Grad), Verschieben (15 Pixel, 25 Pixel);
          }
      }

Wirkung der Operation:

Sie können sehen, dass die Box gedreht, gekippt, verschoben und vergrößert wird.

Animation, benutzerdefinierte Animation

Um flexiblere Animationseffekte zu erzielen, bietet CSS3 auch benutzerdefinierte Animationsfunktionen.

(1) Name: Der Keyframe-Name, der an den Selektor gebunden werden muss.

(2) Dauer: Die zum Abschließen der Animation benötigte Zeit in Sekunden oder Millisekunden.

(3) Timing-Funktion: wie bei Transition-Linear.

(4) delay: Legt die Verzögerung fest, bevor die Animation startet.

(5) Iterationsanzahl: Legt fest, wie oft die Animation ausgeführt wird. Unendlich bedeutet eine Endlosschleife.

(6) Richtung: Gibt an, ob die Animation rückwärts abgefragt werden soll. normal, der Standardwert, die Animation sollte normal abgespielt werden; alternativ, die Animation sollte in umgekehrter Reihenfolge abgespielt werden.

<h5 class="title">Benutzerdefinierte Animation animieren</h5>
<div Klasse="Basis Basis3"></div>

.base3 {
          Randradius: 50 %;
          transformieren: keine;
          Position: relativ;
          Breite: 100px;
          Höhe: 100px;
          Hintergrund: linearer Farbverlauf(
                  35 Grad,
                  #ccffff,
                  #ffcccc
          );
          &:schweben {
              Animationsname: Bounce;
              Animationsdauer: 3s;
              Anzahl der Animationsiterationen: unendlich;
          }
      }
      @Keyframes springen {
          0% {
              oben: 0px;
          }
          50 % {
              oben: 249px;
              Breite: 130px;
              Höhe: 70px;
          }
          100 % {
              oben: 0px;
          }
      }

Wirkung der Operation:

Wie Sie sehen, können mit benutzerdefinierten Animationen flexiblere Animationseffekte erzielt werden, die alle Funktionen der ersten und zweiten Animation umfassen und deren Eigenschaften umfassender sind.

Online-Produktion

Den obigen Code können Sie online erfahren: Adresse

Quellcodeadresse

Oben sind die Details der drei Möglichkeiten zur Implementierung von Animationen mit CSS3 aufgeführt. Weitere Informationen zur Implementierung von Animationen mit CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!