CSS @keyframes-Regel
Die @keyframes-At-Rule ist die Grundlage für Keyframe-Animationen, die verwendet werden, um viele CSS-Eigenschaften zu animieren (schrittweise von einem Stil in einen anderen zu wechseln). Diese Regel ermöglicht es, festzulegen, was zu bestimmten Zeitpunkten während der Animation geschehen soll, indem Stile für Keyframes (oder Wegpunkte) entlang der Animationssequenz definiert werden.
Die @keyframes-Regel ist ein Kernbestandteil der CSS-Animations-Spezifikation.
Auf die @keyframes-Regel und ihren Bezeichner folgen Regelblöcke (d. h. Stilregeln mit Selektoren und Deklarationsblöcken, wie im normalen CSS-Code), die in geschweiften Klammern eingeschlossen sind.
Keyframes in der Animationssequenz
Innerhalb der geschweiften Klammern definieren Keyframe-Selektoren, wann sich die Stile während der Animationssequenz ändern sollen. Der Satz an CSS-Stilen kann während der Animation mehrmals aktualisiert werden.
Keyframe-Selektor
Der Keyframe-Deklarationsblock enthält CSS-Eigenschaften und deren Werte. Ein Keyframe-Selektor kann einen Prozentsatz (%) oder die Schlüsselwörter from (entspricht 0 %) und to (entspricht 100 %) verwenden. 0 % markiert den Start der Animation und 100 % das Ende.
Vendor-Prefixes
Die @keyframes-Regel wird von allen modernen Browsern vollständig unterstützt, ohne dass Vendor-Prefixes erforderlich sind. Veraltete Präfixe (wie -webkit- oder -moz-) werden nicht mehr benötigt.
Syntax
Syntax der CSS @keyframes-At-Rule
@keyframes animationname {keyframes-selector {css-styles;}}Verwendung von @keyframes als Schlüsselwort
Die @keyframes-Regel besteht aus dem Schlüsselwort @keyframes, gefolgt von einem Bezeichner (vom Entwickler gewählt), der die Animation definiert. Um die Animation an ein Element zu binden, wird dieser Bezeichner als Wert für die animation-name Eigenschaft verwendet.
So sieht es aus:
So definieren Sie eine Animation und wenden sie auf ein Element an
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s …;
}Beispiel für die @keyframes-Regel mit der Eigenschaft background-color:
Beispiel für die CSS @keyframes-At-Rule
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 50px;
animation: backgrounds 4s infinite;
}
@keyframes backgrounds {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #cccccc;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="element">The background of this text is animated.</div>
</body>
</html>In diesem Beispiel animieren wir die Eigenschaft background-color. Zuerst legen wir einen Bezeichner für die Animation fest: backgrounds. Dann setzen wir Keyframe-Selektoren (0 %, 50 % und 100 %) und definieren Werte für die Eigenschaft: Grün, Blau und Grau. Das bedeutet, dass die Hintergrundfarbe am Startpunkt (0 %) hellgrün ist, bis sie den nächsten Keyframe (50 %) erreicht. In der Mitte der Animationssequenz wechselt der Hintergrund zu hellblau und am Endpunkt (100 %) ist er grau.
Beispiel für die @keyframes-Regel:
Beispiel für die CSS @keyframes-At-Rule mit dem Wert infinite
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 10px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
animation: element 4s infinite;
}
@keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
</style>
</head>
<body>
<h2>@keyframes rule example</h2>
<div></div>
</body>
</html>Beispiel zur Verwendung der @keyframes-Regel zum Erstellen eines fallenden Bildes:
Beispiel für die CSS @keyframes-At-Rule mit der Eigenschaft transform
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
height: 90%;
}
.container {
margin: 30px auto;
min-width: 320px;
max-width: 600px;
height: 90%;
overflow: hidden;
}
img {
transform-origin: left center;
animation: fall 5s infinite;
}
@keyframes fall {
from {
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="container">
<img src="https://de.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs" width="150" height="50" />
</div>
</body>
</html>Syntaxkomponenten
| Komponente | Beschreibung |
|---|---|
identifier | Gibt den Namen der Animation an. Erforderlich. |
keyframe-selector | Gibt den Prozentsatz der Animationsdauer an. Akzeptiert 0 % bis 100 %, from (0 %) oder to (100 %). Erforderlich. |
declaration-block | Enthält die CSS-Eigenschaften und Werte, die auf jeden Keyframe angewendet werden sollen. Erforderlich. |
Praxis
Was ist über CSS-Keyframes korrekt?