CSS: Animationen

Dieser Artikel wurde von Do, Hoang Viet am Samstag, 8. Februar 2014 verfasst. Aktualisiert: 08.02.2014 13:23:31

CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

Animationen über animation und keyframes

Die erste Möglichkeit Animationen über CSS3 zu erstellen geht über die Definition von Keyframes

@keyframes myAnimation {
    from {
        background: red;
    }
    to {
        background: blue;
    }
}
@-webkit-keyframes myAnimation { /* Chrome & Safari */
    from {
        background: red;
    }

    to {
        background: blue;
    }
}

In dem from und to Bereich können beliebige CSS-Properties wie Hintergrundsfarbe, Schrift, Transformationen und alles andere Properties definiert werden. from definiert dabei den Startzustand und to den Endzustand.

Nun müssen wir nur noch die Elemente markieren, die animiert werden soll. Im nachfolgendem Beispiel ein Element mit der ID anim:

#anim {
    -webkit-animation: myAnimation 3s infinite ease-in; /* Chrome und Safari*/
    -moz-animation:    myAnimation 3s infinite ease-in; /* Firefox */
    -ms-animation:     myAnimation 3s infinite ease-in; /* Internet Explorer */
    -o-animation:      myAnimation 3s infinite ease-in; /* Opera*/
    animation:         myAnimation 3s infinite ease-in; /* WC3*/
}

Lediglich die letzte CSS-Property "animation" ist die offizielle CSS-Property, die vom WC3 empfohlen wird. Doch aus Kompatiblitätsgründen sollten die 4 oberen ebenfalls enthalten sein. Vorallen für ältere Browserversionen.

Der 1. Wert gibt den Keyframe an, danach folgt die Animationsdauer und anschließend geben wir mit infinite an, dass die Animation unendlich oft abgespielt wird. Als letztes geben wir noch (optional) eine Easefunktion an.

Jetzt muss im HTML-Code ein Element die ID anim zugewiesen werden.

<div id="anim">Dieser Box wird animiert</div>

In dieser Form würde die Animation sofort von from Zustand wieder anfangen. Um eine smoothe Animation von to nach from Zustand zu erhalten, brauchen wir nur alternate angeben:

#anim {
    -webkit-animation: myAnimation 3s infinite ease-in alternate; /* Chrome und Safari*/
    -moz-animation:    myAnimation 3s infinite ease-in alternate; /* Firefox */
    -ms-animation:     myAnimation 3s infinite ease-in alternate; /* Internet Explorer */
    -o-animation:      myAnimation 3s infinite ease-in alternate; /* Opera*/
    animation:         myAnimation 3s infinite ease-in alternate; /* WC3*/
}

Alternate bewirkt, dass alle geraden Animationsdurchläufe rückwärts laufen (also von to nach from).

Live Demo auf Codepen (externe Link)

Anmerkungen

Statt from und to können auch Prozentangaben genutzt werden:

@keyframes myAnimation {
    10% {
        background: red;
    }
    100% {
        background: blue;
    }
}

 Weitere Definitionen können beliebig angefügt werden bei der Definition von anim:

#anim {
    -webkit-animation: myAnimation 3s infinite ease-in; /* Chrome und Safari*/
    -moz-animation:    myAnimation 3s infinite ease-in; /* Firefox */
    -ms-animation:     myAnimation 3s infinite ease-in; /* Internet Explorer */
    -o-animation:      myAnimation 3s infinite ease-in; /* Opera*/
    animation:         myAnimation 3s infinite ease-in; /* WC3*/

    color: white;
}
 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Alternierende Tabellenzeilen

    Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir ...

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network