Signalwerk - Web-Code-Library

CSS-Transition

CSS3 eröffnet die Möglichkeit, CSS-Eigenschaften zu animieren. In diesem Beispiel Schriftfarbe eines Links und dessen Hintergrundfarbe.

a {
color:gray;
-moz-transition-property:color,background-color;
-moz-transition-duration:.5s;
-webkit-transition-property:color,background-color;
-webkit-transition-duration:.5s;
-o-transition-property:color,background-color;
-o-transition-duration:.5s;
transition-property:color,background-color;
transition-duration:.5s;
}
a:hover {
color:#ffffff;
background-color:#999;
}

Um eine möglichst große Zahl von Browsern anzusprechen, wird deren proprietäre Schreibweise eingebunden (Mozilla, Webkit, Opera). Die Standardschreibweise wird derzeit nicht von allen Browsern unterstützt, sie sollte am Ende der Anweisungen positioniert werden.

Infos zu den zwei weiteren Transition-Eigenschaften transition-timing-function (ease, linear, step-end, steps) und transition-delay: Using CSS transition

Zurück zur Web-Code-Lib