Animationen über keyframes - Drehbuch für Animationen

CSS3 mit seinen Animationen bietet die Möglichkeit gezielt CSS-Eigenschaften über einen festgelegten Zeitraum zu verändern. So können Farben, Positionen, Größen, Transparenz und wirklich alle weiteren Eigenschaften von CSS geändert werden.

Der Zeitraum kann frei bestimmt werden und durch die langsam schneller werdende Beschleunigung bzw. durch realistische Verzögerung kann ein natürlicher Eindruck beim Betrachter erzeugt werden.

Die einfachste Variante ist die Änderung über die CSS-Pseudo-Klasse :hover. So kann auf die Mausberührung einer Schaltfläche durch einen Nutzer reagiert werden und beispielsweise der Button mit einer Farbänderung oder einem Schlagschatten versehen werden.

Für die Veränderung werden als Minimum die folgenden 2 CSS-Anweisungen benötigt:

• transition-property
• transition-duration

Für eine Schaltfläche sieht das so aus:

.schaltflaeche {
    background-color: skyblue;
    transition-property: background-color;
    transition-duration: 1s;
} 
.schaltflaeche:hover {
    background-color: limegreen;
}

Oder in der Kurzschreibweise:

transition: background-color 1s;

Für die natürliche Wirkung kann noch die Beschleunigung bzw. Abbremsen der Animation angegeben werden über transition-timing-function. Hier gibt es folgende Werte:

• linear
• ease
• ease-in
• ease-out
• ease-in-out

Zusätzlich kann noch eine Verzögerung vor dem Start der Animation angegeben werden über die CSS-Anweisung transition-delay.

Das Ganze kann in der Kurzschreibweise eingegeben werden:

transition: background-color 1s ease 2s;

CSS-Keyframe-Animationen

Wenn mehrere unterschiedliche Stadien in einer Animation erwünscht sind also Anfang und Ende kann dies über Keyframe-Animationen erstellt werden.

Hier quasi ein Drehbuch für die Animation erstellt, die @keyframes-Regel. Diese bekommen einen Namen und werden über den Namen dann angesprochen. Die einfachste Variante ist mit Anfang und Ende.

@keyframes drehbuch {
    from {  
        // gewünschte Eigenschaften am Beginn der Animation
    }
    to {
        // gewünschte Eigenschaften am Ende der Animation
    }
}

Der Aufruf geschieht über einen beliebigen Selektor:

body {
    animation-name: drehbuch;
    animation-duration: 1s; 
    animation-iteration-count: infinite;
}

Komplexe Animationen können über beliebig viele @keyframes laufen:

@keyframes drehbuch {
    0% {  
        // gewünschte Eigenschaften am Beginn der Animation
    }
    30% {  
        // gewünschte Eigenschaften bei 30% der Animation
    }
    80% {  
        // gewünschte Eigenschaften bei 80% der Animation
    }
    100% {
        // gewünschte Eigenschaften am Ende der Animation
    }
}

Im Folgenden ein Beispiel über mehrere Stadien:

<div id="bereich">Beispiel</div>

Und den entsprechenden CSS-Code:

@keyframes drehbuch {
    0% {
        background-color:mediumpurple;
    }
    20% {
        background-color:orange;
        transform: translate(180px, 0);
    }
    40% {
        background-color:yellowgreen;
        border-radius: 50%;
        transform: translate(180px, 180px);
    }
    60% {
        background-color:deepskyblue;
        transform: translate(0, 180px);
    }
    80% {
        background-color:deepskyblue;
        transform: translate(90px, 90px) scale(2.5) rotate(70deg);
        border-radius: 50%;
    }
    100% {
        background-color:mediumpurple;
    }
}

#bereich{
    margin: 20px;
    width:  40px;
    height: 40px;

    color: white;
    font-size: 9px;
    line-height: 40px;
    text-align: center;

    animation-name: drehbuch;
    animation-duration:8s;
    animation-iteration-count:infinite;
}

Was passiert am Ende der Animation? Über die CSS-Anweisung animation-fill-mode kann dies eingestellt werden: Mögliche Werte sind: forwards, backwards, both

Über die CSS-Anweisung: animation-direction: alternate; kann eingestellt werden, dass die Animation am Ende rückwärts läuft. Mögliche Werte sind: normal, reverse, alternate, alternate-reverse