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;
}
Man kann für Anfangs und Endanimation verschiedene Werte verwenden.
Man kann mehreren Eigenschaften verschiedene Zeiten und Easing Eigenschaften zuweisen.
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.
transition: all 1s ease-in-out;
| 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.
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/
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 | |
| visibility | Sichtbarkeit | |
| width | Größe, Prozent | |
| word-spacing | Größe, Prozent | |
| z-index | Ganzzahl | |
| zoom | numerisch | |