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

Werfen wir zunächst einen Blick auf die Eigenschaften von übergang:

• 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:

Wert Beschreibung ... ,1))ease-inlangsam schneller werden (entspricht Kubikbezier (0,42,0,1,1))ease-outLangsam langsamer werden (entspricht Kubikbezier (0,0,0,58,1))ease-in-outZuerst schneller und dann langsamer (entspricht Kubikbezier (0,42,0,0,58,1)), Einblendeffektcubic-bezier(n,,,n)

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>

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

Laufeffekt:

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

Benutzerdefinierte Animation der Animation

Um flexiblere Animationseffekte zu erzielen, bietet CSS3 auch die Funktion der benutzerdefinierten Animation.

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

(2) Dauer: die Zeit, die zum Abschließen der Animation benötigt wird, Sekunden oder Millisekunden.

(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;
          }
      }

Laufender Effekt:

Sie können sehen, dass benutzerdefinierte Animationen flexiblere Animationseffekte erzielen können, einschließlich aller Funktionen der ersten und zweiten Animationen, und die Attribute sind auch umfassender.

(Lernvideo-Sharing:

CSS-Video-Tutorial

)

n	n
Definieren Sie Ihre eigenen Werte in der Kubik-Bezier-Funktion. Mögliche Werte sind Werte zwischen 0 und 1Verzögerung: Auslösezeit der Verzögerung des Animationseffekts (Einheit ms oder s)

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!