Programmieren lernen | Codebeispiele | Jobbörse | Webentwicklung

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 DU der erste!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.