Veit Schiele Communications

Veit Schiele Communications

Transitions

CSS3-Transitions erlauben die Änderungen von Werten der CSS-Eigenschaften wobei die Änderungen langsam über einen definierten Zeitraum hinweg erfolgen können.
erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:12 © Veit Schiele Communications GmbH, 2011–2017

Das CSS3-Transitions-Modul führt eine Reihe neuer Eigenschaften ein, die die sich ändernden CSS-Eigenschaften beschreiben, die Dauer, den Verlauf und die Verzögerung der Änderungen. Im Einzelnen sind es die folgenden Eigenschaften:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

transition-property

Mit transition-property werden diejenigen CSS-Eigenschaften angegeben, die verändert werden sollen. Dabei sind drei verschiedene Angaben möglich:

all

Alle CSS-Eigenschaften.

Initialer Wert.

none
Keine CSS-Eigenschaft
Liste
Komma-separierte Liste der Eigenschaften

Syntax

transition-property: none | all | <IDENT> ] [, <IDENT> ]*

Beispiele

transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

transition-duration

Die transition-duration-Eigenschaft kann als komma-separierte Liste von Zeiten in Sekunden oder Millisekunden angegeben werden, die die Länge des Übergangs für die in transition-property angegebene Eigenschaft bestimmt.

Syntax

transition-duration: <time> [, <time>]*

Beispiele

transition-duration: 2s;
transition-duration: 4000ms;
transition-duration: 4000ms, 8000ms;

transition-timing-function

Mit der transition-timing-function-Eigenschaft kann angegeben werden, welchen Verlauf der Übergang innerhalb der angegebenen Zeit nehmen soll. Für die Angabe gibt es mehrere Möglichkeiten:

ease
Standardwert
linear
Linearer Verlauf
ease-in
Hineingleiten
ease-out
Ausgleiten
ease-in-out
Hinein- und Ausgleiten
Benutzerdefinierte Funktion
Diese kann mit 4 Koordinaten für eine kubische Bezierkurve definiert werden.

Syntax

transition-timing-function: <timing-function> [, <timing-function>]*
<timing-function> = ease | linear | ease-in | ease-out | ease-in-out

oder:

<timing-function> = cubic-bezier(<number>, <number>, <number>, <number>)

Beispiele

transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

transition-delay

Die optionale Angabe für die Verzögerung des Übergangs kann als komma-Separierte Liste von Zeiten in Sekunden oder Millisekunden angegeben werden. Der Standardwert ist 0. Für negative Werte beginnt der Übergang sofort, jedoch mit dem angegebenen Versatz.

Syntax

transition-delay: <time> [, <time>]*

Beispiele

transition-delay: 5s;
transition-delay: 4000ms, 8000ms;
transition-delay: -5s;

transition-Kurzfassung

Mit transition können die einzelnen transition-Eigenschaften gemeinsam angegeben werden.Mehrere transition lassen sich als komma-separierte Liste angeben. Dabei ist die einzig notweindige Angabe der Wert für transition-duration.

Syntax

transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

Beispiele

transition: background-color 3s linear 1s;
transition: 4s ease-in-out;
transition: 5s;

Browser-Support

 ChromeFirefoxIESafariOpera
transition-property≥ 4.0≥ 4.0≥ 10.0≥ 3.1≥ 10.5
transition-duration≥ 4.0≥ 4.0≥ 10.0≥ 3.1≥ 10.5
transition-timing-function≥ 4.0≥ 4.0≥ 10.0≥ 3.1≥ 10.5
transition-delay≥ 4.0≥ 4.0≥ 10.0≥ 3.1≥ 10.5
transition≥ 4.0≥ 4.0≥ 10.0≥ 3.1≥ 10.5

Beispiele

Hover.css
Sammlung von CSS3-Hover-Effekten für Links, Buttons, Logos, SVG und Bildern. Neben CSS werden die Dateien auch als Sass und LESS bereitgestellt.
animatable
Gallerie der Basis-Transitions.
Blur Menu
Text-Shadows und Transitions ergeben zusammen einen Blur-Effekt.
A Pure CSS3 Cycling Slideshow
Dieser Artikel behandelt mehrere Animationen wie Progress Bar, animierter Tooltip on Mouseover, Pause und Wiedergabe.