Bonjour ,

J'ai un problème je n'arrive pas à rendre une animation sprite responsive ou du moins elle se répète mais l'animation marche.

Voici l'exemple que j'ai suivi : http://codepen.io/SitePoint/pen/zxXrzP

Merci d'avance pour votre aide

code css 

.parent {
  position: relative;
  width: 100%;
  margin: -10% auto 0 auto; /* positioning tweak */
}

.parent:before {
  content: "";
  display: block;
  height: 100%; 
}

.ryu {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  background:  url('img/baleine.png') no-repeat 0 0%;
  background-size: 70%;
  -webkit-animation: sprite 3.5s steps(32) infinite;
}

@-webkit-keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}

code html 

<div class="parent">
  <div class="ryu"></div>
</div>

Sous quel navigateur ça fait ça car sous chrome j'ai pas de soucis perso :/

Et quand tu dis qu'elle se répète c'est à dire ?

Qu'elle se joue indéfiniment ?

si c'est ça ton problème, enlève juste le "inifinite" et elle se jouera qu'une seule fois 

De même tu dois pas juste mettre le -webkit- mais aussi celui général :

animation: sprite 3.5s steps(45) infinite;

ça vaut aussi pour le @keyframe :

@keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}

Dans steps tu dois mettre le nombre d'images -1 pour qu'elles se superposent. Avec 32 y a peu de chance que ça fonctionne vu qu'il y a 46 images qui définissent ton sprite

ça fonctionne un peu comme une pellicule de film. Si tu la joues pas assez vite ça donne l'effet que tu as avec 32 images alors qu'il y en a 46 c'est un peu comme pour les disques platines entre le 33 tours et le 45 tours.

-
Edité par stefde3 5 août 2015 à 13:06:44

J'ai regardé aussi de mon côté stefde3, mais n'ayant pas compris la question j'ai pas posté de suite.

J'arrive pas non plus à comprendre le côté responsive et comment il fonctionne concrêtement. Sur le code source il y a un padding-top: 61.37%;  mais je comprend pas le cheminement pour trouver 61.37%... Et c'est de ce côté que l'auteur du sujet a un problème! Pas au niveau de l'animation, il la change pas une baleine qui a surement 33 image, donc 32.

Voici mes essais :

.parent {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: grey;
}

.parent:before {
  content: "";
  display: block;
  padding-top: 61.37%; 
}

.ryu {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:  url('http://bennet.org/images/codepen/ryu-sprite-demo.png') no-repeat 0 0%;
  background-size: 100%;
  animation: sprite 3.5s steps(45) infinite;
}

@keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}

<div class="parent">
  <div class="ryu"></div>
</div>

réalisé ici : http://codepen.io/SitePoint/pen/zxXrzP

Voila, ainsi le sprite est responsive

Seulement si on change quelque valeur ou essaye de fixer le conteneur...

Au pif :

.parent {
  position: relative;
  width: 980px;
  height: 600px;
  margin: 0 auto;
  background: grey;
}

Mais alors vraiment au pif... Ou es la logique?

j'ai 32 image en tout mon problème est que les images ce superpose 

exemple quelque fois j'ai mon animation qui fonction mais en 2 voir 3 exemplaire.

je comprend pas le système qu'utilise la personne dans codepen.

Si tu as 32 images, alors dans step tu dois indiquer 31! Ça ne réglera pas le problème je pense, mais tu peu obtenir autre chose je pense

j'ai fait pareil que lui j'ai juste ma baleine sans fond et ça marche convenablement il suffit de jouer avec les margin et les padding dans parent lourd quoi

Merci pour votre aide!

Bonsoir, j'ai réussit également grâce à vos commentaires à faire fonctionner ce code, mais je ne comprend pas non plus le cheminement à 61.37% ni non plus pourquoi lorsque l'on a, par exemple 6 image dans le fichier source il faut indiquer 5 images! (" une baleine qui a surement 33 image, donc 32.") L'essentiel est que ca fonctionne mais comment trouver la hauteur exacte du padding-top ? Merci pour votre aide

un peu vieux mais bon tu peux utiliser des codes couleur en background pour tester tes margin et padding ça aide à régler parfois quand on est perdu dans le code