CSS/Eigenschaften/animation

Die Eigenschaft animation ist die Zusammenfassung der Eigenschaften animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count und animation-direction.

Erlaubte Werte

siehe Einzelwerte

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

aside {
    background-color: #000;
    color: white;
    animation: beispiel 3s;
}
@keyframes beispiel {
    from {background-color: #000;}
    to {background-color: #fff;}
}

Das aside-Element erhält eine CSS-Animation mit Namen beispiel mit einer animation-duration von 3s. Für alle anderen Eigenschaften werden die Defaultwerte verwendet.

Beachten Sie: Für ältere Versionen von Safari und Android müssen Sie proprietäre Eigenschaften verwenden.

für Android, Opera und Safari:

• -webkit-animation
• @-webkit-keyframes

Siehe auch

• CSS/Tutorials/Animation/Animation
• SVG/Tutorials/Einstieg/SVG mit CSS animieren

Weblinks

• Spezifikation (W3C): animation shorthand property