CSS3 Animation mit CSS Transitions
Mit CSS3 ist es spielend einfach ohne jQuery Bilbiotheken Animationen abzuspielen. CSS Transitions sind ein sehr umfangreiches Thema mit dem man ein paar Seiten füllen könnte. Im folgenden Beispiel zeige ich aber erstmal wie man schöne Mouseover Effekte erzielen kann.
HTML
<div class="container">
Hier mit der Maus drüberfahren
</div>
CSS
.container {
text-align: center;
width: 300px;
}
.container:after {
background-color: #33ccff;
content: "";
display: block;
height: 2px;
margin: 5px auto;
width: 10%;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
.container:hover:after {
width: 50%;
}
Noch keine Kommentare vorhanden. Sei der erste!
Weitere Beiträge
TYPO3 | Layout Dropdown bei fluid_styled_content nutzen
ViewHelper Pagination in eigener Extbase Extension nutzen
OXID 6 | Modul erstellen mit Namespaces und Composer
Eine eigene TYPO3 Extension (Extbase/Fluid) mit System Kategorien erstellen (Teil 2)