Verwendung von CSS3-Übergängen und -Transformationen zum Erstellen von Animationen

Mithilfe von Transformationen und Übergängen können mit CSS3 interessante Animationen erstellt werden. Transformationen werden verwendet, um ein Element von einem Zustand in einen anderen zu ändern. Beispiele wären Drehen, Verschieben, Neigen und Skalieren von Elementen. Ohne einen Übergang würde ein transformiertes Element abrupt von einem Zustand in einen anderen wechseln. Um dies zu verhindern, kann ein Übergang hinzugefügt werden, mit dem Sie die Änderung steuern können, damit sie glatter aussieht.

Verwendung von CSS3-Transformationen

Es gibt einige Arten häufig verwendeter Transformationen. Wir konzentrieren uns in diesem Tutorial auf 2D-Beispiele, aber es ist gut zu wissen, dass auch mit 3D-Transformationen coole Dinge gemacht werden können. (Sobald Sie 2D beherrschen, wird 3D viel einfacher!)

In den folgenden Beispielen sind die ursprünglichen Rechtecke in einem dunkleren Grün und die transformierten etwas transparenter.

Übersetzen

Die translate() Methode verschiebt ein Element von seiner aktuellen Position an eine neue.
Mit diesem Code wird das angepasste Rechteck von der aktuellen Position um 40 Pixel nach rechts und 100 Pixel nach unten verschoben.

 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

Drehen

Die Methode „ rotate() “ dreht ein Element im oder gegen den Uhrzeigersinn um den angegebenen Gradwert. Dieser Code dreht das Rechteck im Uhrzeigersinn um 40 Grad.

-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

Skala

Die Methode scale() vergrößert oder verkleinert ein Element (entsprechend den Parametern für Breite und Höhe). In diesem Beispiel ist das angepasste Rechteck zweimal größer als seine ursprüngliche Breite und dreimal größer als seine ursprüngliche Höhe.

 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

SkewX

Bei skewX() ist nur die x-Achse betroffen. Dieses Rechteck ist um 30 Grad entlang der x-Achse geneigt:

  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

Schräg

Dies ist die gleiche Idee, aber auf der y-Achse. Die Methode skewY() neigt ein Element entlang der y-Achse um den definierten Winkel. Dieses Rechteck ist um 30 Grad entlang der y-Achse geneigt.

-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

Schräg

Wenn Sie sowohl die x- als auch die y-Achse verzerren möchten, können Sie dies an einer Stelle tun. Die Methode skew() neigt ein Element entlang der x- und y-Achse unter Verwendung der angegebenen Winkel. Im folgenden Beispiel wird das rechteckige Element um 30 Grad entlang der x-Achse und um 20 Grad entlang der x-Achse geneigt.

-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

Matrix

Hier wird es interessant, aber in der richtigen Situation auch effizienter. Wenn Sie viele Transformationen durchführen und sie nicht alle einzeln ausschreiben möchten, können diese 2D-Transformationen mit der Methode matrix() kombiniert werden.

Hier ist eine grundlegende Gliederung, der zu folgen ist:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Nur als Hinweis, es bedarf einiger Recherche, um die Werte in der Matrix zu ermitteln. Hier ist eine hilfreiche Anleitung für den Einstieg.

Um dieses Beispiel zu machen, hier sind die Matrixwerte:

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

Verwendung von CSS3-Übergängen

Nachdem nun Transformationen behandelt wurden, ist es wichtig zu beachten, dass sie häufig mit Übergängen verwendet werden. Dies wird in den folgenden Designbeispielen sinnvoller.

Denken Sie daran, dass Werte angepasst werden können, um den Übergang zwischen zwei Zuständen eines Elements so zu gestalten, wie Sie es möchten. Betrachten Sie es als eine Möglichkeit, die Animationsgeschwindigkeit beim Ändern von CSS-Eigenschaften zu steuern. Ein Beispiel, auf das Sie wahrscheinlich gestoßen sind, ist, wenn Sie den Mauszeiger über eine Schaltfläche bewegen. Es ist üblich, eine „langsame Verdunkelung“ zu sehen, anstatt nur eine schnelle, sofortige dunklere Farbe, wenn Sie den Mauszeiger darüber bewegen. Dieses „langsame Abdunkeln“ wurde mit einem Übergang erzeugt.

Wenn Sie viele Werte angeben, ist die Kurzschrift hilfreich. Die transition -CSS-Eigenschaft ist eine Kurzformeigenschaft für transition-property , transition-duration , transition-timing-function und transition-delay .

Übergangsdetails

Die transition-property Eigenschaft an, auf die der Übergang angewendet wird, da Sie einen Übergang auf eine einzelne Eigenschaft anwenden können. Beispiele für das Anwenden eines Übergangs auf eine einzelne Eigenschaft wären ein Hintergrund oder eine Transformation. Wenn Sie auf alle Eigenschaften der Website abzielen möchten, kann die Eigenschaft transform auf all gesetzt werden.

Die transition-duration ist hilfreich, damit die Änderungen an einer Eigenschaft nicht sofort, sondern über einen bestimmten Zeitraum stattfinden. Als mögliche Werte werden Sekunden und Millisekunden angezeigt.

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

Mit der CSS-Eigenschaft „ transition-timing-function “ können Sie eine Beschleunigungskurve erstellen, sodass die Geschwindigkeit des Übergangs über seine Dauer variieren kann. Es gibt viele Möglichkeiten, mit denen Sie experimentieren können.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Die transition-delay ist ziemlich selbsterklärend. Ein bestimmter Wert legt die Anzahl der Sekunden oder Millisekunden fest, die gewartet werden soll, bevor der Übergangseffekt beginnt. Initial setzt die Eigenschaft auf ihren Standardwert. Wenn inherit angegeben ist, bedeutet dies, dass es die Eigenschaft von seinem übergeordneten Element erbt.

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

Hier ist die grundlegende Kurzschrift für einen Übergang:

div {
  transition: [property] [duration] [timing-function] [delay];
}

Die vollständige Kurzschriftsequenz:

div {
  transition: background 1s linear 0.5s;
}

Animationsplanung

Bevor Sie wirklich detaillierte Animationen erstellen, sollten Sie einen Schritt zurücktreten, bevor Sie etwas völlig Verrücktes erstellen (insbesondere, wenn es öffentlich im Internet veröffentlicht wird). Es ist nichts Falsches daran, etwas lustiges Flair hinzuzufügen, aber es ist verlockend, zu animieren. Die von Ihnen erstellte Bewegung sollte Bedeutung vermitteln und die Benutzererfahrung verbessern, nicht davon ablenken. Nachdem dies gesagt wurde, ist es an der Zeit, kreativ zu werden!

Ich möchte darauf hinweisen, dass es in diesem Tutorial animierte Gifs gibt, um die Animationen zu zeigen. Die Gifs werden wiederholt, was bei den Designs normalerweise nicht der Fall wäre. Der Zweck, sie wiederholt zu haben, dient nur zu Demonstrationszwecken.

Verschieben eines Bildes mit der CSS-Transformationseigenschaft

Bevor wir uns mit komplizierten Transformationen und Übergängen befassen, lassen Sie uns über Koordinaten auf einem Achsengitter sprechen. (Vorsicht: Dies kann Erinnerungen an Millimeterpapier aus Mathematikkursen wecken.) Koordinaten werden verwendet, um das Bild zu verschieben.

X- und y-Koordinaten

Die Dinge werden etwas anders aussehen, als Sie vielleicht erwarten. Der -y-Wert liegt über der x-Achse. HTML und CSS verwenden ein sogenanntes „umgekehrtes kartesisches Koordinatensystem“, da Webseiten oben links beginnen und von unten nach unten gelesen werden.

Animation eins: Einfache Transformation mit horizontaler Bewegung

Wir haben uns kurz mit translate() beschäftigt und wie es ein Element verschieben kann. Wenn es in die Praxis umgesetzt wird, kann es Ihr Boot buchstäblich zum Schwimmen bringen. Wie wir oben gelernt haben, verschiebt die translate()-Methode ein Element von seiner aktuellen Position (entsprechend den Parametern, die für die x-Achse und die y-Achse angegeben wurden).

Das erste Projekt wird eine U-Boot-Grafik verschieben. U-Boote müssen hin und wieder Luft holen, also gestalten wir es sorgfältig mit translate() .

Um es mit transform: translate(x,y) von seiner ursprünglichen Position zu verschieben, müssen zwei neue Werte angegeben werden. Damit sich das U-Boot nach rechts und oben bewegt, sollte der x-Wert positiv und der y-Wert negativ sein. Wenn der y-Wert auf 0 gesetzt ist, würde er sich nur nach rechts und nicht nach oben bewegen.

U-Boot zum Luftholen mit transform()

In diesem Beispiel verschieben wir das Objekt um 200 Pixel nach rechts und 25 Pixel nach oben. Die Syntax lautet transform: translate(200px,-25px); und das Objekt bewegt sich beim Schweben von .underwater . Indem Sie die Stile für die Bewegung in .underwater:hover .move-right , wird die Aktion beim Hover ausgeführt.

Hier ist der Start-HTML:

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>

Sehen Sie dies auf Codepen.

Es braucht wirklich nicht viel CSS, um diese grundlegende Animation zu erstellen:

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

Wie Sie sehen können, würden unsere Koordinaten in das obere rechte Quadrat fallen. Beim Schweben bewegt sich das U-Boot aufgrund der Transformation zu den neuen Koordinaten.

Die Dinge sehen aufgrund des Übergangs glatt aus. Die transition-duration wurde auf 2sec , was für diese Animation nicht zu schnell ist. Die transition-timing-function wurde auf ease-in-out eingestellt, was zu einem langsameren Start und Ende führt. Wenn die Zeitdauer auf etwas Größeres erhöht würde, wäre dies sehr offensichtlich.

Grundlegende Animation 2: Horizontale Bewegung mit Keyframes und Animation

Transform wird in diesem Beispiel etwas anders verwendet. Keyframes und die Animationseigenschaft werden verwendet, um die nächste Animation zu erstellen.

Keyframe-Grundlagen

Innerhalb @keyframes definieren Sie die Stile und Phasen für die Animation. Hier ist das Beispiel, das wir verwenden werden, um den Effekt „Einblenden während der Bewegung nach unten“ zu erzielen:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

Die Transformationswerte werden in die Keyframes integriert. Die ursprüngliche Platzierung ist auf 0 % festgelegt, und bei 100 % wird die Position um 30 Pixel nach unten verschoben.

Animationsgrundlagen

Um CSS3-Animation zu verwenden, geben Sie Keyframes für die Animation an.

So verwenden Sie CSS-Funktionsabfragen

Die Welt des Webdesigns verändert sich ständig und es ist spannend, mit neuen Designtrends in CSS Schritt zu halten. Wenn Sie ein früher CSS-Anwender sind, freuen Sie sich vielleicht schon darauf, Dinge wie CSS Grid zu verwenden ...

Wie oben entworfen, @keyframes , welche Stile das Element zu bestimmten Zeiten haben wird.

Achten Sie dabei immer darauf, der Animation einen aussagekräftigen Namen zu geben. In diesem Fall verwenden wir fadeOut . Jede Klasse, die fadeOut enthält, wird angewendet. In den Phasen der Animation wird „von“ auf 0 % und „bis“ auf 100 % gesetzt. Dieses Beispiel ist mit nur zwei Stufen ziemlich einfach, aber es können sicherlich weitere Schritte dazwischen hinzugefügt werden.

Bestimmte Aktionen mit Animationsuntereigenschaften

Die Animationseigenschaft wird verwendet, um @keyframes innerhalb eines CSS-Selektors aufzurufen. Animationen können und werden oft mehr als eine Untereigenschaft haben.

Keyframes definieren, wie die Animation aussehen wird; Untereigenschaften definieren spezifische Regeln für die Animation. Timing, Dauer und andere wichtige Details zum Ablauf der Animationssequenz sind alle in den Untereigenschaften enthalten.

Hier sind einige Beispiele für Untereigenschaften von Animationen:

• Animationsname: Name der @keyframesat-rule , die die Keyframes der Animation beschreibt. Der Name fadeOut im vorherigen Beispiel ist ein Beispiel für animation-name .
• Animationsdauer: Zeitdauer, die eine Animation benötigen sollte, um einen vollständigen Zyklus abzuschließen.
• Animation-Timing-Funktion: Timing der Animation, insbesondere wie die Animation durch Keyframes übergeht. Diese Funktion hat die Fähigkeit, Beschleunigungskurven zu erstellen. Beispiele sind linear , ease , ease-in , ease-out , ease-in-out cubic-bezier .
• Animationsverzögerung: Verzögerung zwischen dem Laden des Elements und dem Beginn der Animation.
• Animation-Iteration-Count: Anzahl der Wiederholungen der Animation. Möchten Sie, dass die Animation für immer weitergeht? Sie können infinite angeben, um die Animation endlos zu wiederholen.
• Animationsrichtung: Dies bestimmt, ob die Animation bei jedem Durchlaufen der Sequenz die Richtung wechseln oder zum Startpunkt zurückkehren und sich wiederholen soll.
• Animation-fill-mode: Werte, die von der Animation sowohl vor als auch nach ihrer Ausführung angewendet werden.
• Animation-Play-State: Mit dieser Option können Sie die Animationssequenz anhalten und fortsetzen. Beispiele sind none , forwards , backwards oder both .

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

So würde es in Kurzschrift geschrieben aussehen:

animation: 4s ease-in-out 1 paused fadeInDown;

Hier ist die HTML-Struktur:

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

Die Klasse von fadeInDown lässt das U-Boot und den Inhalt auf und ab bewegen.

Machen Sie die Animation flüssiger, indem Sie Keyframes anpassen

Mit ein paar Keyframes mehr können wir die Animation viel flüssiger machen.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}

Sehen Sie dies auf Codepen.

Anpassen des Timings der Animation

Das Hinzufügen von mehr Keyframes hat dazu beigetragen, die Animation zu glätten, aber wir können mit mehr Keyframes und einer Textverzögerung für das div, das den gesamten Text enthält, etwas mehr Interaktivität hinzufügen. Es macht Spaß, das U-Boot vom Text abprallen zu lassen, sodass die Verzögerung mit der Bewegung des U-Boots übereinstimmt.

Auf den HTML-Code werden die effektiven Klassen angewendet:

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

Und hier ist das aktualisierte CSS, das die interaktive Animation ermöglicht:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Sehen Sie dies auf Codepen.

Kubischer Bezier-Fortschrittsbalken in CSS3-Animation

Es ist an der Zeit, unseren Animationsfortschritt mit einem Fortschrittsbalken zu feiern!

Alle Konzepte, die wir behandelt haben, werden zusammenkommen, um so etwas zu schaffen. Ein Fortschrittsbalken ist ein sehr häufiges UI-Element. Wenn Sie also etwas Funktionales wie dieses erstellen, können Sie sehen, wie andere Webelemente animiert werden können.

Hier ist der Start-HTML:

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

Und das CSS, um es zum Leben zu erwecken:

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}

Im ersten Satz von Keyframes geht die Breite von 0 auf 100 % mit einer Dauer von zwei Sekunden. Die Keyframes in progressMotion steuern die Deckkraft.

CSS-Bezier-Kurve

Die Funktion cubic-bezier() kann mit der Eigenschaft transit transition-timing-function verwendet werden, um zu steuern, wie sich die Geschwindigkeit eines Übergangs über seine Dauer ändert. Sie sehen dies in der Animation. Sehen Sie, wie es ein wenig langsamer anfängt und dann das Tempo aufnimmt?

Es ist hilfreich, sich einen Bezier-Wrapper als Quadrat vorzustellen. Unten links und oben rechts sind Orte, an denen sich Schlüsselpunkte befinden, nämlich P0 und P3. Diese sind immer auf (0,0) und (1,1) gesetzt, die sich nicht ändern. P1 und P2 können jedoch mit der Funktion cubic-bezier() werden, wenn Sie neue Punkte mit einem x- oder y-Wert angeben.

• x1 ist die x-Koordinate des Kontrollpunkts p1
• y1 ist die y-Koordinate des Kontrollpunkts p1
• x2 ist die x-Koordinate des Kontrollpunkts p2
• y2 ist die y-Koordinate des Kontrollpunkts p2

Hier einige Beispielwerte:

x1 = 0,7
y1 = 0,16
x2 = 0,2
y2 = 0,9

Ein Beispiel könnte also so aussehen:

cubic-bezier(.7,.16,.2,.9)

Der Fortschrittsbalken ist ein großartiges Beispiel dafür, wie ein Bezier das Timing einer Animation anpassen kann. Mit Transformationen, Übergängen und vielen anderen Optionen können ganz einfach benutzerdefinierte Animationen erstellt werden. Hoffentlich haben Ihnen diese grundlegenden CSS3-Animationsbeispiele dabei geholfen, zu sehen, welche anderen Möglichkeiten es gibt.

Was kommt als nächstes: WordPress-Plugins, die Sie lieben werden

Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten! Wir haben festgestellt, dass all diese Plugins einfach zu bedienen, nicht zu leistungsintensiv auf Ihrer Website und einfach absolut zuverlässig sind.