CSS3 Transition (Übergang/Wechsel)

CSS3 Transformer sind Teil der W3C-CSS3 Recommendation.
Die neue Eigenschaft transform bestimmt, wie das angesprochene Element transformiert werden soll. Sie ermöglicht lineares Transformationen von Elementen. Wir können Elemente verschieben, rotieren, skalieren und neigen.

CSS3 Animationen können sehr aufwendig sein, da alle Browser ein Prefix brauchen. Prefixfree ist ein kostenlos verfügbares Javascript Lea Veru (Animatable), das es erlaubt, CSS stets ohne Prefixing zu schreiben.

Transition Syntax

Neue Browser unterstützen diese Definitionen. Webkit- und Mozilla-Browser benötigen ein Präfix.

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

transition:all 1.5s ease-in-out 0.5s;

Zeit Funktionen - timing functions

linear Konstante Geschwindigkeit von Anfang bis Ende.
ease Beginn verlangsamt, nimmt schnell Geschwindigkeit auf und endet langsam (Default).
ease-in Beginnt langsam, endet schnell.
ease-out Schneller Start, endet langsam
ease-in-out Beginn und Ende langsam, in der Mitte ist die Geschwindigkeit am höchsten.
cubic-bezier(x1, y1, x2, y2) Steuert die Transition nach eigenen Angaben (Details MDN).

Transition Beispiele

Welche Angaben können Transition sein?

Fast alle CSS Eigenschaften, die eine Farb-, Länge- oder Positions-Komponente haben, können Transition anwenden, inklusiv viele der neuen CSS3 Properties .

CSS Property » Was ändert?

background-color » Farbe
background-image » nur gradients
background-position » Prozet, Länge
border-color » Farbe (left , right, top, bottom )
border-width » Länge (left , right, top, bottom )
border-spacing » Länge
left, right, top, bottom » Prozet, Länge
color » Farbe
crop » Recheck
font-size » Prozet, Grösse
font-weight » Nummer
height, width » Prozet, Länge
letter-spacing » Länge
line-height » Prozet, Länge , Nummer
margin » Länge (left , right, top, bottom )
max-height, max-width, min-height, min-width » Prozet, Länge
opacity » Nummer
outline-color » Farbe
outline-offset » Länge
outline-width » Länge
padding » Länge (left , right, top, bottom )
text-indent » Prozet, Länge
text-shadow » Schatten
vertical-align » Prozet, Länge, Keywörter (top, bottom etc.)
visibility » Visibility (Sichtbarkeit)
word-spacing » Prozet, Länge
z-index » Integer
zoom » Nummer