Transition Color

Transition ist ein beliebtes Styleelement unter HTML5 und CSS3. Älter Browser unterstützen die Funktion leider nicht mehr. Dort wird dann ein einfacher hover-Effekt angezeigt, statt der Transition-Animation.

In diesem Fall möchten wir Transition für die Animation von Textfarbverläufen erklären.

Mit transition:color sprechen wir die Farbe an und können mit der dahinter folgenden Zeitangabe die Effektlänge einstellen. Das dies jedoch funktioniert, müssen wir den Text oder Link mit einem :hover versehen. Erst dann wird der Effekt sichtbar.

CSS3 Code

a{  
  color:#000000;
  text-decoration:none;
}

a:hover{
  color:#ffff00; 
  transition:color 300ms;
}

Beispiel (einfach kopieren und in eure Seite einfügen):

<a href="http://www.sourcecodeblogger.wordpress.com/">Link</a>

Beispiel online

Transition Slide

Transition ist ein beliebtes Styleelement unter HTML5 und CSS3. Älter Browser unterstützen die Funktion leider nicht mehr. Dort wird dann ein einfach hover-Effekt angezeigt, statt der Transition-Animation.

Transitions können vielseitig eingesetzt werden, beispielsweise um Objekt zu vergrößern oder zu sliden. In diesem Beispiel geht es um das Sliden von Objekten von Rechts nach Links:

Der „width“ und „height“ Wert kann nach belieben angepasst werden, um die Boxgröße mit den darin angezeigten Objekten einzustellen. Das Objekt wird durch den left-wert „-200px“ von Rechts nach Links bewegt. Ändern wir den Wert auf „200px„, so bewegt sich das Objekt von Links nach Rechts

Beispiel (einfach kopieren und in eure Seite einfügen):

CSS3 Code (transition für alle Browservarianten enthalten)


.slide{
 position: absolute;
 background-color:#FFFF00;
 cursor:pointer;
 width:270px;
 height:228px;
 margin:0 0 0 207px;
 border-left:5px solid #ececec;
 transition: all 0.9s linear;
 -webkit-transition: all 0.9s linear;
 -moz-transition: all 0.9s linear;
 -o-transition: all 0.9s linear;
 -ms-transition: all 0.9s linear;
}

.linksslide:hover{
 left:-200px;
}

HTML5 Code


<div class="slide linksslide">Eure Objekte, Texte oder Bilder</div>

Beispiel online