CSS/@-Regeln/@keyframes

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

• W3C: keyframes
• MDN: @keyframes

Siehe auch

• CSS/Tutorials/Animation/Animation#keyframes