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.
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">Jeder dieser Animationsstatus beginnt und endet an einem bestimmten Punkt. Diese werden auf der Zeitachse mit Keyframes abgebildet.
<ph type="x-smartling-placeholder">@keyframes
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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;
}
}
Die animation
-Attribute
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.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
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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;
}
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">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
.
animation-iteration-count
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.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.
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.
animation-direction
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.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 zualternate
: Bei jeder Animationsiteration wechselt die Zeitachse abwechselnd vorwärts und rückwärts laufen.alternate-reverse
: Wiealternate
, aber die Animation beginnt mit die Zeitleiste rückwärts.
animation-delay
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.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.
animation-play-state
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.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.
animation-fill-mode
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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.
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:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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.
Wissen testen
Testen Sie Ihr Wissen über Animationen
Wird beim Namen oder der benutzerdefinierten Kennung einer @keyframes
-Animation zwischen Groß- und Kleinschreibung unterschieden?
Die Keywords from
und to
sind identisch mit:
0%
und 100%
.0
und 1
start
und end
.Die animation-timing-function
ist auch allgemein bekannt als:
Wie viele Keyframes sind in einer @keyframes
-Animation mindestens erforderlich?