Lassen Sie uns die Woche mit etwas Spaß beenden. CSS-Keyframe-Animationen verfügen derzeit über eine sehr eingeschränkte Browserunterstützung, sie sind jedoch immer noch interessant, um etwas darüber zu lernen und damit zu experimentieren.
Im Folgenden erstellen wir eine einfache Webseite, die Webkit-Keyframe-Animationen nutzt, um die Hintergrundfarbe in einer endlosen Schleife zu verschieben. Fasziniert? Weiter lesen!
Demo
Klicken Sie auf den untenstehenden Link, um einen kurzen Einblick in das zu erhalten, was wir heute bauen werden.
Live Demo: Klick hier
Keyfame-Animationen: Immer noch zum Spaß
Mit CSS3 ist es einfach genug, eine Farbe in eine andere Farbe einblenden zu lassen, beispielsweise bei einem Hover-Befehl. Stellen Sie zwei verschiedene Farben ein, werfen Sie einen Übergang und Sie können loslegen. Was aber, wenn wir etwas haben wollen, das ständig die Farbe wechselt? Die Antwort liegt in Keyframes.
Derzeit ist die Unterstützung für Keyframe-Animationen in CSS recht gering. In Webkit-Browsern wie Safari und Chrome kann man sich eigentlich nur darauf verlassen, dass Firefox 5 ebenfalls unterstützt wird. Das Unglückliche ist, dass dies, wie bei vielen CSS3-Tricks, nicht ganz in der Produktion einsetzbar ist, es sei denn, Sie sind auf eine große Anzahl Ihrer Benutzer vorbereitet, die diese Erfahrung verpassen.
Funktionsweise von Keyframes
Keyframe-Animationen sind eine der komplizierteren neuen Funktionen von CSS. Tatsächlich fühlt es sich eher wie Programmieren als Styling an, sogar bis zum Punkt fast eine Variable deklarieren! Lassen Sie uns einen kurzen und schmutzigen Lauf machen, um zu sehen, wie sie funktionieren.
Als Erstes möchten Sie den Webkit-Keyframe-Block deklarieren und Ihre Animation benennen.
Wie ich bereits angedeutet habe, ist Ihr Animationsname fast wie eine Variable, die Sie später aufrufen werden. Stellen Sie daher sicher, dass sie sowohl beschreibend als auch leicht zu merken ist. Zum Beispiel könnten wir für unser Experiment den Namen "colorPulse" verwenden.
Als Nächstes füllen wir dies mit einer Art Zeitleiste für unsere Animation. Stellen Sie sich das so vor, als würden Sie Keyframes wie in einem Animationsprogramm deklarieren. Nur hier verwenden Sie reinen Code. Die Prozentsätze repräsentieren den Zustand des Objekts an diesem Punkt der Animation.
Hier animieren wir offensichtlich die Hintergrundfarbe. Bei 0% wäre die Farbe rot, bei 50% wäre sie weiß und bei 100% wäre sie blau. Das Tweening wird automatisch durchgeführt. Sie müssen also nur die Animation auf ein bestimmtes Element anwenden und das Verhalten definieren. Hier wenden wir es auf ein div an.
Wie Sie sehen können, haben wir den Namen der Animation verwendet, um auf das zuzugreifen, was wir zuvor eingerichtet haben. Als Nächstes legen wir die Dauer (10 Sekunden), die Anzahl der Iterationen (unendlich) und die Richtung (alternativ) fest. Letzteres führt dazu, dass die Animation vorwärts und rückwärts läuft: rot, weiß, blau, weiß, rot, weiß, blau usw.
Dies ist wirklich nur die Abkürzung für diese Deklarationen. Sie können sie auch einzeln einstellen. Hier ist eine größere Liste der Animationseigenschaften, die Sie definieren können:
Pulsierender Website-Hintergrund
Nun, da wir ein Gefühl dafür haben, wie dies funktioniert, gehen wir weiter und bauen ein echtes Beispiel auf. Wir fangen damit an, ein grundlegendes Seitendesign zu gestalten und anschließend unsere Animation hinzuzufügen.
Hintergrundfarbe
Um die Seite gestalten zu können, müssen wir eine Hintergrundfarbe auswählen. Dies ist eine interessante Aufgabe im Hinblick auf das Projekt. Unser Ziel ist es, einen Hintergrund zu schaffen, der von Farbe zu Farbe pulsiert. Ich kann gar nicht genug betonen, wie gefährlich dies aus Sicht des Designers ist. Sie sind fast dazu verdammt, etwas so Hässliches zu schaffen, dass niemand darauf schauen kann!
Der beste Weg, um dies zu erreichen, ist aus einer subtilen Position. Wir wollen langsame, reibungslose Schichten, die angenehm sind und nicht störend wirken. Wenn wir Farben wählen, die zu kräftig oder zu hell sind, brennen wir die Augen der Betrachter aus.
Da wir gerade an Easer vorbeigefahren sind, ist mein Geist in Pastellfarben stecken geblieben, und ich kam mir vor, dass eine solche Palette für dieses Projekt perfekt sein könnte. Ich habe Kuler angefeuert und nach "Pastel" gesucht. und fand die folgende Palette.
Dies sind die Farben, die wir für unseren Hintergrund verwenden werden. In Kombination mit einer wirklich langsamen Schicht sollte dies einen eher milden und attraktiven Effekt ergeben.
Grundlegendes HTML
Um den Grundstein für unser Experiment zu legen, habe ich mein typisches Klischee geschaffen. Webdesign-Layout: Kopfzeile, Untertitel und Bild. Wir brauchen wirklich nicht viel, gerade genug, um die Seite nicht unglaublich langweilig zu machen.
Wie Sie sehen, setzen wir Intervalle auf 0%, 25%, 50%, 75% und 100%, damit unsere Animation gut aufgeteilt wird.Bei jedem Stopp haben wir eine Farbe aus unserer Kuler-Palette eingefügt.
Als nächstes haben wir zusätzlich zu einer Standard-Hintergrundfarbe, die als Backup dienen soll, die Animation deklariert. Beachten Sie, dass ich es auf satte 40s eingestellt habe. Da dies so viel Potenzial für eine intensive Animation bietet, möchten wir, dass die Animation sehr langsam ist. Ich mag sogar, wie es aussieht, wenn die Zeit verdoppelt wird.
Fertiges Produkt
Und noch einmal, falls Sie es oben verpasst haben, ist hier das fertige Produkt. Beachten Sie, wie schön die Übergänge von Farbe zu Farbe sind. Da wir mit einer schönen Palette angefangen haben, sind die Verschiebungen ziemlich natürlich und nicht zu ablenkend.
Live Demo: Klick hier
Fazit
In den nächsten Jahren wird es immer mehr Unterstützung für CSS-Keyframe-Animationen geben. Momentan funktionieren sie hervorragend in Safari und Chrome, die konsequent als Einblick in die Zukunft von HTML und CSS dienen und mit Firefox als zusammenarbeiten @ -moz-keyframes.
In diesem Artikel sollten Sie über alle nicht-traditionellen Animationen nachdenken, die Sie mit Keyframe-Animationen erstellen können. Ich hoffe, Sie haben ein oder zwei Dinge gelernt und wurden dazu inspiriert, Ihre eigenen einzigartigen Anwendungen zu erstellen.