CSS3 Animation Tutorial - Sliding Navigation without JavaScript

CSS3 Animation Tutorial - Sliding Navigation without JavaScriptAufbauend auf dem "CSS3-Tutorial" bezüglich eines Navigations-Konzeptes bei dem die einzelnen Navigationspunkte mittels der CSS-Eigenschaft Border-Radius rund dargestellt werden, ist das Ziel dieses kleinen Tutorials, der Navigation Bewegung in Form eines Slide-Effektes einzuhauchen. Der Unterschied zu anderen hier bereits vorgestellten Variantionen an Navigationen, basiert dieses nicht auf JavaScript, sondern erhält seine Bewegung aus der CSS3-Eigenschaft Animation. Hiermit lassen sich für die entsprechenden Elemente flüssig animierte Bewegungen erzeugen. Weiterhin werden neben der Art der Bewegung, auch die Anzahl der Wiederholungen, die Dauer der Animation und vieles andere mehr festgelegt.

Modernes Webdesign mit CSS - Das neue Buch!

CSS3 besitzt somit Möglichkeiten die momentan noch gültige "Aufteilung einer Webseite" in Structure ( HTML ), Design ( CSS ) und Behaviour ( JavaScript ) aufzuheben und den Anwendern in ( hoffentlich ) naher Zukunft, neue Möglichkeiten bei der Umsetzung von Webseiten mit an die Hand zu geben.

Navigation - Ausgangsposition

Auf dem HTML-Code basierenden Navigationsbeispiel vom bereits erwähnten CSS3 Tutorial wird den Eigenschaften für den Hover-Effekt ( Schritt 6 im Tutorial ) anstatt der Ausdehnung der Verlinkungen eine Animation zugewiesen. Hierzu wird der Animationsart "bounce" mit einer Laufzeit von 1 Sekunde gewählt.

Sliding Navigation
Abb. 1: Navigation in Ausgangsposition

CSS3 Tutorial - Sliding Navigation

Ziel dieses kleinen Tutorials soll es werden den "Kern der Navigationspunkte" aus den Listenpunkten "herausfallen" zu lassen und das ganz ohne JavaScript. Um die Benutzerführung für dieses Navigationkonzept noch ein wenig mehr zu unterstreichen und somit die Aufmerksamkeit auf diese zu erhöhen, soll die angestrebte Animation zudem noch wiederholt werden. Die Eigenschaft animation-iteration-count steht hierbei für jeweils eine zurückgelegte "Strecke". Mit @keyframes lassen sich hierbei verschiedene Arten von Zuständen der CSS-Animation definieren. Der Grundzustand wird in einem solchen Anwendungsfall von der Ausgangsposition "from" ( margin:0 40px 0 0; ) und der Positionsveränderung "to" ( margin:120px 40px 0 0; ) definiert. Der veränderte Wert für den Außenabstand ( Wert für margin-top von 0px auf 120px ) des Links im Moment der Fokusierung soll den Animations-Effekt aufgrund der zurückgelegten "Strecke" ein wenig zusätzlich verdeutlichen.

Code-Beispiel
li a:hover,
li a:focus,
li a:active {
  -webkit-animation-name:bounce;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:4;
  -webkit-animation-direction:alternate;
  }
  @-webkit-keyframes bounce{from{margin:0 40px 0 0;}
    to{margin:120px 40px 0 0;}
}

Die CSS3-Eigenschaft animation-direction gibt hierbei an, ob die Bewegung des Navigationspunktes alternierend oder fortwährend auf identische abgespielt werden soll. Der Wert alternate sorgt hierbei für in wesentlich flüssigeres Bewegungsverhalten ( siehe Abb.2 ) als der ebenfalls für diese Eigenschaft zur Verfügung stehende Wert normal.

Sliding Navigation - The Bounce-Effect
Abb. 2: Bewegungsverhalten ( "Bounce-Effect" ) der Navigationspunkte

Browser-Support - CSS Animation

Da diese CSS3 Eigenschaft in Sachen Browser-Support weniger Unterstützung als die Eigenschaft Border-Radius besitzt, können den aktuellen Analysedaten entsprechend "nur" knapp 20% der Besucher dieses Blogs die korrekte Ausführung dieser CSS3-Eigenschaft zu sehen bekommen. Denn bisher unterstützen lediglich die aktuellen Safari- und Chrome-Versionen dieses CSS3-Feature.

Sliding Navigation - The Demo

Wenn der Browser mit dem du dieses CSS3-Tutorial besuchst Animations-Eigenschaften unterstützt, dann dürfte die folgende Darstellung in etwa Abbildung 2 entsprechen:

View Tutorial Demo

Fazit

Diejenigen von Euch, die die erwähnten Browser verwenden, besitzen somit ein funktionierendes Navigationskonzept, welches ohne jegliche Grafiken und oder Hintergrundbilder und ohne JavaScript auskommt! Meiner Meinung nach durchaus interessante Aussichten die uns da in Zukunft erwarten. Bei allen anderen Browsern dürfte das Endresultat, sofern diese die CSS-Eigenschaft "border-radius" unterstützen, der Abbildung 1 entsprechen ( ohne jegliche Bewegung versteht sich ). Wann und in welche Form diese Eigenschaften allerdings auch von den gängigen Browsern unterstützt werden, steht allerdings in den Sternen.

Ähnliche Artikel zu diesem Thema:
  1. Marcel 24 Feb 2010, 10:40

    Das nenne ich doch mal ein Feature, auf dem sich aufbauen lassen sollte. Schade nur, dass bisher so wenige Browser dies unterstützen. Einfacher geht es wirklich kaum.

    Danke für diese kleine Einführung in die CSS3-Eigenschaft "Animation"!


  2. Eve 24 Feb 2010, 11:29

    Na da bin ich ja froh das ich mit einem "richtigen Browser" unterwegs bin ;o)


  3. Markus L
    25 Feb 2010, 08:13

    ich hab auch wohl den "richtigen" aber ne seite jetzt nur für mich zu machen find ich etwas "doof". trotzdem danke für den weiteren einblick, ich freu mich drauf!!

    lg


  4. Andy 02 Mär 2010, 14:44

    Interessantes Tutorial. Die Firefox-Version 3.7a1 unterstützt dieses Feature im übrigen jetzt auch, damit dürften noch mehr Anwender in den Genuss dieser CSS3-Eigenschaft kommen.


  5. Webstandard-Team
    02 Mär 2010, 14:47

    @Andy: Während des Testens eines neuen CSS3-Tutorials, habe ich mir diese Version auch bereits auf den Rechner gepackt und mit Begeisterung festgestellt, dass somit mehr als 85% aller Besucher dieses Blogs auch dieses Tutorial korrekt angezeigt bekommen würden, sofern diese Firefox-Version offiziell wird und sie diese updaten ;o)


  6. Valentin 08 Feb 2012, 14:38

    Hey,

    Ist ein wenig veraltet für das erste Ergebnis bei Google wenn man nach "css3 animation tutorial" sucht und auf "Seiten auf Deutsch" klickt.

    Firefox sowie Opera unterstützen die Animationen mitlerweile. Man braucht bei Firefox einfach -moz-keyframes oder -moz-animation dranzuhängen.

    Freundliche Grüsse,

    Valentin


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage