Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: transition, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)

Transition (allgemein)

Kurzschreibweise von transition-property, transition-duration, transition-timing-function und transition-delay. Steuert eine Transition (Übergang) eines HTML-Elements.

CSS-Eigenschaft: transition
KurzbeschreibungWerteStandardwertKategorieHinweis
Transition (allgemein)see individual properties
Allgemein:
Animierte Inhalte
CSS 3:
Transitions
Neu in CSS 3
 

Folgendes ist beim Einsatz von transition zu beachten:

  • transition ist die Kurzschreibweise für transition-property, transition-duration, transition-timing-function und transition-delay.
    • transition-property definiert die CSS-Eigenschaft, die mit der transition versehen werden soll.
    • transition-duration bestimmt die Dauer der transition. Zulässige Werte sind Sekunden oder Millisekunden, die Schreibweise ist s bzw. ms.
    • transition-timing-function steuert das Geschwindigkeits­verhalten der transition.
    • transition-delay definiert eine Verzögerung einer transition. Werte werden ebenfalls Sekunden oder Millisekunden angegeben. Negative Werte sind zulässig, das genaue Verhalten unter transition-delay.
  • Pflichtangaben sind transition-property und transition-duration, ohne diese kommt es zu keiner Darstellung der transition. Die beiden anderen Parameter sind optional und werden durch die Standardwerte ergänzt, falls diese nicht angegeben ist. Default sind ease für das Geschwindigkeits­verhalten und 0s für die Verzögerung.
  • Die einzelnen Parameter können fast in beliebiger Ordnung notiert werden. Lediglich die Reihenfolge der Zeitangaben ist nicht beliebig und für die Darstellung relevant: Der erste Zeitwert in der Kurzschreibweise wird als Dauer, der zweite wird als Verzögerung umgesetzt.
  • Die einzelnen Parameter werden durch Leerzeichen voneinander getrennt. Es können in einem Ausdruck mehrere transition definiert werden. Die einzelnen Transition-Blöcke werden mit einem Komma voneinander getrennt.
  • Eine Übersicht von transitionierbaren Eigenschaften ist unter all-transition-properties.html zu finden. Dort ist jede Box mit einer anderen CSS-Eigenschaft zu sehen. Beim Überfahren mit der Maus oder auch beim Durchtabben wird die jeweilige transition dargestellt.
  • Nicht alle CSS-Eigenschaften sind in allen Browsern mit einer transition zu versehen. Safari 5, Firefox 8 unterstützen die meisten Eigenschaften. Opera 11 steigt bei einzelnen Eigenschaften aus, Internet Explorer 9 unterstützt keine Transition. Im Einzelfall muss die jeweilige Eigenschaft getestet werden. Beispielsweise treten Probleme auf, wenn die transition die eine Breite von 200px auf 100% (Wechsel der Maßeinheit) verändern soll. Ebenfalls können Probleme auftauchen, wenn eine transition für padding definiert wird (Einsatz von Kurzschreibweisen). Hier kann die Angabe der einzelnen Parameter padding-top usw. hilfreich sein.
Browserunterstützung von transition
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
-webkit-j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
-webkit-j
Version: 10Version: 11Version: 12
n-o-j

Hinweis

Eine umfassende Einführung in Transitions ist bei den Webkrauts zu finden: CSS3 im Praxistest: Transition

Eine Transition ist mit dem Übergang von Zuständen zu beschreiben. Bei einem herkömmlichen Mouseover wird über das :hover das Aussehen eines Elements verändert. Der Zustand des Elements schaltet jedoch einfach nur um, von jetzt auf gleich.

Über eine Transition können Übergänge zwischen den beiden Zuständen definiert werden, sodass sich das Aussehen des HTML-Elements über eine bestimmte Dauer aus dem Anfangszustand in den Endzustand verwandelt.

Effekte einer Transition waren bislang nur über JavaScript oder Flash möglich. Langfristig bedeutet das, dass solche Umwege über Plugins oder Skripte der Vergangenheit angehören werden.

Transition verursachen immer eine Rechenleistung im Browser und ist damit auch abhängig von der Leistung des Betriebssystems. Ein schwacher Computer oder zu viel gleichzeitig laufende Transitions können Ursache dafür sein, dass die Übergange "ruckelig" und nicht flüssig darstellt werden.

Weiterführende Informationen zu transition:



Beispiele

HTML:

<div id="example-1">transition</div>

CSS:

#example-1 {
   border: 20px solid #999;                
   padding: 20px;
 
   /* Firefox */
   -moz-transition: border-color 3s;
 
   /* Safari und Chrome */
   -webkit-transition: border-color 3s;
 
   /* Opera */
   -o-transition: border-top-color 3s,border-right-color 3s,border-bottom-color 3s,border-left-color 3s;
   /* benötgt unterstützt die Kurzschreibweise nicht, hier muss die Rahmenfarbe für jeden einzelne Seite angegeben werden. */
 
   /* Internet Explorer */
   -ms-transition: border-color 3s;
 
   /* Standard */
   transition: border-color 3s;
}
#example-1:hover {
    border-color: red;
}
/* Minimalangabe für Transition ist die transition-property sowie eine transition-duration. */
Beispiel nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11W3C: 12.1
Safari
-webkit-: 5
Google Chrome
-webkit-: 10

Beispiel Nr. 1 So sieht's aus:

transition
 

HTML:

<div id="example-2">transition</div>

CSS:

#example-2 {
   border: 1px solid #333;                
   padding: 20px;
   height: 20px;
   background-color: lime;
 
   /* Firefox */
   -moz-transition: height 2s linear 0.5s;
 
   /* Safari und Chrome */
   -webkit-transition: height 2s linear 0.5s;
 
   /* Opera */
   -o-transition: height 2s linear 0.5s;
 
   /* Internet Explorer */
   -ms-transition: height 2s linear 0.5s;
 
   /* Standard */
   transition: height 2s linear 0.5s;
}
#example-2:hover {
    height: 150px;
}
/* Transition der Höhe mit einer Anfangsverzögerung. */
Beispiel nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11W3C: 12.1
Safari
-webkit-: 5
Google Chrome
-webkit-: 10

Beispiel Nr. 2 So sieht's aus:

transition
 

HTML:

<div id="example-3">transition</div>

CSS:

#example-3 {
   border: 1px solid #333;                
   padding: 20px;
   background-color: green;
   font-size: 20px;
   color: white;
 
 
   /* Firefox */
   -moz-transition: font-size 3s, background-color 1s, color 1s;
 
   /* Safari und Chrome */
   -webkit-transition: font-size 3s, background-color 1s, color 1s;
 
   /* Opera */
   -o-transition: font-size 3s, background-color 1s ,color 1s;
 
   /* Internet Explorer */
   -ms-transition: font-size 3s, background-color 1s, color 1s;
 
   /* Standard */
   transition: font-size 3s, background-color 1s, color 1s;
}
#example-3:hover {
   font-size: 50px;
   background-color: yellow;
   color: black;
 
}
/* Gleichzeitige Transition von Hintergrundfarbe und Schriftgröße */
Beispiel nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11W3C: 12.1
Safari
-webkit-: 5
Google Chrome
-webkit-: 10

Beispiel Nr. 3 So sieht's aus:

transition
 

HTML:

<div id="example-4">transition</div>

CSS:

#example-4 {
   border: 1px solid #333;                
   padding: 20px;
   width: 280px;
   background-color: lime;
   color: black;
 
   /* Firefox */
   -moz-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
 
   /* Safari und Chrome */
   -webkit-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
 
   /* Opera */
   -o-transition: background-color 2s 2s, color 2s 1s, width 4s;
 
   /* Internet Explorer */
   -ms-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
 
   /* Standard */
   transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
}
#example-4:hover {
   background-color: blue;
   color: #fff;
   width: 140px;
 
}
/* In diesem Beispiel wird Hintergrundfarbe und Breite mit mehreren Transitions versehen. Pro Eigenschaft sind mehrere Transitionsblöcke angegeben. 
 
Opera unterstützt steps() nicht. Gibt man steps() für Opera an, wird diese Regel als fehlerhaft erkannt und nichts mit einem Übergang dargestellt, auch wenn Teile vom Ausdruck richtig sind. In diesem Beispiel wurde die timing-function für den Opera weggelassen. */
Beispiel nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11W3C: 12.1
Safari
-webkit-: 5
Google Chrome
-webkit-: 10

Beispiel Nr. 4 So sieht's aus:

transition
 

HTML:

<div id="testcase-vendor">transition</div>

CSS:

#testcase-vendor {
   border: 1px solid #333;                
   padding: 50px;
   background-color: blue;
   font-size: 20px;
   color: white;
 
   -moz-transition: background-color 1s;
   -webkit-transition: background-color 1s;
   -o-transition: background-color 1s;
   -ms-transition: background-color 1s;
}
#testcase-vendor:hover {
   background-color: red;
}
Beispiel nur für: Firefox
-moz-: 5
Opera
-o-: 11
Safari
-webkit-: 5
Google Chrome
-webkit-: 10

Testbeispiel: Schreibweise mit
Vendor-Präfix

transition
 

HTML:

<div id="testcase-standard">transition</div>

CSS:

#testcase-standard {
   border: 1px solid #333;                
   padding: 50px;
   background-color: blue;
   font-size: 20px;
   color: white;
 
   transition: background-color 1s;
}
#testcase-standard:hover {
   background-color: red;
}
Beispiel nur für: Firefox
W3C: 16
Opera
W3C: 12.1
Google Chrome
W3C: 26

Testbeispiel: Standardschreibweise

transition
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 7.285 sec.

Browser-Marktanteile