CSS3 Transitions Beispiel: einfache Slide-Buttons

Mit wenigen Zeilen CSS lassen sich schön aufslidende Buttons erstellen. Das spannende dabei ist, dass auch die Bewegung vollständig mit CSS realisiert wird und keinerlei JavaScript o.ä. notwendig ist.

Aussehen könnte das ganze wie folgt (wobei sich natürlich sowohl das Styling als auch die Slide-Geschwindigkeit anpassen lassen):

Entscheidend ist der Einsatz des Befehls "transition" (das komplette Codebeispiel folgt am Ende), der einen Effekt beim Wechsel zwischen zwei Zuständen (in dem Fall normal zu hover) einfügt.
        
        transition: all 0.9s ease 0s;
        
Der CSS3-Befehl setzt sich aus 4 Bestandteilen zusammen:       

• all = transition-property. Hier: all, also bei allen Zustandsänderungen. Könnte in dem Beispiel auch "width" sein, da wir ja den Effekt über die Änderungen der Breite erreichen.
• 0.9s = transition-duration. Zeit bis die transition ausgeführt ist, also wie lange dauert es, bis der Button aufgeslidet ist.
• ease = transition-timing-function. Weitestgehend Effektart, in dem Fall ein weiches Einblenden. Weitere Optionen wären linear, ease-in, ease-out, ease-in-out, cubic-bezier.
• 0s = transition-delay. Wann startet der Effekt.

Erfolgreich getestet mit FF 31, Chrome 37, Opera 22, IE 11. Der Safari hat mit dem nativen CSS3 seine Problem, Abhilfe schafft aber die Zeile "-webkit-transition: all 0.9s ease 0s;".

Codes des obigen Beispiels:

        <style>
            /* Slide */
            div.slidebutton {
                /* relevante Zeilen */
                transition: all 0.9s ease 0s;
                width: 50px;
            }
            div.slidebutton:hover { width:160px; }
           
            /* styling */ 
            div.slidebutton  {
                background: none repeat scroll 0 0 rgb(229, 229, 229);
                border: 2px solid #e0e0e0;
                border-radius: 8px;
                clear: both;
                height: 30px;
                line-height:30px;
                margin: 20px;
                overflow: hidden;               
            }        
            div.slidebutton span.slideteaser { display:inline-block; text-align:center; width:50px; margin-right:10px; }
            div.slidecontent { width:160px; }
            div.slidebutton a { text-decoration:none; color:#464646; }
            div.slidebutton span.slidetext { font-size:0.8rem; }
        </style>

        <div class="slidebutton">
            <a href="http://www.itfoo.de" target="new">
                <div class="slidecontent">
                    <span class="slideteaser">
                        Text A
                    </span>

                    <span class="slidetext">Beschreibung A</span>
                </div>
            </a>
        </div>
        <div class="slidebutton">
            <a href="https://www.youtube.com/user/itfoo1de" target="new">       
                <div class="slidecontent">
                    <span class="slideteaser">
                        Text B
                    </span>
                    <span class="slidetext">Beschreibung B</span>
                </div>
            </a>
        </div>
        <div class="slidebutton">
            <a href="https://twitter.com/itfoo" target="new">
                <div class="slidecontent">
                    <span class="slideteaser">
                        Text C
                    </span>
                    <span class="slidetext">Beschreibung C</span>
                </div>
            </a>
        </div>