CSS3 Transition

Siehe auch bradshawenterprises | w3schools | mein Videotutorial

Unterschiede zwischen Animation und Transition siehe hier

Der Code funktioniert auf folgende Weise. Man spezifiziert eine oder mehrere Eigenschaften, die animiert werden sollen und die Ablaufzeit. Optional kann man eine Timing Function zuweisen, welche Beschleunigung, Abbremsen etc. ermöglicht und eine Verzögerungszeit vor dem Start bestimmen.

Wenn eine CSS Eigenschaft geändert wird, geschieht das nicht sofort, sondern in dem definierten Zeitablauf. Das Ereignis welches die Änderung der Eigenschaft(en) auslöst, kann auf unterschiedliche Art erfolgen, sei es durch Javascript oder Pseudoklassen wie :hover :active.

div {
background-color: #7EB7AA;
width: 100px;
height: 100px;

transition: width 2s;
}
div:hover {
width: 300px;
}

so sieht's aus

Beispiel mit Button Effekt

Man kann für Anfangs und Endanimation verschiedene Werte verwenden.

so sieht's aus

Man kann mehreren Eigenschaften verschiedene Zeiten und Easing Eigenschaften zuweisen.

so sieht's aus

Die vorangegangenen Beispiele benutzen die Kurzschreibweise transisition, in der alle transition Eigenschaften zusammengefasst werden können.

Will man komplexere Animationen erstellen ist es einfacher auf die Kurzschreibweise zu verzichten.
siehe unten.

Timing Functions

transition: all 1s ease-in-out;
so sieht' aus
transition-timing-function
Eigenschaft Wert Bedeutung
Standardwert ease
transition-timing-function linear Gleichmäßiger Zeitlablauf
ease Zu Beginn langsam, dann ein gleichmäßiger schneller Ablauf, am Ende abbremsen
ease-in Langsam beim Start, schneller werdend.
ease-out Zum Ende langsamer werdend.
ease-in-out Langsam am Anfang zur Mitte hin schneller werdend, zum Ende hin langsamer werden. Im Gegensatz zu ease hat man hier einen stetigen Geschwindigkeitswechsel über den gesamten Zeitraum, während man bei ease einen längeren gleichmäßigen schnellen Zeitablauf im Mittelbereich hat.
cubic-bezier(n,n,n) Geben Sie eigene Werte ein. Erlaubt sind Werte zwischen 0 und 1.
initial Zurücksetzen auf Standard
inherit Erbt die Eigenschaft vom Eltern Element

Man kann auch eigene Timing Functions erzeugen mit dem Ceaser CSS Easing Tool ist das sehr einfach.

Die transition Eigenschaften

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

Mit transition-delay kann man eine Verzögerung definieren.

transition-delay: 0.6s;

Durch mehrere delay und duration Werte kann man komplexe Animationen erstellen. Jede Eigenschaft bekommt einen Wert für die Dauer und einen Verzögerungswert. Durch die Reihenfolge geschieht die Zuweisung.

transition-property: top, left;
transition-duration: 1s, 1s;
transition-delay: 0s, 1s;

so sieht's aus | animierter Email-Button

Siehe auch die Beispiele mit fortgeschrittenen Delay Techniken unter http://css3.br adshawenterprises.com/transitions/

Animierbare Eigenschaften

Standardwerte sind nicht animierbar, beispielsweise height: auto;

Mit transition-property kann man mehrere Werte kommasepariert aufführen, die animiert werden sollen. transition-property: width, top, left;

Die Reihenfolge der Eigenschaften ist insofern wichtig, da Wertzuweisungen in den anderen transition Eigenschaften sich auf die Reihenfolge beziehen. Im folgenden Beispiel dauert die Animation der Breite 2 Sekunden und die Animation der Höhe 1 Sekunde.

transition-property: width, height;
transition-duration: 2s, 1s;

 

transition-property
Eigenschaft Wert Bedeutung
Standardwert all
transition-property all alle Eigenschaften
background-color Farbe
background-image nur Verläufe
background-position Prozent, Länge
border-bottom-color Farbwert
border-bottom-width Länge
border-color Farbwert
border-left-color Farbwert
border-left-width Breite
border-right-color Farbwert
border-right-width Breite
border-spacing Länge
border-top-color Farbwert
border-top-width Breite
border-width Breite
bottom Entfernung, Prozent
color Farbwert
crop rectangle
font-size Größe, Prozent
font-weight numerisch
grid-* verschieden
height Größe, Prozent
left Größe, Prozent
letter-spacing Größe
line-height numerisch, Größe, Prozent
margin-bottom Größe
margin-left Größe
margin-right Größe
margin-top Größe
max-height Größe, Prozent
max-width Größe, Prozent
min-height Größe, Prozent
min-width Größe, Prozent
opacity numerisch
outline-color Farbwert
outline-offset integer
outline-width Größe
padding-bottom Größe
padding-left Größe
padding-right Größe
padding-top Größe
right Größe, Prozent
text-indent Größe, Prozent
text-shadow shadow
top Größe, Prozent
vertical-align Schlüsselwort, Größe, Prozent
visibility Sichtbarkeit
width Größe, Prozent
word-spacing Größe, Prozent
z-index Ganzzahl
zoom numerisch