Welche Arten von CSS3-Animationen gibt es?

Es gibt drei Arten von CSS3-Animationen: 1. Verlaufsanimation, implementiert mit dem Übergangsattribut; 2. Transformationsanimation, implementiert mit dem Transformationsattribut; 3. Benutzerdefinierte Animation, implementiert mit dem Animationsattribut und „@keyframes“-Regeln.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css Es gibt drei Hauptmethoden zum Implementieren von Animationen. Die erste ist: transition zum Implementieren einer Verlaufsanimation und die zweite ist: transform Transformationsanimation, der dritte Typ ist: animation zum Implementieren einer benutzerdefinierten Animation. Lassen Sie uns ausführlich über die Implementierung der drei Animationen sprechen. css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式。

transition渐变动画

我们先看一下transition

Übergangsverlaufsanimation

• Eigenschaft: Geben Sie die CSS-Eigenschaften ein, die geändert werden müssen, z. B. Breite , Zeilenhöhe, Schriftgröße, Farbe usw., alles Attribute, die mit dem Dom-Stil funktionieren;
• Dauer: die Zeiteinheit (s oder ms), die erforderlich ist, um den Übergangseffekt abzuschließen.
• Timing-Funktion: die Geschwindigkeitskurve bis Vervollständigen Sie den Effekt (linear, Ease, Ease-in, Ease-out usw.)

Timing-Funktionsspezifische Werte können in der folgenden Tabelle eingesehen werden:

Sehen wir uns unten ein vollständiges Beispiel an:

<div class="base"></div>

.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
	    /*简写*/
	    /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

Laufeffekt:

Sie können sehen, dass die Animation mit einer Verzögerung von 0,5 Sekunden beginnt, wenn sich die Maus nach oben bewegt, und zwar aufgrund des border-color没有设置到transition-property im Inneren ist keine Verlaufsanimation.

Transformationsanimation

Die Transformationseigenschaft gilt für 2D- oder 3D-Transformationen. Mit diesem Attribut können wir vier Operationen an Elementen ausführen: Drehen, Skalieren, Neigen und Verschieben. Es wird im Allgemeinen in Verbindung mit dem Übergangsattribut verwendet.

• none: Die Definition führt keine Konvertierung durch und wird im Allgemeinen zum Registrieren der Konvertierung verwendet.

• transform-functions: Definieren Sie die Typfunktionen, die konvertiert werden sollen. Die wichtigsten sind:

  1. Drehen: hauptsächlich unterteilt in 2D-Rotation und 3D-Rotation. Drehen (Winkel), 2D-Drehung, der Parameter ist ein Winkel, z. B. 45 Grad; Drehen (x, y, z, Winkel), 3D-Drehung, 3D-Drehung um die gerade Linie vom ursprünglichen Ort zu (x, y, z); rotateX(angle) , Führe eine 3D-Rotation entlang des aus Die Haupttypen sind die gleichen wie oben, einschließlich Scale(x, y), Scale3d(x, y, Z), ScaleX(x), ScaleY(y) und ScaleZ(z), wobei x, y und z sind die Schrumpfverhältnisse.

  3. Skew: Wird hauptsächlich verwendet, um den Stil von Elementen zu verzerren. Skew(x-Winkel, y-Winkel), 2D-Skew-Transformation entlang der x- und y-Achse; skewX(angle), 2D-Skew-Transformation entlang der x-Achse, 2D-Skew-Transformation entlang der y-Achse.

  4. Verschieben (übersetzen): Wird hauptsächlich zum Verschieben von Elementen verwendet. Translate(x, y), definiert die Pixel, die sich auf die x- und y-Achsen bewegen; translator(x, y, z), definiert die Pixel, die sich auf die x-, y-, z-Achsen bewegen; TranslateZ(z).

  <h5>transition配合transform一起使用</h5>
  <div class="base base2"></div>

  Nach dem Login kopieren

  .base2{
            transform:none;
            transition-property: transform;
            &:hover {
                transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
            }
        }

  Nach dem Login kopieren
Laufeffekt:

Benutzerdefinierte Animation der Animation

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

(3) Timing-Funktion: Identisch mit Übergangslinear.
(4) Verzögerung: Legen Sie die Verzögerung fest, bevor die Animation beginnt.
(5) iteration-count: Legen Sie die Anzahl der Animationsausführungen fest. Unendlich ist eine Endlosschleife.
(6) Richtung: Ob abgefragt werden soll, um die Animation rückwärts abzuspielen. normal, der Standardwert, die Animation sollte normal abgespielt werden; die Animation sollte abwechselnd in umgekehrter Reihenfolge abgespielt werden.

<h5 class="title">animate自定义动画</h5>
<div class="base base3"></div>

.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35deg,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

(Lernvideo-Sharing:

)

Das obige ist der detaillierte Inhalt vonWelche Arten von CSS3-Animationen gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!