Animation Workshop | CSS – Procesportfolio

Opgaven lyder sig: Lav en animation og implementer den på en hjemmeside ved hjælp af CSS. Animationen skal laves ved hjælp af et spritesheet. Til at fastlægge historien, kan man bruge et storyboard. Til at tegne animationen skal man bruge illustrator.

Først

Dette er animationen: https://animation.lefty.dk

CSS, HTML5 & Animation

En simpel hjemmesidestruktur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <meta name="description" content="Animation">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="container">
        <div class="sprite"></div>
    </div>
</body>
</html>

Her er det stylesheet jeg har brugt til implementeringen:

@charset "UTF-8";
/* This is a CSS file */
:root {
	--Bwith: 10px
}
/* Background */
body {
	background-color: black;
}

/* Animation */
.sprite {	
	width: 1000px;
	height: 1000px;
	background: url('img/Artboard_1.png') no-repeat;
	background-position: center;
	animation: play 3s steps(23) infinite;
	transform: scale(4);	
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 98vh;
}

@keyframes play {
	0% {background-position: 0px;}
	100% {background-position: -23000px;}
}

Som man kan se i den class der hedder .sprite kan man se jeg har valgt at lave animationen i 1000px horisontalt og vertikalt: 1 frame = 1000×1000 px, og fordi der er 23 frames bliver der til 23000px bredde. Jeg oplevede at hvis jeg skulle præsentere min animation på den sorte baggrund, hvor opløsningen forsat var pæn, virkede det mere passende at skrue op til 1000px fra 500px.

Jeg har også valgt at centrere animationen med flex-systemet. Det blev bare pænere i sidste ende.

Spritesheet & illustrator

Mit spritesheet endte med at se ud således:

I processen brugte jeg et storyboard til at fastlægge historiens udvikling. Den blev meget rudimentær, men fangede det vigtigste:

Fordi jeg har arbejdet i illustrator før, satte jeg en udfordring for mig selv: Kan jeg løse opgaven med 3D i illustrator?

Det resulterede i en dybdegående øvelse i at lave 3D objekter, og påføre grafiske teksturer derpå:

– Screenshot af værktøjet 3D og Materials i illustrator

Her er det muligt at stille på viewporten (synsvinkel), ekstruderings-metode (revolve, plane, inflate, extrude), og andre 3D-formningsværktøjer.

Her kan man indsætte teksturer:

Nede i properties kan man se at jeg har sat vingummi (Graphic 2) på den grønne firkant som er markeret. Det er et lagsystem, så man kan tilføje flere lag.

Refleksion

Ud fra at det var første gang jeg har lavet en animation i CSS, syntes jeg produktet blev rigtig godt. Det er vigtigt at være opmærksom på ens format, dvs. opløsning, filtype, shotplan og rækkefølge, tidligt i processen. Hvis ikke man er det, kan man risikere at skulle lave ens animation 2 gange. 3D værktøjet i illustrator kan også vise sig meget brugbart i forbindelse med design af plakater og lignendende, fordi man kan skabe dybde og derved dynamik i sine projeketer, ved at teksturere 3D objekter. Background animationer oplever jeg ikke bliver brugt i samme omfang som svg animationer bliver brugt i nutiden. Svg animationer er også langt mere tekniske, hvilket jeg gerne vil fordybe mig i i fremtiden.