Anzeige
Tutorialbeschreibung

CSS3-Animations - Grundlagen (1/2)

CSS3-Animations - Grundlagen (1/2)

Einführung in die Animationstechniken mit CSS3 (nur von Firefox und Webkitbrowsern unterstützt). Es werden die Grundlagen vermittelt, die benötigt werden, um eine einfache Animation ablaufen zu lassen. Erster von zwei Teilen.


Im ersten Teil dieses Zweiteilers werde ich grundlegende Dinge zu den Animationen erklären. Das Beispiel und zwei weitere findet ihr in den Arbeitsdateien.


Definierung von Animationen

Bevor man ein HTML-Element animieren kann, muss man zuerst definieren, was denn genau animiert werden soll. Das geschieht mit der @keyframes-Regel.

Möchte ich beispielsweise, dass die Breite eines div von 200px auf 300px erhöht wird, muss ich Folgendes schreiben:

@keyframes animation-test {
    from {width:200px;}
    to {width:300px;}
}

@-moz-keyframes animation-test {
    from {width:200px;}
    to {width:300px;}
}

@-webkit-keyframes animation-test {
    from {width:200px;}
    to {width:300px;}
} 

Für Webkitbrowser und Firefox muss eine Extraversion mit entsprechendem Präfix angelegt werden.



 

Definierung von Animationen (erweitert)

Mit der @keyframes-Regel sind nicht nur einfache Animationen möglich, man kann auch mehrere (beliebig viele) Zwischenschritte in einer Animation festlegen. Diese definiert man in %-Schritten.

@keyframes animation-test {
    0% {width:200px;}
    25% {width:100px;}
    50% {width:300px;}
    75% {width:400px;}
    100% {width:300px;}
}

@-moz-keyframes animation-test {
    0% {width:200px;}
    25% {width:100px;}
    50% {width:300px;}
    75% {width:400px;}
    100% {width:300px;}
}

@-webkit-keyframes animation-test {
    0% {width:200px;}
    25% {width:100px;}
    50% {width:300px;}
    75% {width:400px;}
    100% {width:300px;}
}

 

Abrufen der Animation + Festlegen von Animationsdauer und -verzögerung

Um die Animation mit dem Namen animation-test für ein HTML-Element abzurufen, muss man Folgendes im Stylesheet für dieses Element definieren:

element {
    animation-name: animation-test;
    -moz-animation-name: animation-test;
    -webkit-animation-name: animation-test;
}

Auch hier muss für Webkit und Firefox der entsprechende Präfix verwendet werden.

Nun legt man noch eine Dauer für die Animation fest (kann in Sekunden (s) oder Millisekunden (ms) angegeben werden):

element {
    animation-name: animation-test;
    animation-duration: 5s;
    -moz-animation-name: animation-test;
    -moz-animation-duration: 5s;
    -webkit-animation-name: animation-test;
    -webkit-animation-duration: 5s;
}

Als Letztes lässt sich noch nach Wahl eine Verzögerung vor Beginn der Animation einrichten (wieder in s oder ms):

element {
    animation-name: animation-test;
    animation-duration: 5s;
    animation-delay: 2000ms;
    -moz-animation-name: animation-test;
    -moz-animation-duration: 5s;
    -moz-animation-delay: 2000ms;
    -webkit-animation-name: animation-test;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2000ms;
}

 

Vereinfachte Schreibweise

Um Platz zu sparen, lassen sich alle Animationseigenschaften auch in einer Zeile definieren:

element {
    animation: animation-test 5s 2000ms;
    -moz-animation: animation-test 5s 2000ms;
    -webkit-animation: animation-test 5s 2000ms;
}

Vorschau

Im zweiten Teil werden wir uns damit beschäftigen, wie man Animationen beispielsweise in einer Endlosschleife laufen lassen, den Ablauf der Animation beeinflussen oder die Animation per Klick anhalten kann. Und das Ganze OHNE JavaScript!

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Kundentest
  • 08.08.2014 - 19:07

Herzlichen Dank für das Tutorial.

Portrait von TobiasWosowiecki
Portrait von MaoMao
  • 04.01.2013 - 16:50

Vielen Dank für das Tutorial.

Portrait von MicroSmurf
Portrait von mindraper
  • 06.04.2012 - 04:34

So schön das ganze auch ist, solange der IE 10 nicht eine höhere Verbreitung hat als der IE 9, sind die ganzen CSS-Animations, -Transitions und -Transforms eine spannende Sache. Aber für den Gebrauch im Arbeitsalltag noch nicht einsetzbar. Da bleibt dann doch wieder nur JavaScript.

M. E. nach ist das Ganze dann auch in letzter Konsequenz eine Frage des eigentlichen Sinn und Zwecks. Für eine simple Slideshow im privaten Rahmen kann man ja ohne Zweifel auf CSS3 umsatteln, sobald dann aber beispielsweise Änderungen in einer darunter befindlichen Textbox o. ä. bei einem Bildwechsel dazukommen, ist CSS auch schon wieder am Ende seiner Möglichkeiten und es führt kein Weg an JavaScript vorbei.

Trotz dessen natürlich nice, dass es wenigsten in diesem Umfang schonmal auch auf breiter Front unterstützt wird. Und wer weiß? Vielleicht wird ja der IE 10 der beste Browser der Welt? *har har*

Portrait von Daniel_Knecht
  • 01.02.2012 - 13:08

Schade selbst im Firefox geht bei mir da nichts :(

Portrait von simonpicos
  • 03.02.2012 - 13:26

Erklär doch mal was genau nicht funktioniert, oder beschreibe dein Problem näher. Mache dazu am besten nen Thread im Forum auf, oder schick mir ne pm :)

Portrait von elyion_g2
  • 08.03.2012 - 13:52

Kommt auf die Browser-Version an. Also ich nutze Google Chrome - der unterstützt wie von mir schon mehrmals erwähnt ALLE MODERNEN STANDARDS und nicht wie Firefox oder Internet Explorer nur paar wenige.

Portrait von Alukard_der_III
  • 01.02.2012 - 10:11

Cooles Tutorial,

gibt schon mal eine gute Vorschau was mit CSS alles so möglich ist.
Außerdem hat man eine gute Vorlage selber mal ein bisschen was aus zu probieren.

Ich würde mir für den zweiten Teil noch animationen mit Bildern wünschen alias GIF´s.

Auch ein kleine Vorschau wie das ganze animiert aussieht wäre nicht schlecht.

Aber sonst wirklich coole Sache!!!

Portrait von elyion_g2
  • 08.03.2012 - 13:54

http://www.elyion.ch/infinite.html .. hier habt ihr eine vorschau... ich habe das was im zweiten Teil noch behandelt wird gleich auch mal eingebaut... ganz liebe grüsse aus der schweiz :)

Portrait von pTown
  • 30.01.2012 - 15:31

hätte man ggf ein wenig ausführlicher gestalten können...

Portrait von simonpicos
  • 30.01.2012 - 17:14

Ist ja erst der erste Teil. Das zweite Tutorial kommt in der nächsten Zweit und wird dann die tiefer gehenden Techniken behandeln. Zitat: "Im zweiten Teil werden wir uns damit beschäftigen, wie man Animationen beispielsweise in einer Endlosschleife laufen lassen, den Ablauf der Animation beeinflussen oder die Animation per Klick anhalten kann. Und das Ganze OHNE JavaScript!"

x
×
×