Durch das Klick-Event schrumpft die Box auf ihre neue Höhe.
Normalerweise würde der Container schlagartig auf die neue Höhe wechseln. Allerdings bestimmt die CSS-Eigenschaft „-webkit-transition-property“, dass bei einer Änderung des Werts „height“ eine Transition ausgeführt werden soll. Die Eigenschaft „-webkit-transition-duration“ legt die Dauer der Transition auf drei Sekunden fest. Damit zieht sich der Container innerhalb von drei Sekunden auf die neue Höhe zusammen.
| Eigenschaften, die sich durch CSS animieren lassen | |
| background-color | padding-top |
| bottom | right |
| border-bottom-color | text-fill-color |
| border-bottom | text-shadow |
| width | text-stroke-color |
| border-left-color | top |
| border-left-width | visibility |
| border-right-color | width |
| border-right-width | word-spacing |
| border-top-color | z-index |
| border-top-width | -webkit-border-bottom-radius |
| color | -webkit-border-horizontal-spacing |
| height | -webkit-border-left-radius |
| left | -webkit-border-right-radius |
| letter-spacing | -webkit-border-top-radius |
| line-height | -webkit-border-vertical-spacing |
| margin-bottom | -webkit-column-count |
| margin-left | -webkit-box-shadow |
| margin-right | -webkit-column-gap |
| margin-top | -webkit-column-rule-color |
| opacity | -webkit-column-rule-width |
| outline-color | -webkit-column-width |
| outline-offset | -webkit-transform |
| outline-width | -webkit-transform-origin-x |
| padding-bottom | -webkit-transform-origin-y |
| padding-left | -webkit-transform-origin-z |
| padding-right | |
Es können mehrere Eigenschaften geändert werden, indem sie kommasepariert hintereinander geschrieben werden.
-webkit-transition-property: height, width; -webkit-transition-duration: 3s, 4s;
Listing 2
Der zeitliche Verlauf kann auch auch als Bezier-Kurve definiert werden. So verläuft die Animation nicht linear, sondern mit verschiedenen Geschwindigkeiten.
-webkit-transition-timing-function: ease-out, cubic-bezier(0.5, 0.2, 0.3, 1.0);
Listing 3
Auch kann die Animation mit einer Verzögerung starten. Dazu wird der Wert in Sekunden angegeben.
-webkit-transition-delay: 3s;
Listing 4
Ähnlich wie bei anderen Eigenschaften, wie zum Beispiel Border, lassen sich Werte auch zusammenfassen.
-webkit-transition: opacity 250ms easy-out 100ms;
Listing 5
Dieser Code blendet innerhalb von 250 Milisekunden mit einem Bezier-Zeitverlauf von (0.0, 0.0, 0.58, 1.0) das Element aus, allerdings erst nach 100 Milisekunden.
Eine Antwort
von Mobile Entwicklung: Der ultimative Über… 22.03.2010 (17:56Uhr) 1.
[...] erstellt wird. Die einzelnen Teile der Serie findet man im Archiv: Teil 1, Teil 2, Teil 3, Teil 4. Ähnliche News und Artikel02.09.2008: Teil 1: Websites für das iPhone optimieren: [...]