CSS Animation

Mit Animationen können in CSS Eigenschaftsänderungen definiert werden. Es gibt 2 Arten Animationen zu definieren, einmal mit Prozentangaben und einmal mit from und to.

from & to

In diesem Beispiel wird ein Div Container die Hintergrundfarbe ändern.
Zuerst muss die Animation definiert werden.

@keyframes farbverlauf{
    from {background-color: red;}
    to {background-color: yellow;}
}

Danach muss mit animation-name die Animation auf ein Element gebunden werden, des weiteren muss mit animation-duration die Dauer der Animation angegeben werden. Mit animation-iteration-count wird die Wiederholungsanzahl angegeben, mit infinite, übersetzt unendlich, wird die Animation unendlich oft wiederholt.

div {
    animation-name: farbverlauf;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Prozentangaben

Mit Prozentangaben können mehrere Abschnitte definiert werden, und x Prozent von der Zeit aktiviert werden.

@keyframes farbverlauf{
    0% {background-color: red;}
    20% {background-color: yellow;}
    50% {background-color: green;}
    80% {background-color: yellow;}
    100% {background-color: red;}
}
div {
    animation-name: farbverlauf;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Animation verzögern

Mit der animation-delay Eigenschaft können Animationen verzögert abgespielt werden. Dabei tritt aber nur beim ersten Start die Verzögerung in kraft.

@keyframes breitenaenderung{
    0% {width: 100px;}
    50% {width: 150px;}
    100% {width: 100px;}
}
div {
    width: 100px;
    animation-name: breitenaenderung;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}

starte Animation

Wiederholungen

Der animation-iteration-count gibt an wie oft sich eine Animation wiederholt, mit infinite läuft die Animation unendlich oft ab.
Dieses Beispiel zeigt ein shake Effekt, der z.B. bei fehlerhaften Formulareingaben benutzt werden kann.

@keyframes shakeeffekt{
    0% {margin-left: 0px;}
    50% {margin-left: 15px;}
    100% {margin-left: 0px;}
}
div {
    animation-name: shakeeffekt;
    animation-duration: 0.5s;
    animation-iteration-count: 3;
}

shake

Timing verhalten

Mt der Eigenschaft animation-timing-function kann der Verlauf der Animation geändert werden.

linear

geradeliniger Verlauf

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

ease

Zum Ende hin langsamer werdend.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

ease-in

Zum Ende hin schneller werdend.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
}

ease-out

Zum Ende hin langsamer werdend.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

ease-in-out

Von langsam zu schnell und wieder zu langsam.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

alle im Vergleich

linear ease ease_in ease_out ease_in_out

cubic-bezier

Mit cubic-bezier kann eine eigene Kurve definiert werden.

animation-timing-function: cubic-bezier(0,0,0,0);}

animation-timing-function: cubic-bezier(1,0,0,0);}

animation-timing-function: cubic-bezier(0,1,0,0);}

animation-timing-function: cubic-bezier(0,0,1,0);}

animation-timing-function: cubic-bezier(0,0,0,1);}

Richtung

Die Direction Eigenschaft lasst die Animation vorwärts oder rückwärts ablaufen.

normal

Normal ist die Standardeinstellung, die Animation wird wie definiert abgespielt.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

reverse

Die Animation wird rückwärts abgespielt.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

alternate

Die Animation wird abwechselnd vorwärts danach rückwärts abgespielt.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

alternate-reverse

Die Animation wird abwechselnd rückwärts danach vorwärts abgespielt.

@keyframes breitenaenderung{
    from {width: 100px;}
    to {width: 200px;}
}
div {
    animation-name: breitenaenderung;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}