Morgen

Transform

• Beispiel translate
• Beispiel rotate
• Beispiel scale
• Beispiel skew
• Beispiel Kombination von Transformationen

Uebung Transform

tag-4-1
Nehmt einen Auszug aus eurem Song und setzt ihn mehrfach hintereinander. Baut eine sequentielle Transformation, so dass jede Etappe ein bisschen mehr verformt ist. Beispiel

Transition

• Transition

Uebung Transition

Arbeite durch die W3C Exercises: https://www.w3schools.com/css/exercise.asp?filename=exercise_css3_transitions1

tag-4-2
Mache eine Kopie des Files 4-1 und animiere die Verformungen. Löse sie über den :hover Zustand aus. Beispiel

Animation

• W3C Animation
• Beispiel

Uebung Animation

Arbeite dich durch die W3C Referenz, um das Gelernte zu repetieren: https://www.w3schools.com/css/css3_animations.asp

tag-4-3
Probiere eine Keyframe Animation zu entwerfen. Beispiel Du kannst irgend etwas animieren! border-shadow, border-radius, opacity, color, letter-spacing, line-height, etc.
Mache eine laute Animation und eine ganz leise.

Nachmittag

Arbeit am Projekt Layout aufbauen und mindestens eine Animation integrieren. Die Animation soll stimmungsmässig mit dem Song zu tun haben.

Individueller Support und Besprechungen

---

---