Briefing: Gestalte eine zyklische Animation ausgehend ausgehend von einem Werk aus der Op-Art. Überlege, welche Art der Bewegung im Werk optisch bereits angelegt ist und interpretiere diese.
Auf dieser Seite findest du ein paar Namen und Werke als Beispiele.
In unserem Zusammenhang ist Op-Art interessant. Zum einen, weil die Werke oft sehr parametrisch aufgebaut sind.
Zum anderen, weil sie eine Bewegung implizieren – man hat das Gefühl, etwas bewegt sich, könnte sich bewegen – oder 'sieht' eine Bewegung, die aber nicht da ist.

Sich dieser gemeinten Bewegung bewusst zu werden und sie umzusetzen, ist eure Aufgabe.
Dabei geht es um eine Interpretation, nicht um eine Ausführung. Interpretation meint, ihr könnt von einem charakteristischen Element – wie zum Beispiel dem Kipp Effekt von Vordergrund-Hintergrund in Bridget Rileys Arbeit ausgehen und diesen umsetzten. Ihr müsst aber nicht zwingend auch die Streifen und die Form der Raute übernehmen.

Benutze dazu CSS Transform und / oder Keyframe Animationen. Arbeite mit den Blend Modes, Transition Timing, SVG - Animationen.
Falls du die Konzepte vorgängig nochmals repetieren möchtest, findest du unten eine Anzahl von Links, Ressourcen und Inputs, die du durcharbeiten kannst.

---

• Intro LinkedIn Tutorial: https://www.linkedin.com/learning/animationen-in-css3/transforms-transitions-und-animations
• Übersicht Transform: https://www.w3schools.com/css/css3_2dtransforms.asp
• Übersicht Keyframe Animationen: https://www.w3schools.com/css/css3_animations.asp
• Übersicht Transition: https://www.w3schools.com/css/css3_transitions.asp
• Tutorial Transform: https://www.youtube.com/watch?v=PH35-BDak0M
• Tutorial Transition: https://www.youtube.com/watch?v=oYlJR4Le228
• Tutorial Keyframes: https://www.youtube.com/watch?v=PjR97QzOrJM
• Tutorial Animation Fill Mode: https://www.youtube.com/watch?v=irJXZnA3g5U

• https://tobiasahlin.com/blog/curved-path-animations-in-css/

• https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#Timing_functions
• Eigene Kurve entwerfen https://cubic-bezier.com/

• https://developer.mozilla.org/de/docs/Web/CSS/mix-blend-mode

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
https://www.w3schools.com/cssref/css3_pr_animation-direction.asp
d.h. animation-direction: normal für vorwärts und animation-direction: reverse für rückwärts

https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/

---

Arbeite durch das Tutorial von Florence Maurice: https://www.linkedin.com/learning/animationen-in-css3/willkommen-zu-animationen-in-css3-2

Platziere eine Form in der Mitte des Screens und animiere über transform einzelne Eigenschaften der Form.
Beispiel:
transform: rotate(20deg);
Weise die Transformation über einen Hover zu und benutze Transition, um die Länge der Animation zu steuern.
transition: all 2s;
Beispiel auf Codepen: https://codepen.io/braican/pen/kyHFc
Übersicht aller Eigenschaften, die animiert werden können:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Lies nochmals die Animation Properties: https://www.w3schools.com/css/css3_animations.asp
Erstelle eine Animation mit Keyframes und weise die Animation deiner Form zu.
Beispiel auf Codepen: https://codepen.io/tutsplus/pen/dXkppB

Lies den Artikel über Timing Functions: https://tympanus.net/codrops/css_reference/timing-function_value/
Probiere verschiedene transition-timing-function aus.
Generier eine eigene Cubic-Bezier Kurve mit diesem Tool: https://cubic-bezier.com/

Lies den Beitrag von Tobias Ahlin: https://tobiasahlin.com/blog/curved-path-animations-in-css/
Mache eine komplexere Animation über verschiedene Layers.
Falls ihr svg Elemente per CSS je um ihr eigenes Zentrum drehen (oder skalieren) wollt:
transform-box: fill-box;
transform-origin: center;
auf das Element setzen

Probiere verschiedene Blend-Modes aus und weise sie deiner Form zu.
https://developer.mozilla.org/de/docs/Web/CSS/mix-blend-mode
Beispiel: https://codepen.io/hzuellig/pen/gOpmpwZ
Beziehe dich auf die Vordergrund/Hintergrund Themen der Op-Art.

Beispiel: SVG Clipping
Studiere das Beispiel -- ein SVG Pfad wird hier als Maskierung benutzt. Zusätzlich wird er animiert.
Mehr Info zu SVG Clipping Path
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
Baue ein eigenes Beispiel, in dem eine Form als Maskierung benutzt wird.
Beziehe dich auf die Vordergrund/Hintergrund Themen der Op-Art.