CSS/@-Regeln/@keyframes
Aus SELFHTML-Wiki
< CSS | @-Regeln(Weitergeleitet von @keyframes)
- Liste der @-Regeln
Mit der @keyframes-Regel können Sie die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem Sie Wegpunkte setzen, die während der Sequenz an bestimmten Punkten erreicht werden. Diese @keyframes-Regel wird dann durch die animation-name
-Eigenschaft genutzt.
Syntax
@keyframes 'animation-name' { from Eigenschaft: Wert; to Eigenschaft: Wert; }
oder
@keyframes 'animation-name' { 0% Eigenschaft: Wert; beliebig viele Zwischenschritte 100% Eigenschaft: Wert; }
Beispiel
@keyframes beispiel {
from {background-color: #000;} to {background-color: #fff;}
}
@keyframes beispiel2 {
0% {background-color: #000;} 100% {background-color: #fff;}
}
aside {
width: 10em; height: 10em; background-color: #000; color: white; animation-name: beispiel;}
Das aside-Element wird nach Beendigung der Animation in den Ausgangszustand zurückversetzt.
Beachten Sie: Für ältere Versionen von Safari und Android müssen Sie proprietäre Eigenschaften verwenden.
für Android, Opera und Safari:
-
@-webkit-keyframes
Weblinks[Bearbeiten]
- W3C: keyframes
- MDN: @keyframes