CSS Sprite Animation Workshop

Vi havde den 10/12/2021 CSS Sprite Animation, her skulle vi kaste os ud i en CSS animation. Vi startede dagen ud med introduktionen til hvordan vi satte et sprite sheet op i Adobe Illustrator samt hvad en CSS Sprite Animation er;

storyboard

Vores underviser introducerede os for kodningen bag denne animation og hvordan vi ændrede på hastigheden af den. Herefter gik vi igang med at surfe på nettet for at blive inspireret af de forskellige ideer, jeg valgte det selvportræt vi har afleveret fra Illustrator.

CSS koden for vores animation

Som det ses på billedet er min første ide. Jeg havde inden vi mødte op til workshoppet haft en primære ide om at lave noget med et min illustration af mig selv fra tidligere opgave. Hvor jeg derefter da jeg gik igang med at brainstorme ideer kom på ideen om at lave en CSS Animation af mig som smed en tåre ned af kinden.

Artboard i Adobe Illustrator

REFLEKTION

Vi havde førhen arbejdet med animation, men ikke på denne måde. Her blev jeg udfordret en smule i forhold til at lave animationen i Adobe Illustrator, vi startede med at lave vores artboards som minimum skulle hedder 500px i højden og så skulle vi selv bestemme hvor bred. Jeg valgte at lave som set herunder 7 i bredden, så min animation hed 500px x 3500px. Jeg lærte at jo flere du laver i bredden jo flere detaljer og mere flydende bliver din animation. Herefter skulle vi smide den ind i koden som Anni viste os. Her lærte jeg at man kunne justere på hastigheden af animationen. Jeg havde lidt udfordringer i hvor mange ”detaljer” og hvor meget man skulle ændre fra billede til billede, men prøvede mig frem og blev egentlig okay tilfreds med resultatet. Det var en sjov og lærerig workshop, som helt sikkert kan bruges i fremtiden. Det kunne også være en tekst man ville have til at dukke op på hjemmesiden eller lignende for at gøre denne mere ”livlig”.

En anden gang ville jeg nok bruge lidt mere tid og kredse lidt mere om de små bevægelser og gå mere i dybden, men da vi skriver eksamensprojekt samtidig har jeg mere fokus på dette fremfor at bruge meget tid på animationen. Jeg vil helt sikkert kigge mere på det når jeg engang får tiden til det.