Animation workshop
d. 04/12/2024
Vi skulle lave en CSS-animation, Animationen skulle være designe i Adobe Illustrator, og de 12 animationsprincipper skal overvejes. Opgaven gik ud på at vi skulle indsættelse i koden for at skabe en animation til en hjemmeside.
Da jeg var så ubeslutsom og ikke kunne finde og ikke vidste hvad jeg vil animere så fik jeg lov til at låne Pernilles tegning. som hun havde lavet i Illustrator.
Jeg startede med at lave 6 frames af illustrationen, som var vi skulle line dem på på en line linje hvor frame er 400px x 400px. ind i Photoshop. så gemt jeg den som en png.
Efter det så skulle vi bruge VSCode. Hvor jeg så skulle jeg lav en CSS mappe. Hvor jeg skulle til tilføje alle de ting som jeg skal bruge til CSS. Så skulle jeg indsætte både Html og CSS
.sprite {
width: 400px;
height: 400px;
background: url(first\ animation.png) 0 0 no-repeat;
animation: play 1ms steps(6) infinite;
}
@keyframes play {
0%{background-position:0px;}
100% { background-position: -2400px; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Workshop</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="sprite"></div>
</body>
</html>ˇ
Refleksion
Synes det var mega spændende da vi lavede det dog var det bare ikke det bedste dag men udover det var meget fint. Næste gang vil jeg nok selv gerne lave noget i illustrator til at animater, men er meget glad for at jeg fik lov til at bruge hendes animation.