CSS/Eigenschaften/keyframe

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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]

Siehe auch[Bearbeiten]