HowTo: Animationen mit HTML und CSS erstellen
Bisher musste man bei Animationen auf Websites fast immer auf JavaScript zurückgreifen. So auch in meinem Artikel Animationen mit jQuery. Doch mittlerweile hat CSS auch eine zeitliche Komponente bekommen, mit der man Animationen erstellen kann.
Aber warum umsteigen? Ganz einfach: Es ist performanter. Das fängt schon an, dass weniger Code gebraucht wird. Man braucht keine Bibliothek dafür. Aber noch wichtiger, für aufwendige Animationen ist, was im Browser passiert. Dadurch das die CSS-Animation direkt vom Browser kommt, muss kein JavaScript geparst werden. Der Browser selbst steuert die Animation und kann somit die für ihm performanteste Ausführung wählen. Nebenbei deckt es auch den geringen Teil der User ab, die JavaScript deaktiviert haben.
Box aus- und einblenden
Um die Technik etwas zu beschreiben, möchte ich eine Box ein- und ausblenden. Also bauen wir uns erst mal eine kleine Box:
<!DOCTYPE html> <html> <head> <style> #box { width:100px; height:100px; background-color:#000; } </style> </head> <body> <div id="box"> </div> </body> </html>
Nichts besonders, klein schwarz und oben links platziert. Nun können wir der id #box die Animation hinzufügen:
<!DOCTYPE html> <html> <head> <style> @-o-keyframes hide_show { 0% {opacity:1; } 50% {opacity:0; } 100% {opacity:1; } } @-ms-keyframes hide_show { 0% {opacity:1; } 50% {opacity:0; } 100% {opacity:1; } } @-moz-keyframes hide_show { 0% {opacity:1; } 50% {opacity:0; } 100% {opacity:1; } } @-webkit-keyframes hide_show { 0% {opacity:1; } 50% {opacity:0; } 100% {opacity:1; } } @keyframes hide_show { 0% {opacity:1; } 50% {opacity:0; } 100% {opacity:1; } } #box { width:100px; height:100px; background-color:#000; animation: hide_show 10s; -o-animation: hide_show 10s; -ms-animation: hide_show 10s; -moz-animation: hide_show 10s; -webkit-animation: hide_show 10s; } </style> </head> <body> <div id="box"> </div> </body> </html>
Auf den ersten Blick ist der Nachteil der Animation zu sehen: Es ist noch experimentell. Deswegen muss man leider die Browsererkennung hinzufügen. Obwohl der Internet-Explorer mit -ms- schon drin ist, bekomme ich das Beispiel dort nicht zum laufen. Aber im Chrome, Safari, Firefox und Opera läuft es ohne Probleme.
Nun zum Code selbst: In der Klasse selbst kann die Eigenschaft animation genutzt werden. Hier wählt man den Namen seiner Animation gefolgt von der Zeit (hier 10 Sekunden).
Im @keyframe
kann man dann die einzelnen Schritte der Animation beschreiben. Diese verändern das CSS des Objektes, welchem die Animation zugeordnet ist. Die einzelnen Schritte werden in Prozent angegeben. In diesem Fall ist mit 50% die Box nach 5 Sekunden unsichtbar.
Animation wiederholen
Es ist auch möglich, die Animation im öfters aufzurufen. Hierfür ist die Eigenschaft animation-iteration-count zuständig. Dort kann man entweder eine Zahl eingeben, oder infinite, wenn es eine Dauerschleife geben soll:
#box { width:100px; height:100px; background-color:#000; animation: hide_show 10s; -o-animation: hide_show 10s; -ms-animation: hide_show 10s; -moz-animation: hide_show 10s; -webkit-animation: hide_show 10s; animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; }
Anwendungsfälle
Auf einer normalen Seite sollte man es nicht übertreiben mit der Animation. Viele von euch werden sich an die Zeit der Intros erinnern. Dabei wurde vor dem Besuch der Homepage ein kleiner Film abgespielt – Heute kaum mehr zu sehen, und das nicht grundlos. Denn im regulären Gebrauch sind Animationen oft störend.
Doch ein paar sinnvolle Anwendungsfälle gibt es doch:
- Slideshows: Mit Slideshows zeigen blenden nacheinander verschiedene Bilder ein und aus. Diese sind man oft auf den Startseiten, um zu zeigen, was die Seite so alles bietet.
- Browsergames: Na klar, in Spielen gibt es viele Animationen. Und wie wir alle wissen, gibt es immer mehr Browsergames. Die Vorteile zum regulären Spielen ist, die sicherere Lizenzierung und die nicht erforderliche Installation.
- Menüs: Dropdown-Menüs kann man bereits mit CSS basteln – Allerdings ohne Animation. Hier kann man nun einen leichten Aufklapp-Effekt einbauen, statt auf JavaScript zurückzugreifen.
Wir müssen noch ein bisschen warten
Die Animationen im CSS3 sind noch relativ frisch, deshalb müssen wir noch etwas warten, bis es auch für elementare Funktionen zur Verfügung steht. Man kann es aber so verwenden, dass Browser, die die CSS-Anmiation noch nicht unterstützen einfach keine Animation haben. Im Falle der Slideshow, wird einfach immer nur das erste Bild angezeigt.
Weiterführende Artikel
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Kommentare
Daniel schrieb am 15.10.2012:
Schöner Artikel Stefan. Mal schauen ober so oder ähnlich in meinem neuen Template Anwendung findet. Gruß Daniel
Klaus Moser schrieb am 16.10.2012:
Kleine Korrektur > Dabei wurde vor dem Besuch der Homepage ein kleiner Film abgespielt Die Animation war auf der Homepage, bevor die Website besucht wurde. Homepage ist lediglich ein Synoynm für die Startseite.
Stefan Wienströer schrieb am 16.10.2012:
Stimmt, hast Recht^^ Den Begriff kenn ich eigentlich schon, allerdings hab ich das Intro nicht als eigene Seite gesehen.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project