Animation Sprite Blatt

Question

Ich versuche, einige Charaktere für ein Schulprojekt zu animieren, aber ich stoße auf Probleme. Da ich in dieser Welt völlig neu bin, suche ich nach einer Anleitung und ich hoffe, dass dies der richtige Ort ist.

Meine erste Frage:

ich für einen meiner Charaktere ein Sprite Blatt in Illustrator gemacht haben. http://gryfaberbay.dk/kea/forhelp/spritesheet.png (Ich habe es in eine PNG-Datei gemacht, damit ihr es sehen könnt) Wenn ich versuche, meinen Charakter zu animieren und sie laufen zu lassen, benutze mein Sprite-Blatt die Füße von dem darüberliegenden Sprite.

Hier ist mein Code:

#princess_sprite { 
background-image: url(img/spritesheet_prinsesse.svg); 
width: 18vw; 
height: 45vw; 
background-size: 300%; 
/* - mod venstre. */ 
} 

.princess_walkcycle { 
animation-name: princess_walkcycle_kf; 
animation-duration: 2s; 
animation-fill-mode: forwards; 
animation-iteration-count: infinite; 
animation-timing-function: steps(3); 

} 

@keyframes princess_walkcycle_kf { 
0% { 
    background-position: 0%; 
} 
100% { 
    background-position: -300%; 
} 
} 

#princess_container { 
position: absolute; 
top: 8%; 
left: 50%; 
} 

.princess_move_left { 
animation-name: princess_move_left_kf; 
animation-duration: 4s; 
animation-iteration-count: infinite; 
animation-fill-mode: forwards; 
/*animation-timing-function: ease;*/ 
} 

@keyframes princess_move_left_kf { 
0% { 
    left: 100%; 
} 
100% { 
    left: 71.31%; 
} 
} 

Ich hoffe, sie sind bereit, mir zu helfen! Vielen Dank :)

Mit freundlichen Grüßen, Gry

Answer 1

Sie benötigen die height und width von #princess_sprite in Verbindung mit background-size Eigenschaft einzustellen. Hier

ist eine vereinfachte Version des Codes:

#princess_sprite { 
 
    width: 100px; 
 
    height: 200px; 
 
    background-image: url(http://gryfaberbay.dk/kea/forhelp/spritesheet.png); 
 
    background-size: 300%; 
 
    animation-name: princess_walkcycle_kf; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: steps(3); 
 
} 
 

 
@keyframes princess_walkcycle_kf { 
 
    0% { 
 
    background-position: 0%; 
 
    } 
 
    100% { 
 
    background-position: -300%; 
 
    } 
 
}

<div id="princess_sprite"> 
 
</div>