CSS3 Transition
- transition Kurzschreibweise
- Eigenschaften
- transition-duration
- transition-delay
- transition-property
- transition-timing-function / Beschleunigung etc.
- Komplexe Animationen
- Anfangs- & Endanimation
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;
}
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.
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;
| 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 | |
| width | Größe, Prozent | |
| word-spacing | Größe, Prozent | |
| 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;
| 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;
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;
}