Youtube Video

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 auch eine Verzögerungszeit vor dem Start lässt sich definieren.

Wenn eine CSS Eigenschaft geändert wird, geschieht das nicht sofort, sondern in einer definierten Zeit. Das Ereignis welches die Änderung der Eigenschaft(en) auslöst, kann auf unterschiedliche Art erfolgen, sei es durch Javascript oder eine Pseudoklasse 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

transition / Kurzschreibweise

Das vorangegangene Beispiel nutzt die Kurzschreibweise transition, in der mehrere transition Eigenschaften zusammengefasst werden können. Man weist mehrere Werte zu. Es sollte mindestens der Wert für die Eigenschaft transition-property und der Wert für die Zeit transition-duration zugewiesen werden. Weitere mögliche Werte sind:

transition: property duration delay timing-function;

transition: width 2s 0 ease-in;

Die transition Eigenschaften

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

Anstatt die Kurzschreibweise transition zu nutzen, kann man auch alle Eigenschaften einzeln aufführen. Das bedeutet etwas mehr Schreibarbeit, aber es ist übersichtlicher.

transition-duration

Unter transition-duration gibt man die Dauer der Animation an. Die Einheit s steht für Sekunden und wird ohne Leerzeichen hinten angehängt:

transition-duration: 2s;

transition-delay

Mit transition-delay kann man eine Verzögerung am Anfang definieren. Die Einheit s steht für Sekunden.

transition-delay: 0.6s;

Im folgendem Beispiel haben die Äpfel einen unterschiedlichen transition-delay Wert und einen unterschiedlichen transition-duration Wert.

Siehe Beispiel

transition-property / animierbare Eigenschaften

Mit transition-property werden Eigenschaften aufgeführt, die animiert werden sollen.

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

transition-timing-function / Beschleunigung etc.

Mit der timing-function kann man Beschleunigungen oder Verlangsamungen definieren. Der animierte Wert muss sich nicht gleichmäßig ändern, sondern kann im Zeitablauf erst langsam und dann immer schneller werden. Neben den hier vorgestellten Werten, gibt es noch weitere Werte, die auch in anderen Animationsanwendungen üblich sind.

Eine gute Hilfe bietet das Ceaser CSS Easing Tool

transition: all 1s ease-in-out;

oder

transition-timing-function: ease-in-out;
transition-property: all;
transition-duration: 1s;

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.


Mehrere Eigenschaften nacheinander animieren

Man kann Animationen erstellen, bei denen verschiene Eigenschaften nacheinander ablaufen.

Durch mehrere property, 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;

Im Beispiel wird zuerst die top Eigenschaft animiert mit einer Dauer von einer Sekunde. Da die Eigenschaft left einen Verzögerungswert von einer Sekunde hat, beginnt die Animation von left nach der Animation von top.

so sieht's aus | animierter Email-Button

Kurzschreibweise mehrere Animationen

Auch mit der Kurzschreibweise lassen sich mehrere Eigenschaften mit verschiedenen Zeiten und Easing Eigenschaften animieren, indem man die Werte mit Komma getrennt aufführt.

transition: width  1s 0s ease-in, height  2s 1s ease-out;

so sieht's aus

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

Anfangs und Endanimation

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

Hier werden für verschiedene Werte eingegeben für

Anfangs- und Endanimation. Wenn man das div berührt :hover läuft die Animation in 4 Sekunden ab, zurück in den Ursprungszustand geht es in 1 Sekunde.

div {
	background-color: #7EB7AA;
	width: 100px;
	height: 100px;
	transition: all 1s ease-in;
}
div:hover {
    width: 300px;
    height: 200px;
    transition: all 4s ease-out;
}   

so sieht's aus