6.1 @keyframes Regel
CSS-Animationen ermöglichen es, komplexe und flüssige visuelle Effekte mit minimalem Aufwand zu erzeugen. Das Hauptwerkzeug zur Erstellung von Animationen in CSS ist die @keyframes Regel, die die Schlüsselbilder der Animation und die Änderungen der Stile, die in jedem Bild auftreten sollen, definiert.
Die @keyframes Regel wird verwendet, um Animationen zu erstellen, indem die Änderungen der CSS-Eigenschaften in verschiedenen Phasen der Animation definiert werden. Schlüsselbilder bestimmen, welche Stile zu bestimmten Zeiten während der Animation angewendet werden.
Syntax 1:
@keyframes animation-name {
from {
/* Anfangsstile */
}
to {
/* Endstile */
}
}
Syntax 2:
@keyframes animation-name {
0% {
/* Anfangsstile */
}
100% {
/* Endstile */
}
}
Wo:
fromentspricht0%der Animationszeittoentspricht100%der Animationszeit
Beispiel: Weiche Hintergrundfarbe Änderung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Erklärung:
- Die Regel
@keyframes changeColordefiniert eine Animation, die die Hintergrundfarbe eines Elements vonlightbluezulightcoraländert - Die
animationEigenschaft auf dem Element.animated-boxgibt an, dass die AnimationchangeColor3 Sekunden dauern und unendlich wiederholt werden soll
6.2 Mehrere Schlüsselbilder
Du kannst mehr als zwei Schlüsselbilder verwenden, um komplexere Animationen zu erstellen, indem die Stile für Zwischenzustände definiert werden.
Beispiel: Bewegung diagonal mit Farbänderung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Erklärung:
Die @keyframes moveAndChangeColor Regel definiert eine Animation, die die Hintergrundfarbe und die Position eines Elements in drei Schritten verändert.
- Bei 0% der Animationszeit hat das Element eine hellblaue Farbe und befindet sich an der Startposition
- Bei 50% der Animationszeit hat das Element eine hellgrüne Farbe und bewegt sich um 100 Pixel nach rechts und unten
- Bei 100% der Animationszeit hat das Element eine hellkorallfarbene Farbe und bewegt sich um 200 Pixel nach rechts
6.3 Beispiele einfacher Animationen
Beispiel 1: Pulsieren
Erstellung eines Pulsationseffekts, bei dem ein Element sanft vergrößert und verkleinert wird.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Erklärung:
- Die Regel
@keyframes pulsedefiniert eine Animation, die ein Element auf 120% vergrößert und auf die ursprüngliche Größe zurücksetzt - Die
animationEigenschaft auf dem Element.pulse-boxgibt an, dass die Animationpulse2 Sekunden dauern und unendlich wiederholt werden soll
Beispiel 2: Rotation
Erstellung eines Effekts der kontinuierlichen Rotation eines Elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Erklärung:
- Die Regel
@keyframes rotatedefiniert eine Animation, die ein Element von 0 bis 360 Grad dreht - Die
animationEigenschaft auf dem Element.rotate-boxgibt an, dass die Animationrotate3 Sekunden dauern, unendlich wiederholt werden und mit konstanter Geschwindigkeit (linear) ablaufen soll
GO TO FULL VERSION