CSS3 Animation für Webkit-Browser

Auf tidenhub2011.de habe ich einen kleinen Effekt im Submitbutton eingebaut, in dessen Genuss allerdings nur Benutzer mit einem Webkit-Browser (Chrome, Safari) kommen. Es geht um eine kleine Animation der Hintergrundgrafik. Umgesetzt habe ich das rein mit CSS3 und -webkit-animation.

Einfache CSS Animationen kann man auch mit -webkit-transition oder -moz-transition bauen, sobald es aber etwas komplexer wird, reichen die Möglichkeiten nicht mehr aus. Daher also -webkit-animation. Ich hoffe sehr, dass auch Mozilla da noch nachrüstet im Firefox4.

Hier eine verkleinerte Version der Hintergrundgrafik zum Verstehen:

Und hier der fertige, funktionsfähige Button:

Jetzt aber zum Code:

@-webkit-keyframes welle {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -1120px 0px;
    }
}

Mit @-webkit-keyframes dein_animations_name legt man fest was man animiert und wie der Stand zu welchem Zeitpunkt der Animation ist. Man kann beliebig viele Schritte in Prozentwerten hinzufügen. Mir reicht in diesem Fall Anfang und Ende. Animiert wird ganz einfach die Position des Hintergrundbildes. Es läuft sozusagen einfach von links nach rechts durch. Dadurch sieht es so aus als würde sich die Welle bewegen.

INPUT.submitexample {
    margin-bottom: 15px;
    padding: 0px;
    width: 160px;
    height: 40px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #c5deed;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    text-shadow: 0px 1px 1px #000;
    border-top: 1px solid #55a4d3;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 2px #041e2d;
    -moz-box-shadow: 0px 1px 2px #041e2d;
    box-shadow: 0px 1px 2px #041e2d;

    background: url(img/input_submit_bg.gif) no-repeat #214b80;
    background-position: 0px 0px;
    -webkit-animation-name: welle;
    -webkit-animation-play-state: paused;
    -webkit-animation-duration: 19s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
}

Der ganze Kram bis background interessiert für die Animation nicht. Ab da wird es dann aber (fast) interessant. Mit background legen wir erstmal das Hintergrundbild fest. Es kachelt nicht (no-repeat) und der Hintergrund ist blau (#214b80), falls das Bild nicht geladen will. Nennt man auch Fallback.

Als nächstes setzen wir mit background-position: 0px 0px; die Hintergrundgrafik auf ihre Ausgangsposition. In diesem Fall also oben links.

Richtig interessant wird es erst jetzt. Mit -webkit-animation-name: welle; rufen wir die Animation auf, die wir oben erstellt haben. Mit -webkit-animation-play-state: paused; halten wir die Animation an, bevor sie überhaupt anfangen kann, weil die Animation nur bei Hover über dem Button passieren soll. Standardwert ist hier „running“, was bedeutet, dass die Animation sofort beginnt.

-webkit-animation-duration: 19s; sollte selbsterklärend sein. 19s ist einfach die Dauer der Animation.

-webkit-animation-iteration-count: infinite; bedeutet, dass die Animation immer wieder abläuft. Wir erzeugen hier also einen Loop. Standardwert ist 1 und man kann jede beliebige Zahl eingeben.

-webkit-animation-direction: alternate; bedeutet, dass die Animation bei allen geraden Durchläufen vorwärts abgespielt wird und bei bei ungeraden Durchläufen rückwärts abgespielt wird. Das bedeutet, dass die Animation beim ersten Mal richtig rum und beim zweiten Mal rückwärts abgespielt wird. Das in Verbindung mit einer niemals stoppenden Animation führt dazu, dass die Welle immer wieder zurück läuft, als wäre sie auf eine Wand getroffen. Standardwert ist hier übrigens normal. Da würde die Animation einfach immer wieder am Anfang starten.

-webkit-animation-timing-function: linear; bedeutet, dass die Animation einfach linear abläuft. Standardwert ist ease. Es gibt noch ease-in, ease-out und ease-in-out, durch die eine Beschleunigung der Animation jeweils am Anfang, Ende oder an beiden Enden entsteht. Am Besten einfach mal testen.
Das war es eigentlich auch schon.

INPUT.submitexample:HOVER {
    -webkit-animation-play-state: running;
}

Bei Hover über den Button verändern wir jetzt nur noch webkit-animation-play-state auf running und schon läuft die Animation. Verlassen wir den Button mit der Maus wieder, trifft wieder die obige Situation (paused) zu und die Animation stoppt. Geht man wieder mit der Maus über den Button setzt sich die Animation genau an diesem Punkt fort.

Das war jetzt eine ganze Menge Text, ist aber eigentlich alles total simpel. Viel Spaß damit!

Veröffentlicht am Donnerstag, 17. Februar 2011

Kommentare

  1. Super Sache. Sowas ist grundsätzlich auch mit Javascript möglich. Doch die Möglichkeit sowas mit rein CSS3 ist natürlich um längen besser. Firefox4 wird hier sicher ordentlich nachrüsten und hoffentlich auch der IE9, sodass man solche Sachen vermehrt auch bei Kundenprojekte verwenden kann…

  2. Ein halbwegs geschultes Auge nimmt das aber nicht als realistischen Glanz wahr, sondern sieht da bloß eine helle Ebene von rechts nach links wandern… wirkt nicht sonderlich toll. Aber gute Idee, ansonsten.

  3. Sehr schön. Ich hätte es aber etwas anders gemacht: Die Welle als Halbtransparentes png und über -webkit-gradient den Hintergrund eingefügt. Vorteil: Wenn man die Farbe es Gründen ändern sollte müsste man dazu das Hintergrundbild nicht bearbeiten.

    Sehr schön Seite. Vielleicht wäre es ja möglich den Tippfehler bei „Dieses Jahr neu“ um genauer zu sein bei „die wir ein einen“ zu korrigieren. Sollte wohl „die wir in einen“ heißen.

  4. Realisiere auch gerade mein erstes Projekt auf Basis von HTML5/CSS3 und als alter Flasher freut man sich über die ganzen neuen Möglichkeiten. Aber Du sagst es bereits: Es müssen einfach alle Browser nachziehen ;)

  5. echt stark, vor allem wenn man dazu nichts außer CSS und HTML braucht, bin echt gespannt was CSS3 noch alles so mit sich bringt

    Vor allem die ewige Geschichte mit der Kompatibilität der Browser

  6. Sehr gut erklärt und relative Simple mit gutem Endergebnis – der einzige Nachteil an CSS3 ist, dass es nicht von allen Browsern unterstüzt wird (Was jetzt bei so einem Button nicht so schlimm wäre).Wenn man z.B. mit -webkit-border-radius oder -webkit-box-shadow arbeitet sehen die Seiten im IE meist ätzend aus, wieso auch immer Menschen den IE nutzen.

    Aber so wie oben benutzt ist das ganze echt cool, danke für die ausführliche Dokumentation ;)

  7. HTML5 und CSS3 sind sicherlich ganz schön. Ich kenne aber meinen Job. Ich erlebe es immer wieder, dass User noch mit dem IE6 im Netz unterwegs sind. Mit diesem Browser kann man z.B. nicht (mehr) arbeiten. Wenn ich diesen ein Update anrate, dann kommt nur die Frage : Wieso, geht doch alles.

    So schön auch die Möglichkeiten sind. Es wird noch lange dauern, bis wir diese benutzen können ohne Bedenken …

  8. Michael du widersprichst dir selbst. Einerseits sprichst du von html5 und CSS3, andererseits von „funktioniert doch alles“. Genau diese neue Technik sollte dein Beispiel sein, warum eben nicht. Selbst Google hat den ie6 Support eingestellt.