Webkrauts » CSS 3 im Praxistest: Transition

Artikel

CSS 3 im Praxistest: Transition

20. Türchen des Webkrauts-Adventskalenders

Im Adventskalender 2009 hat Eric Eggert über »Transitionen und Animationen« geschrieben und darüber, was in der Zukunft mit neuen CSS-3-Eigenschaften möglich sein wird. Vor zwei Jahren waren Webworker auf die Webkit-Browser Safari und Chrome beschränkt, wenn sie eine Transition umsetzen wollten. Opera und Firefox haben nachgezogen und unterstützen heute ebenfalls animierte Inhalte. Für den aktuellen Praxistest wurden die Versionen Opera 11, Internet Explorer 9, Firefox 8, Safari 5 und Google Chrome 14 berücksichtigt.

Das Transitions-Modul des CSS-3-Standards ist mit fünf Eigenschaften überschaubar. Im Gegensatz zu Animationen und Transformationen ist der Einsatz einfach, die einzelnen Eigenschaften intuitiv und sicher der leichteste Einstieg in den Bereich der animierten Inhalte.

Eine Transition *) ist als die fließende Veränderung einer CSS-Eigenschaft auf einer Zeitachse zu verstehen. Wo sich bislang bei einem Mouseover eine Farbe wie auf Knopfdruck änderte, kann sich diese über eine Transition langsam in die andere Farbe verwandeln.

Mindestangaben für eine Transition

Pflichtparameter sind transition-property und transition-duration. Über transition-property geben Webworker die CSS-Eigenschaft an, die sie mit einer Transition versehen wollen. Über transition-duration definiert er die Zeit, die eine fließende Veränderung dauern soll. Eine Minimalangabe sieht beispielsweise so aus (weiter unten findet ihr die Schreibweisen für die einzelnen Browser. Alle Eigenschaften sind erst mal in der Standardschreibweise des W3C gezeigt):

div {
    background-color: red;
    transition-property: background-color;
    transition-duration: 1.5s;
}

oder auch als Kurzschreibweise (Shorthand):

div {
    background-color: red;
    transition: background-color 1.5s;
}

Für die Transition ist immer ein Anfangs- und Endzustand notwendig. In diesem Beispiel ist der Endzustand über das Pseudo-Attribut :hover definiert, kann aber auch über eine Klasse angegeben sein, die über JavaScript einem HTML-Element zugewiesen wird.

div:hover {
    background-color: blue;
}

   transition: background-color

.beispiel-1: Die Hintergrundfarbe der Box wechselt beim überfahren mit der Maus in 1,5 Sekunden von rot auf blau (im Internet Explorer ohne Übergang, da Transitions nicht unterstützt werden).

Parameter für eine Start-Verzögerung

Als weitere Eigenschaft steht transition-delay zur Verfügung, welche die Transition entsprechend verzögert.

Sowohl für transition-duration als auch für transition-delay werden Zeitwerte erwartet, entweder in Sekunden oder Millisekunden mit den Abkürzungen für die Einheiten s oder ms, z.B. 1.5s oder 1500ms (was hier dieselbe Zeit ist). Das W3C hat eine Liste mit Zeitangaben zusammengestellt: http://www.w3.org/TR/css3-values/#time.

Unterschiedliche Geschwindigkeiten auf der Zeitachse

Die wahrscheinlich umfangreichste Eigenschaft ist transition-timing-function. Darüber wird das Geschwindigkeitsverhalten bestimmt, mit der sich die Transition verhält. Für die »Zeitfunktion« stehen folgende Werte zur Verfügung:

Schlüsselworte (Keywords)
- ease (Standard): Die Transition beginnt verlangsamt, nimmt schnell Geschwindigkeit auf und endet langsam. Zwei Drittel der Transition ist nach der halben Zeit dargestellt.
- ease-in: Die Transition beginnt langsam, endet schnell.
- ease-out: Die Transition startet schnell, endet langsam.
- ease-in-out: Die Transition beginnt und endet langsam, in der Mitte ist die Geschwindigkeit am höchsten.
- linear: Gleichbleibende Geschwindigkeit, keine Verlangsamung am Anfang oder Ende der Transition.
cubic-bezier()
- cubic-bezier(x1, y1, x2, y2) steuert die Transition nach eigenen Angaben. Die ersten zwei Werte bestimmen die Startgeschwindigkeit, der dritte und vierte Wert die Endgeschwindigkeit. Der Geschwindigkeitsverlauf ergibt sich aus der Kurve, welche Start- und Endpunkt verbindet. Alle vier Parameter sind Pflichtparameter.
- cubic-bezier() ist die Formel, auf deren Grundlage der Geschwindigkeitsverlauf berechnet wird. Hinter allen Schlüsselworten verbirgt sich eine cubic-bezier()-Definition mit konkreten Werten. Webdesigner, die sich für das mathematische Modell von cubic-bezier() interessieren, finden unter folgendem Link weiterführende Information: developer.mozilla.org/en/CSS/timing-function
steps()
- bestimmt keinen fließenden, sondern einen Übergang über Zwischenstadien, vergleichbar mit einer Uhr, die von Sekunde zu Sekunde springt, und dort jeweils eine Sekunde verharrt.
- steps(nr, [start|end]) benötigt immer zwei Parameter:
  - Als erster wird die Anzahl der Schritte definiert, in denen die Transition angezeigt werden soll.
  - Der zweite Parameter hat die möglichen Werte start oder end. Damit wird bestimmt, ob ein Schritt vor oder nach einem Zeitintervall dargestellt werden soll. Was kompliziert klingt, ist anhand eines Beispiels leichter zu erklären: Ihr habt einen Lichtschalter, den ihr in fünf Sekunden anschalten sollt. Allerdings nur am Anfang oder Ende der fünf Sekunden. step (1, start) bedeutet, ihr schaltest den Schalter sofort an und es ist sofort hell. Oder ihr wartet fünf Sekunden und schaltest das Licht dann an, das wäre step(1,end). Beides Mal ist es nach fünf Sekunden hell, nur das »ab wann« wird durch den zweiten Parameter in steps() bestimmt.
  - step-start ist ein Schlüsselwort und entspricht steps (1,start)
  - step-end ist ebenfalls ein »Keyword« und entspricht steps (1,end). Beide Schlüsselworte sind also fest definiert auf einen Schritt in der Transition.
- steps() ist W3C nur im Entwicklungsbereich des Standards zu finden, im »Working Draft« des W3C taucht dieser Parameter für die transition-timing-function noch nicht auf. Allerdings werden sie bereits von Firefox, Safari und Chrome unterstützt.
Eine sehr anschauliche Darstellung der transition-timing-function ist unter http://peter.sh/experiments/css3-transition-timing-functions/ zu finden.

Beispiel für steps()

An folgendem Beispiel wird das Verhalten von steps() deutlich (die Mehrfachangabe innerhalb einer Eigenschaft wird weiter unten beschrieben).

.beispiel-2 {
    background-color: #FFFF00;
    width: 200px;
    transition-property: width, background-color;
    transition-duration: 5s, 5s;
    transition-timing-function: steps(10,start), steps(5,end);
}
.beispiel-2:hover {
    width: 600px;
    background-color: #ff0000;
}

steps(10,start)

.beispiel-2: Die gelbe Box wird in 10 Einzelschritten auf eine Breite von 600px gedehnt, die Farbe wechselt in 5 Steps. Internet Explorer unterstützt generell keine Transition, Opera kennt die steps() nicht und stellt den Übergang mit der Zeitfunktion ease dar.

Kurzschreibweise `transition`

Über die Kurzschreibweise transition werden die Werte für Eigenschaft, Dauer, Zeitfunktion und Verzögerung in einem Ausdruck geschrieben. Die einzelnen Parameter werden durch Leerzeichen voneinander getrennt. Dabei können die einzelnen Parameter 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.

Gültige »shorthand«-Beispiele können so aussehen:

transition: width 3s linear100ms;

/* oder */
transition: 1s 1.5s padding-bottom ease-in;

/* oder auch nur */
transition: color 2s;

Pflichtangabe ist die CSS-Eigenschaft, die mit einer Transition versehen werden soll, Sinn macht die Angabe erst mit der Zeitangabe. Ohne diese wird die Transition mit einer Zeit von 0 Sekunden (Standard für transition-duration) angezeigt, der Endzustand wäre also sofort erreicht.

Mehrere Transitions gleichzeitig definieren

Neben der Kurzschreibweise ist es möglich, mehrere Transitions in einem Ausdruck zu definieren.

Dabei werden die einzelnen Werte über ein Komma (,) getrennt geschrieben. Sind die Angaben über die einzelnen Eigenschaften definiert, werden die Werte entsprechen ihrer Position in der Definition zusammengeführt: Die erste CSS-Eigenschaft aus transition-property wird mit einer Dauer des ersten Eintrags aus transition-duration und jeweils den ersten Werten für Zeitfunktion und Verzögerung dargestellt. Gleiches gilt für die jeweils zweiten und dritten Angaben.

div {
    background-color: #caffee;
    color: blue;
    width: 200px;
    transition-property: background-color, color, width;
    transition-duration: 3s, 2s, 3000ms ;
    transition-timing-function: linear, ease-in, ease;
    transition-delay: 0s, 2500ms, 0s;
}
div:hover {
    background-color: blue;
    color: yellow;
    width: 100%;
}


    transition-property: background-color, color, width;
    transition-duration: 3s, 2s, 3000ms ;
    transition-timing-function: linear, ease-in, ease;
    transition-delay: 0s, 2500ms, 0s;

.beispiel-3: Kombination mehrerer Transitions: Der Hintergrund verfärbt sich sofort von rot in blau, die Veränderung des Textes selber ist mit einer Verzögerung konfiguriert. Bei der Breite schafft es nur der Firefox, diese von einem Pixel-Wert zu einem Prozent-Wert umzuwandeln – Opera, Safari und Chrome ignorieren beim Wechsel der Einheiten die Transition für width.

Kurz und knapp: Mehrfachangaben in Kurzschreibweisen

In der Kurzschreibweise wird eine Transition über [Eigenschaft][Dauer][Timing-Funktion][Verzögerung] definiert, eine zweite Transition mit allen Angaben wird auch hier mit einem Komma (,) von der ersten Definition getrennt, so können (theoretisch) beliebig viele Übergänge über nur ein transition definiert werden:

div {
    transition: background-color 3s linear ,  color 2s linear 2s ;
}

Unterschiedliche Geschwindigkeit für »hin und zurück«

Die Darstellung der Transition läuft in beide Richtungen mit den gleichen Einstellungen. Allerdings können unterschiedliche Parameter die Darstellung zur Enddefiniton hin und für die rückläufige Transition definiert werden. Wie ihr im folgenden Beispiel sehen könnt, stehen im Endstatus div:hover andere Zeiten als im div, in dem die Ausgangssitution definiert ist.

div {
    padding: 10px;
    background-color: white;
    transition: padding 300ms ,background-color linear  300ms 0s;
}
div:hover {
    padding: 10px 200px;
    background-color: #00f000;
    transition: padding 3s ,background-color linear  1s 2s;
}

Transition

.beispiel-4: Beim Mouseover werden die Zeitwerte aus der :hover-Angabe verwendet, die Box zieht sich langsam auf und ändert mit einer Verzögerung die Hintergrundfarbe. Bein Mouseout greifen die Werte aus der ersten Regel, Box und Farbe schnellen in 0.3 Sekunden auf die Ursprungsdarstellung zurück.

Browserunterstützung

Transition-Eigenschaften werden in der Standardschreibweise von noch keinem Browser unterstützt. Internet Explorer bis zur Version 9 unterstützt Transition gar nicht, die anderen benötigen das jeweilige Vendor-Präfix:

Firefox: -moz-
Opera: -o-
Safari und Google Chrome: -webkit-
Internet Explorer: -ms- (ab Version 10)

So kann eine komplette Regel, um alle potentiellen Browser zu »erwischen«, schon mal recht umfangreich sein:

#beispiel {
    margin-top: 100px;
    opacity: 0;

    /* Firefox */
    -moz-transition-property:    margin-top, opacity;
    -moz-transition-duration:    1s,0.5s;
    -moz-transition-delay:       1.0s,0s;

    /* Safari / Chrome */
    -webkit-transition-property: margin-top, opacity;
    -webkit-transition-duration: 1s,0.5s;
    -webkit-transition-delay:    1.5s,0s;

    /* Opera */
    -o-transition-property:      margin-top, opacity;
    -o-transition-duration:      1s,0.5s;
    -o-transition-delay:         1.5s,0s;

    /* Standard */
    transition-property:         margin-top, opacity;
    transition-duration:         1s,0.5s;
    transition-delay:            1.5s,0s;
}

Auch wenn die Standardschreibweise noch nicht unterstützt wird, sollte sie in der Regel nicht fehlen. Dieser Ausdruck sollte am Ende stehen, damit dieser greift, sobald ein Browser die Implementierung auf die Standardschreibweise umstellt.

Neben der Frage, welche Browser Transition unterstützen, steht aktuell aber auch wie Frage, welche CSS-Eigenschaften konkret unterstützt werden.

Was kann mit einem Übergang versehen werden?

Eine Liste der Eigenschaften, die mit einer Transition versehen werden können, ist beim W3C zu finden. Dabei werden die meisten Eigenschaften tatsächlich unterstützt. Ausnahmen sind beispielsweise vertical-algin oder border-spacing. Dort finden sich Eigenschaften wie visibility oder z-index, für die erst mal kein fließender Übergang sinnvoll klingt. visibility zum Beispiel springt bei einer Transition von visible zu hidden am Ende der Zeit auf hidden um. Im Zusammenhang mit anderen Transitions ist aber das Umschalten nach einer bestimmten Zeit oder Verzögerung durchaus denkbar.

Auf der Übersicht von transitionierbaren Eigenschaften ist jede Box mit einer anderen CSS-Eigenschaft zu sehen. Dort könnt ihr euch einen Eindruck verschaffen, wie sich die Transitions auswirken.

Was wie unterstützt wird, kann nur in einer Tendenz ausgedrückt werden: Alle Browser (außer dem Internet Explorer) unterstützen weitgehend alle definierten Eigenschaften. Safari, Chrome und Firefox sind dabei sicher am stärksten. Einschränkungen tauchen dann auf, wenn Regeln nicht sauber definiert sind. Opera, Safari und Chrome schaffen es beispielsweise nicht, eine Breite von 200px auf 100% umzuwandeln.

Kurzschreibweisen wie padding oder margin stellen für Opera Probleme dar. Obwohl Opera Eigenschaften wie margin-left oder padding-bottom in einer Transition darstellen kann, scheitert er bei der Angabe von margin bzw. padding in der Angabe von -o-transition-property. Die Webkitbrowser und Firefox haben mit Kurzschreibweisen keine Probleme.

Viele Transitions gleichzeitig zwingen den Browser gerne etwas in die Knie. Die komplexen Beispiele am Seitenende lassen Opera »stark arbeiten«, die Transition werden nicht in der Geschwindigkeit angezeigt, wie dort angegeben. Auch hier kommen Firefox und vor allem Safari und Chrome wesentlich besser hinterher.

Je nach Eigenschaft entsteht der Eindruck des Ruckelns. Dies hängt allerdings auch von der Eigenschaft ab. Ein font-weight kann zwar mit einer Transition versehen werden, allerdings sind die meisten Schriften auf den Rechnern in »normal« und »bold« hinterlegt. Eine Transition für font-weight von 100 zu 900 kann zwar definiert werden, wenn die Schrift jedoch nur in zwei Varianten vorliegt, kann eine Transition auch nur zwei Zustände darstellen. Ein fließender Übergang wird hier nicht entstehen.

An den Ausführungen wird deutlich, dass ein Urteil über »richtig« oder »falsch« nicht eindeutig getroffen werden kann. Vieles ist möglich, im Einzelfall muss der Webworker browserübergreifend intensiv testen.

Vorteile von Transition

Es ist ein reines Layout-Modul und kann von daher als »hübsche« Ergänzung eingesetzt werden, ohne dass ein Browser, der keine Transition unterstützt (mit Ausnahmen des Surf-Erlebnisses) in der Funktionalität eingeschränkt ist.
Transition erfordert kein JavaScript und kein Flash-Plugin, und hat von daher das Potential, (auf einen Browser beschränkt) 100% der Darstellung anzubieten, ohne dass sich der Frontendler Gedanken über das (lästige) Fallback für die 3% oder 5% machen muss, die JavaScript eventuell deaktiviert haben.

Nachteile von Transition

Der Nachteil liegt in der heute noch mangelnden Browserunterstützung, vor allem durch den Internet-Explorer. Solange ein großer Teil aller Surfer (und das unabhängig davon, welcher Browser das ist) eine Eigenschaft nicht unterstützt.

Experiment – Navigation mit Transition

Das komplette CSS-File mit den vollständigen Angaben für die folgenden, aber auch die Transtions auf dieser Seite, sind im transition.css zu finden.

Über eine UL wird folgende Navigation aufgebaut:

.beispiel-5: Auf Mouseover wird der Linkstext über ein text-indent nach links raus gezogen. Im link ist ein span mit dem gleichen Text, dieses wird über die Kaskade .beispiel-5 ul li a:focus span, .beispiel-5 ul li a:hover span ausgelöst und nach oben gezogen. Der Effekt klappt auch mit der Tastatur. Das funktionert gut im Firefox, Safari und dem Chrome; Opera verliert schon mal die Höhen, wenn die Navigation schnell und häufig mit der Mouse überfahren wird.

Experiment – Bilderrätsel

Das folgende Foto ist mit 150 DIVs überlagert, die jeweils 30 Pixel hoch und breit sind.

.beispiel-6: Beim überfahren mit der Maus werden die DIVs durchsichtbar (opacity) und werden über 7.5 Sekunden wieder schwarz. Das CSS dafür besteht nur aus wenigen Zeilen. Auch hier kommt der Opera in der Darstellung der Transitions nicht hinterher. Das Beispiel funktioniert nicht über die Tastatur.

Weiterführende Links

Umfangreiche Beispielsammlung: http://www.olivergast.de/wp-content/demos/transitions/index.html
Beispielsammlung für Safari und Chrome: http://www.html5-portal.de/css3-special.html
W3C Working Draft: http://www.w3.org/TR/2009/WD-css3-transitions-20091201/
W3C Editor's Draft: http://dev.w3.org/csswg/css3-transitions/#transition-timing-function

*) Transition ist mit »Übergang«, »Überleitung« oder »Wechsel« zu übersetzen. Im Gegensatz zu den verwandten Modulen Animations und Transformations, die im Deutschen auch ohne Übersetzung verständlich klingen – und vor allem auch als Verb ausgedrückt werden können (ein HTML-Element wird animiert oder transformiert), ist es schwierig, für Transition einen vergleichbaren Ausdruck in Deutsch zu finden, geschweige denn ein Verb, welches das Verhalten treffend beschreibt.
Gleichzeitig ist es wichtig, die drei Module klar voneinander zu trennen. Klar, eine Transition animiert ebenfalls ein HTML-Element, im Kontext von CSS ist es jedoch sinnvoll, auch sprachlich die klare Abgrenzung zu berücksichtigen. Von daher wird auf dieser Seite das Verb »animiert« gemieden und der Ausdrücke wie »mit einer Transition versehen« verwendet – auch wenn es etwas umständlich klingt.

Autoreninfo

Autorenfoto Stephan Heller [daik.de] Stephan Heller [daik.de] arbeitet seit 2004 als Freelancer. Er bietet als HTML und CSS Spezialist Frontend-Entwicklung, als ZEND Certified Engineer ebenso Backend-Entwicklung mit PHP und MySQL an.
Aktuell arbeitet er an einer umfassenden CSS-Referenz, welche alle CSS 2.1 und CSS 3 Eigenschaften bündelt: www.css-wiki.com.

Info:: CSS 3 im Praxistest: Transition ist Beitrag Nr. 1117
Autor:: Stephan Heller am 20. Dezember 2011 um 08:00
Kategorie:: Adventskalender 2011

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Danke für den Artikel. Sehr ausführlich beschrieben. Bin nur leider zur Zeit mit dem IE im Netz und kann die einzelnen Effekte nicht durchspielen.
Muß ich dann von zu Hause machen.

Kommentar by Klaus - 20. Dezember 2011 um 10:56
2.

Opera kann die in diesem Artikel vorgestellten Beispiele ebenso gut verarbeiten wie Firefox. Insofern stimmt die Wertung

Auch hier kommt der Opera in der Darstellung der Transitions nicht hinterher.

nicht – aktuelle Browserversionen vorausgesetzt.

Kommentar by Matthias Koch - 20. Dezember 2011 um 12:57
3.

Hey,
wirklich sehr cool. Habe mir nicht gedacht, das das mit so ein paar zeilen Code möglich ist!

Kommentar by Daniel - 20. Dezember 2011 um 13:23
4.

Sehr gut! Dass unterschiedliche Transitionen für "hin und zurück" möglich sind, war mir neu. Und mit step() könnte man eine selbstlaufende Bilder-Slideshow bauen. Ha!

Kommentar by André Olejko - 20. Dezember 2011 um 20:00
5.

danke.

Kommentar by rene - 20. Dezember 2011 um 23:44
6.

Hallo Zusammen,

vielen Dank für das Feedback – so macht das Schreiben Spaß!

Ein Frohes Fest! Stephan

Kommentar by Stephan Heller - 21. Dezember 2011 um 00:36
7.

Ganz kurz zu Beispiel 6 in Opera: es scheint mir, dass Opera, nachdem ein DIV transparent gemacht wurde, und es dann langsam wieder "opaque" wird, bei einem :hover zwar auch wieder nach transparent transitioniert, aber immer noch mit 7.5s anstatt gleich wieder auf transparent in 0s zu springen. Koennte ein Bug sein, oder etwas, das in der spec als Grenzfall nicht vollkommend spezifiziert wurde? Ich frag jedenfalls mal bei unseren Ingenieuren nach…

Kommentar by Patrick H. Lauke - 21. Dezember 2011 um 01:42
8.

Schöner Artikel der die Basics sehr gut abdeckt. Vielen Dank!
Eine weitere Ergänzung: Auf mobilen Devices lassen sich u.U. die Transitions flüssiger animieren wenn man die GPU aktiviert.

Kommentar by Finn - 21. Dezember 2011 um 11:34
9.

Kann man mit Transitionen auch beim Anklicken eines Links ein Soft-Scrolling, zu einer bestimmten Stelle innerhalb der Seite, realisieren?

Kommentar by Markus - 21. Dezember 2011 um 13:16
10.

Markus, soweit ich weis leider nicht. Da muss man schon mittels JavaScript den normalen "Sprung" zum Link-Ziel abfangen, vielleicht dann Transitions einsetzen, und danach den focus() per JS wieder setzten…

Kommentar by Patrick H. Lauke - 21. Dezember 2011 um 13:49

Webkrauts: Für mehr Qualität im Web.

Artikel

CSS 3 im Praxistest: Transition

Mindestangaben für eine Transition

Parameter für eine Start-Verzögerung

Unterschiedliche Geschwindigkeiten auf der Zeitachse

Beispiel für steps()

Kurzschreibweise `transition`

Mehrere Transitions gleichzeitig definieren

Kurz und knapp: Mehrfachangaben in Kurzschreibweisen

Unterschiedliche Geschwindigkeit für »hin und zurück«

Browserunterstützung

Was kann mit einem Übergang versehen werden?

Vorteile von Transition

Nachteile von Transition

Experiment – Navigation mit Transition

Experiment – Bilderrätsel

Weiterführende Links

Autoreninfo

Kommentare

Hauptmenü

Kategorien

Suche

Newsfeeds

Trackbacks

Webkrauts: Für mehr Qualität im Web.

Artikel

CSS 3 im Praxistest: Transition

Mindestangaben für eine Transition

Parameter für eine Start-Verzögerung

Unterschiedliche Geschwindigkeiten auf der Zeitachse

Beispiel für steps()

Kurzschreibweise transition

Mehrere Transitions gleichzeitig definieren

Kurz und knapp: Mehrfachangaben in Kurzschreibweisen

Unterschiedliche Geschwindigkeit für »hin und zurück«

Browserunterstützung

Was kann mit einem Übergang versehen werden?

Vorteile von Transition

Nachteile von Transition

Experiment – Navigation mit Transition

Experiment – Bilderrätsel

Weiterführende Links

Autoreninfo

Kommentare

Hauptmenü

Kategorien

Suche

Newsfeeds

Trackbacks

Kurzschreibweise `transition`