8.1 Das Eigenschaft animation-iteration-count
CSS-Animationen ermöglichen dynamische visuelle Effekte, die die Benutzeroberfläche verbessern. Jetzt schauen wir uns zwei wichtige Eigenschaften an, die die Animationszyklen steuern: animation-iteration-count und animation-direction.
Die Eigenschaft animation-iteration-count legt fest, wie oft eine Animation wiederholt wird. Diese Eigenschaft ermöglicht es zu steuern, ob eine Animation einmal, mehrmals oder unendlich oft abgespielt wird.
Syntax:
element {
animation-iteration-count: number | infinite;
}
Wo:
number: Anzahl der Wiedergaben der Animation (z.B. 1, 2, 3, etc.)infinite: die Animation wird unendlich oft wiederholt
Beispiel:
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Erklärung des Codes:
@keyframes bounce: definiert eine Animation, die das Element nach oben hebt und dann in die Ausgangsposition zurückbringtanimation-iteration-count: infinite: stellt eine unendliche Wiederholung der Animation ein
8.2 Das Eigenschaft animation-direction
Die Eigenschaft animation-direction bestimmt die Abspielrichtung der Animation. Sie erlaubt es anzugeben,
ob die Animation in Vorwärtsrichtung, Rückwärtsrichtung oder abwechselnd in beiden Richtungen abgespielt wird.
Syntax:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Wo:
normal: die Animation wird in Vorwärtsrichtung abgespielt (Standard)reverse: die Animation wird in Rückwärtsrichtung abgespieltalternate: die Animation wechselt zwischen Vorwärts- und Rückwärtsrichtungalternate-reverse: die Animation beginnt in Rückwärtsrichtung und wechselt dann zwischen Rückwärts- und Vorwärtsrichtung
Beispiel
Vorwärts- und Rückwärtswiedergabe:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Erklärung des Codes:
.box1: die Animation wird in Vorwärtsrichtung abgespielt.box2: die Animation wird in Rückwärtsrichtung abgespielt
Wechselnde Richtungen:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Erklärung des Codes:
.box1: die Animation wechselt zwischen Vorwärts- und Rückwärtsrichtung.box2: die Animation beginnt in Rückwärtsrichtung und wechselt dann zwischen Rückwärts- und Vorwärtsrichtung
8.3 Beispiel für die Verwendung beider Eigenschaften
Schwingendes Element
- Dieses Beispiel zeigt ein schwingendes Element, das sich nach rechts und links bewegt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schwingendes Element</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Erklärung des Codes:
@keyframes swing: definiert eine Animation, die das Element dreht.box: Element mit der angewendetenswing-Animation, mit einer Dauer von 1 Sekunde, unendlicher Wiedergabe und Start in Rückwärtsrichtung
GO TO FULL VERSION