Procesbeskrivelse:
Tirsdag d. 29 april, deltog jeg i en workshop omkring animation i CSS.
Opgavebeskrivelse:
Lav en animation i CSS ved brug af kode, og brug minimum 10 frames. Animationen skal tegnes i illustrator og du skal gøre brug af koder som blev anvendt i undervisningen Animation d. 23 / 4 / 2025.
Illustrator:
Efter præsentationen af workshoppen gik jeg i gang med visualisere nogle animations senarier på en storyline. Jeg valgt at lave en måne som træder ind i venstre frame og rejser ud af højre frame. Efter det begyndte jeg at lave mine tegninger i illustrator. Jeg lavede et artboard på 500h x 5000w i px, som i alt udgjorde 10 frames i min animation. Jeg begyndte at lave stjerner og sorte frikanter som udgjorde størelsen 500h x 500w i px, som svarer til aspectratio 1:1, og som var sorte. Men for at gøre det mere realistisk, så valgte jeg at tegne en gammeldags foto film omkring alle mine frames. På den måde fik jeg en aspektratio som mindede mere om 4:3, det gjorde det mere vintage, og gav et unik og en sej stil. Jeg begyndte at tegne månen og gøre den så detaljeret som muligt. efter det skulle jeg skære mine måner ud i forhold til placeringen den var på i hvert frame. Da jeg havde arbejdet igennem 7 frames, måtte jeg indse at 10 frames var for lidt, og derfor udvidede jeg mit artboard
med 10 frames yderligere. Mit artboard var nu 500h x 10000w i px. Jeg blev ved med at kopiere og klippe månen ind til at mine frames var på plads. Efter det ville jeg lave lidt på min bagrund så jeg justerede lidt i nogle stjerners størelser for at få det til at føle mere levende. Jeg lavede også noget meteor regn som kørte i bagrunden.
Kode:
Efter at jeg havde tegnet og designet min animation var det nu tid til at kode. Jeg lavede en standart html side.
Efter at jeg opbyggede min html struktur, var det nu tid til at lave mit css dokument.
I min div som er kaldt Moon. under den gav jeg følgende værdiger som width og hight til 500 px, ergo min enkelte frame størrelse. Jeg lagde også mit billede ind i css dokumentet så jeg kunne animere det, jeg ville ikke nå samme resultat hvis jeg bare havde lagt billedet op i standard html kode. Jeg indstillede mine animations værdier til 5 sek af 20 frames. Jeg legede lidt med nogle effekter og resultat var en animation som viste mine tegninger.
Resultat:
Her ser du en lille video af min animation:
Refleksion:
Jeg lærte meget kodning i css i denne workshop, dog var jeg ikke tilfreds med min alignment i mine tegninger. Man kan tydeligt se at jeg ikke har haft noget grid, og derfor ligner det at stjernene rystes, jeg kunne også havde gjort gavn af flere frames for at få noget mere smooth animation. Det er ikke min stolteste stykke arbejde, men jeg er sikker på at jeg har lært en masse som jeg kan tage med, næste gang jeg skal animere.