Pour cet exercice, vous devez faire ajuster la taille de l'animation de la spritesheet pour qu'elle s'ajuste à 50% de la largeur de la fenêtre.
Aperçu du résultat 👇
Matériel
Pen de départ
Faites un fork du Pen de départ.
Ajoutez du CSS afin que l'animation s'affiche toujours complètement et que sa taille soit responsive par rapport à la dimension de la fenêtre.
Je vous conseille d'abord de faire pause sur la première image via la propriété css animation-play-state
Ajustez le background-size avec 2 valeurs en pourcentage (%) pour n'afficher que la première image de la série.
Ensuite, dans la définition de l'animation elle même (@keyframes), ajustez le background-position final afin qu'il soit aussi défini en pourcentage (%). Notez qu'il y a 19 images dans la spritesheet et que chaque image a une dimension originale de 700px par 700px;