1.0 Einführung
In der Regel hat man bisher immer Animationen auf der
eigenen Seite mit Javascript realisiert, sei es entweder mit
Jquery oder mit eigenen geschrieben Javascript Funktionen.
Was ist aber wenn einer der Benutzer die die Web-Anwendung besuchen
kein Javascript aktiviert haben, oder ein Plugin in ihrem Webbrowser
installiert haben, welches Javascript für unbekannte Seiten blockiert?
Dann hat man in der Regel das Problem, dass einige Funktionen der Webseite
nicht funktionieren.
Abhilfe hier schafft CSS3. Seit CSS3 ist es nämlich nun auch möglich,
Animationen für einzelne Elemente der eigenen Seite zu definieren bzw.
zu erstellen.
2.0 Vorteile & Nachteile der Nutzung von CSS3-Animationen
Vorteil:
Der klare Vorteil der Nutzung von CSS3 basierten Animationen ist,
dass heutzutage fast jeder Browser CSS3 unterstützt (abgesehen vom IE)
und somit die Anwendung von CSS3 Animationen keine Probleme mit sich bringt.
Des weiteren lassen sich mittels CSS3 auch wie in Javascript Zeiten mit dem Script
vereinbaren bzgl. der Ausführung der jeweiligen Animation, somit kann man selbst
bestimmen wie Lange ein Effekt dauern soll. Dazu kann man natürlich ebenso festlegen
welcher Effekt zu welchem Zeitpunkt stattfinden soll, in dem man festlegt zu welchem
prozentualen Ladewert ein Ereignis ausgelöst wird.
Nachteil:
CSS3 kann keine Funktionalität im Bezug auf anwendungsortientierte Prozesse bereitstellen,
aufgrund dessen das CSS immer noch eine Sprache zur Visualisierung ist.
Beispielsweise:
Es soll ein animierter Klick auf ein Objekt ausgelöst werden, welches nachträglich
Daten aus einer relationalen Datenbank läd.
Dies würde sich nicht mit CSS3 allein realisieren lassen.
3.0 Anwendung von CSS3-Animationen in HTML
Nehmen wir als Beispiel wir möchten eine Progressbar erzeugen die linear wachsen soll
und die Farbe von Grau auf schwarz wechseln soll.
Dann ist der benötigte Sourcecode den wir brauchen dieser:
/**************************
Simple Progressbar
**************************/
/* Allgemein */
@keyframes MyProgressbar{
0% {
width: 0%;
background-color: lightgray;
}
50%{
width: 50%;
background-color: gray;
}
100%{
width: 100%;
background-color: black;
}
}
/* Opera */
/* Firefox */
@-moz-keyframes MyProgressbar{
0% {
width: 0%;
background-color: lightgray;
}
50%{
width: 50%;
background-color: gray;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
100%{
width: 100%;
background-color: black;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
}
}
@-o-keyframes MyProgressbar{
0% {
width: 0%;
background-color: lightgray;
}
50%{
width: 50%;
background-color: gray;
border-radius: 10px;
border-radius: 10px;
}
100%{
width: 100%;
background-color: black;
border-radius: 60px;
border-radius: 60px;
}
}
.progressbar{
animation: MyProgressbar 5s linear forwards 0.5s;
-moz-animation: MyProgressbar 5s linear forwards 0.5s;
-o-animation: MyProgressbar 5s linear forwards 0.5s;
}
Kurze Erläuterung:
Mittels der Keyframes definieren wir unsere Animation.
Dort können wir anhand von prozentualen Werten angeben, wann ein Ereignis ausgelöst
werden soll.
Zu den Prozentualen Werten können wir angeben, was durchgeführt werden soll, wenn dieser
Status erreicht ist. In diesem Falle soll die Breite gesetzt werden, die Farbe des Elementes
soll zu diesem Zeitpunkt X sein und die Abrundung der Ecken soll N sein.
Der HTML-Code zu diesem Beispiel fällt dementsprechend kürzer aus:
<html> <head> <title>CSS3 Animated Progressbar</title> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="progressbar"> </div> </body> </html>
Zum weiteren lässt sich bei bedarf auch mehr tun als nur das Aufrufen der Animation.
Beispielsweise könnte man ebenso für die jeweilige Animation ein eine Playstate
oder einen Delay setzen.
Derzeit bietet keyframes folgende Eigenschaften an:
animation-name – Name des Keyframes welcher aufgerufen werden soll
animation-duration – Dauer der Animation in Sekunden
animation-timing-function – Linear?
animation-delay – Definiert wann die Animation starten soll, standardgemäß ist dieser Wert auf 0, startet also sofort.
animation-iteration-count – Definiert die Anzahl der Durchgänge dieser Animation
animation-direction – Definiert die “Richtung” der Animation, z.b. reverse würde die Animation rückwärts starten. Standardgemäß ist auch hier “normal” gesetzt.
animation-play-state – Abspiel-Status der Animation, standardgemäß gesetzt auf “running”
4.0 Fazit
Möchte man sicherstellen das einige Effekte auch ohne die Abhängigkeit von Javascript
durchgeführt werden kann man dies mittels CSS3 bewerkstelligen.
Ist allerdings ein Benutzer auf der Webseite unterwegs, der reinzufällig noch mit einem
Internet-Explorer im Netz unterwegs ist, muss man für diese einsame Benutzergruppe im
Netz noch einen Ausnahmefall mit Javascript realisieren.
5.0 Quellen
http://www.w3schools.com/css3/css3_animations.asp
