Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

Referenz:CSS/Eigenschaften/keyframe

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft keyframes CSS 3.0
Beschreibung 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.[1]
erlaubte Werte

entweder Liste mit 0% und 100% oder from to

default-Wert

none

anwendbar auf alle Elemente, Pseudoelemente ::before und ::after (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif keyframes
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
Tipp

Weblinks[Bearbeiten]

  1. https://developer.mozilla.org/de/docs/Web/CSS/@keyframes