Animationen

Animationen sind eine großartige Möglichkeit, interaktive Elemente hervorzuheben und das Interesse zu wecken. und Spaß an Ihren Designs haben. In diesem Modul erfahren Sie, wie Sie mit CSS-Animationseffekten.

Manchmal gibt es kleine Helfer auf Benutzeroberflächen, die nützliche Informationen zum Bereich, in dem sie sich befinden, wenn Sie darauf klicken. Diese haben oft eine pulsierenden Animationen, um den Nutzer zu signalisieren, mit denen interagiert werden sollte. In diesem Modul erfahren Sie, wie Sie diese und andere Animationen Preisvergleichsportal.

Pulsierende Symbole sorgen dafür, dass die Nutzer auf wichtige Informationen achten.

Sie können CSS verwenden, um eine Animationssequenz mit Keyframes festzulegen. Diese Sequenzen Dabei kann es sich um einfache Animationen mit einem Status oder komplexe, zeitbasierte Sequenzen handeln.

Was ist ein Keyframe?

In den meisten Animationstools verwenden Sie Keyframes zum Zuweisen von Animationen zu Zeitstempeln auf einer Zeitachse.

Hier ist zum Beispiel eine Zeitachse für das pulsierende „Hilfsprogramm“, Punkt. Die Animation wird ausgeführt 1 Sekunde lang und hat 2 Zustände.

<ph type="x-smartling-placeholder">
</ph> Der Status der Pulser-Animation über einen Zeitraum von 1 Sekunde
Der Status der pulsierenden Animation.

Jeder dieser Animationsstatus beginnt und endet an einem bestimmten Punkt. Diese werden auf der Zeitachse mit Keyframes abgebildet.

<ph type="x-smartling-placeholder">
</ph> Dasselbe Diagramm wie zuvor, nur dieses Mal mit Keyframes
Die pulsierende Animation mit Keyframes.

@keyframes

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

Preisvergleichsportal @keyframes basieren auf demselben Konzept wie Animations-Keyframes.

Hier ist ein Beispiel mit zwei Status:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

Der erste wichtige Teil benutzerdefinierte Kennung (custom-ident), der Keyframe-Regel ein. Die Kennung in diesem Beispiel ist my-animation. Die benutzerdefinierte Kennung funktioniert wie ein Funktionsname, So können Sie an anderer Stelle im CSS-Code auf die Keyframe-Regel verweisen.

In der Keyframe-Regel sind from und to Keywords, die 0% und 100%: Beginn und Ende der Animation. Sie können die Regel wie folgt neu erstellen:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Sie können innerhalb des Zeitrahmens beliebig viele Positionen hinzufügen. Im Beispiel des pulsierenden Hilfsprogramms gibt es zwei Zustände, die sich auf zwei Keyframes hinzufügen. Sie haben also zwei Positionen innerhalb der Keyframe-Regel, die Änderungen für jeden dieser Keyframes darstellen.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}
Versuchen Sie, die pulse-Regel zu bearbeiten, um zu sehen, wie die Animation Änderungen vornehmen.

Die animation-Attribute

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

Zur Verwendung von @keyframes in einer CSS-Regel können Sie verschiedene Animationen definieren einzeln oder die animation verwenden Kurzschreibweise.

animation-duration

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

.my-element {
    animation-duration: 10s;
}

animation-duration definiert, wie lang die Zeitachse @keyframes als Zeitwert sein soll. Die Standardeinstellung ist 0 Sekunden, was bedeutet, dass die Animation immer noch ausgeführt wird, die Sie sehen können. Negative Zeitwerte sind nicht zulässig.

animation-timing-function

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

Um natürliche Bewegungen in Animationen nachzubilden, können Sie Timing-Funktionen verwenden, die Geschwindigkeit einer Animation an jedem Punkt berechnen. Berechnete Werte werden oft gekrümmt, sodass die Animation mit variabler Geschwindigkeit animation-duration und sorgt dafür, dass das Element scheinbar abspringt, wenn der Browser berechnet einen Wert, der über den in @keyframes definierten Werten hinausgeht.

In CSS sind mehrere Keywords als Voreinstellungen verfügbar, die als Wert für animation-timing-function: linear, ease, ease-in, ease-out und ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}
Versuche, die Timing-Funktion der Animation zu ändern. verwendet.

Die Werte der Easing-Funktion scheinen kurvenreich zu sein, da das Easing anhand eines Bézierkurve, ein Funktionstyp, der zur Modellierung der Geschwindigkeit verwendet wird. Jedes der Timings Funktions-Keywords wie ease verweisen auf eine vordefinierte Bézier-Kurve. In CSS können Sie eine Bézierkurve direkt mit der Funktion cubic-bezier() definieren. für die vier Zahlenwerte zulässig sind: x1, y1, x2 und y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Diese Werte stellen jeden Teil der Kurve entlang der X- und Y-Achse dar.

<ph type="x-smartling-placeholder">
</ph> Eine Bézier-Kurve in einem Fortschritt-zu-Zeit-Diagramm
Beispiel für eine Bézier-Kurve

Das Verständnis von Bézier-Kurven ist kompliziert. Visuelle Tools wie diese Generator von Lea Verou, sind sehr hilfreich.

Die Easing-Funktion steps

Vielleicht möchten Sie Ihre Animation genauer steuern, indem Sie in Intervallen statt entlang einer Kurve. Mit der Easing-Funktion steps() Du teilst die Zeitachse in definierte Intervalle mit gleicher Dauer auf.

.my-element {
    animation-timing-function: steps(10, end);
}

Das erste Argument sind die Zahlenschritte. Wenn es die gleiche Anzahl von als Schritte, werden die einzelnen Keyframes nacheinander für die exakte Dauer ohne Übergang zwischen Zuständen. Enthält der Browser weniger Keyframes als Schritte, fügt der Browser Schritte zwischen Keyframes abhängig vom zweiten Argument festlegen.

Das zweite Argument ist die Richtung. Ist der Wert auf end gesetzt, entspricht dies der werden die Schritte am Ende der Zeitachse abgeschlossen. Wenn es auf start gesetzt ist, wird der erste Schritt der Animation beendet, endet einen Schritt vor end.

Vergleichen Sie die Animationen mit und ohne Schritte.

animation-iteration-count

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count definiert, wie oft die Zeitachse @keyframes im folgenden Zeitraum ausgeführt werden soll: Animation. Der Standardwert ist 1, was bedeutet, dass die Animation gestoppt wird, wenn sie das Ende Ihrer Zeitachse erreicht. Dieser Wert darf keine negative Zahl sein.

Versuche, die Wiederholungszahl für diese Animation zu ändern.

Wenn Sie die Animationsschleife erstellen möchten, legen Sie die Anzahl der Wiederholungen auf infinite fest. So die pulsierende Animation zu Beginn dieser Lektion funktioniert.

Die pulsierende Animation setzt sich unendlich fort.

animation-direction

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

.my-element {
    animation-direction: reverse;
}

Mit der Funktion animation-direction, Dieser hat die folgenden Werte:

  • normal: der Standardwert, also „Forward“.
  • reverse: Lässt rückwärts über die Zeitachse zu
  • alternate: Bei jeder Animationsiteration wechselt die Zeitachse abwechselnd vorwärts und rückwärts laufen.
  • alternate-reverse: Wie alternate, aber die Animation beginnt mit die Zeitleiste rückwärts.
Versuche, die Animationsrichtung zu ändern.

animation-delay

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

.my-element {
    animation-delay: 5s;
}

Das Objekt animation-delay definiert, wie lange der Browser wartet, bevor die Animation gestartet wird. Wie bei der Eigenschaft animation-duration ist auch hier ein Zeitwert erforderlich.

Im Gegensatz zu animation-duration können Sie animation-delay als ausschließend definieren , wodurch die Animation an der entsprechenden Stelle im Zeitleiste. Wenn Ihre Animation beispielsweise 10 Sekunden lang ist und Sie animation-delay bis -5s, die Animation beginnt nach der Hälfte der Zeitleiste.

Versuche, die Animationsverzögerung zu ändern.

animation-play-state

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

.my-element:hover {
    animation-play-state: paused;
}

Den Parameter animation-play-state können Sie die Animation abspielen und pausieren. Der Standardwert ist running. Wenn Sie paused festlegen, wird die Animation pausiert.

Bewegen Sie den Mauszeiger über das animierte Element, die Animation anhalten.

animation-fill-mode

Unterstützte Browser

  • Chrome: 43. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

animation-fill-mode definiert, welche Werte in der @keyframes-Zeitachse vor dem oder nach dem Ende der Animation. Der Standardwert ist none. Das bedeutet, dass Wenn die Animation abgeschlossen ist, werden die Werte auf der Zeitachse verworfen. Weitere Optionen:

  • forwards: Der letzte Keyframe bleibt abhängig von der Animationsrichtung.
  • backwards: Der erste Keyframe bleibt basierend auf der Animationsrichtung bestehen.
  • both: Der erste und der letzte Keyframe bleiben bestehen.
Versuche, den Füllmodus zu ändern.

Die Abkürzung animation

Anstatt jede Eigenschaft separat zu definieren, können Sie sie in einem animation-Kürzel zum Definieren der Animationseigenschaften in der folgende Reihenfolge:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Überlegungen bei der Arbeit mit Animationen

Nutzer können ihr Betriebssystem so einstellen, dass verkleinerte Bewegungen vorzugsweise verwendet werden. wenn Sie mit Anwendungen und Websites interagieren. Sie können diese Einstellung erkennen mit der Methode bevorzugt-verringerte-Bewegung Medienabfrage:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Dies ist nicht unbedingt die Präferenz für keine Animation. Es ist eine bessere Vorliebe insbesondere weniger unerwartete Animationen. Weitere Informationen und die Gesamtleistung in unserem Anleitung für Animationen.

Versuche es mit einem Beispiel für verkleinerte Animationen.

Wissen testen

Testen Sie Ihr Wissen über Animationen

Wird beim Namen oder der benutzerdefinierten Kennung einer @keyframes-Animation zwischen Groß- und Kleinschreibung unterschieden?

Ja
🎉
Nein
Zwei Animationen dürfen nicht denselben Namen haben, in CSS ist jedoch die gleichzeitige Verwendung von SWOOP und swoop zulässig.

Die Keywords from und to sind identisch mit:

start und end.
Versuch es noch einmal.
0% und 100%.
from entspricht 0% und to ist 100%.
0 und 1
Versuch es noch einmal.

Die animation-timing-function ist auch allgemein bekannt als:

Dynamisches Timing
Versuch es noch einmal.
Verzögerung
Versuch es noch einmal.
Erleichterung
🎉

Wie viele Keyframes sind in einer @keyframes-Animation mindestens erforderlich?

1
Der Browser verwendet den aktuellen Status des Elements als Keyframe, sodass mindestens ein Keyframe erforderlich ist.
2
Versuch es noch einmal.
3
Versuch es noch einmal.
4
Versuch es noch einmal.