Transitions / CSS3 schnell erklärt

Objekte smoothen lassen

Beitrag am erstellt von

Sie möchten Beispielsweise ein Hover Effekt erstellen der langsam von einem Zustand zum anderen welchselt? Das geht jetzt mit der neuen Version CSS3 und der Funktion Transitions. Man kann bestimmen welches Objekt verändert werden soll, wie lange es dauern soll bis es den neuen Zustand erreicht hat und welche Linie bzw. Kurve gewählt werden soll. In diesen Tutorial erkläre ich euch das Thema Transitions kurz und ohne viel Text. Ausführliche Versionen mit viel mehr Inhalt finden Sie ganz unten bei den Quellenangaben.

transition: [Objekt] [Länge] [Übergang] [Verzögerung] ;

Transitions Länge:

Alle Objekte | 200ms | aus- und einblenden
200ms
-webkit-transition: 200ms ease-in-out;
-moz-transition: 200ms ease-in-out;
-o-transition: 200ms ease-in-out;
transition: 200ms ease-in-out; 
    
Alle Objekte | 1.5 Sekunden | linear
1.5 Sekunden
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out; 
    

Transitions Übergänge:

Alle Objekte | 1 Sekunde | linear
linear
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear; 
    
Alle Objekte | 1 Sekunde | aus- und einblenden
aus- und einblenden
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out; 
    
Alle Objekte | 1 Sekunde | ausblenden
ausblenden
-webkit-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-o-transition: 1s ease-out;
transition: 1s ease-out; 
    
Alle Objekte | 1 Sekunde | einblenden
einblenden
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in; 
    
Alle Objekte | 1 Sekunde | 5 Stufen
5 Stufen
-webkit-transition: 1s steps(5,start);
-moz-transition: 1s steps(5,start);
-o-transition: 1s steps(5,start);
transition: 1s steps(5,start); 
    

Eigenschaften die Kompatibel sind

Eigenschaften Werte
background-color Farbe
background-image Nur für Verläufe
background-position Prozent, Länge
border-bottom-color Farbe
border-bottom-width Länge
border-color Farbe
border-left-color Farbe
border-left-width Länge
border-right-color Farbe
border-right-width Länge
border-spacing Länge
border-top-color Farbe
border-top-width Länge
border-width Länge
bottom Länge, Prozent
color Farbe
crop Rechteck
font-size Länge, Prozent
font-weight Nummer
grid-* Mehrere
height Länge, Prozent
left Länge, Prozent
letter-spacing Länge
line-height Nummer, Länge,
Prozent
margin-bottom Länge
margin-left Länge
margin-right Länge
margin-top Länge
max-height Länge, Prozent
max-width Länge, Prozent
min-height Länge, Prozent
min-width Länge, Prozent
opacity Nummer
outline-color Farbe
outline-offset integer
outline-width Länge
padding-bottom Länge
padding-left Länge
padding-right Länge
padding-top Länge
right Länge, Prozent
text-indent Länge, Prozent
text-shadow Schatten
top Länge, Prozent
vertical-align keywords, Länge,
Prozent
visibility Sichtbarkeit
width Länge, Prozent
word-spacing Länge, Prozent
z-index Ganze Zahlen
zoom Nummer