28112 sujets

CSS et mise en forme, CSS3

[Résolu] Css Sprite : un problème de dimensions

Bonjour,

J'ai tenté de faire ma 1ere animation Css Sprite, mais je suis tombé sur un Os...

J'ai fait une image de 7 fois 512x512 ce qui me donne une image de 3573x512 (elle est en noir et transparent)

celle-ci doit s'animé au hover.

Si je mets les taille sur 512x512, je n'ai pas de problème.
Sauf que cette icone doit pouvoir être intégré dans différente page sous différente taille (24px, 32px,64px) j'vais donc modifié le width et height et laissé le background-size sur 512.

Et c'est là que mon problème se présente :

Je me retrouve "positionné" je pense dans la partie transparente de l'image.
on doit bien se déplacé dans l'animation de 512 en 512 mais afficher le résultat par rapport à la taille demandé 24px ..etc..

J'ai tenté de comprendre le problème via l'outil de développement intégré à Chrome sans succès. Un peu d'aide ne serait pas de refus.
Merci
Salut,
Quelles propriétés essayes-tu d'utiliser pour animer ton image ? Peux-tu nous partager le code que tu tenté ? (html et css).
Modifié par Nolan (29 Jun 2018 - 14:17)
Nolan a écrit :
Salut,
Quelles propriétés essayes-tu d'utiliser pour animer ton image ? Peux-tu nous partager le code que tu tenté ? (html et css).


J'ai avancé, j'ai reussi en mettant des valeurs fixe pour chaque cas, mais il semble que pour le 32 ça ne fonctionne pas. (j'ai volontairement multiplié les lignes pouvant être commune pour essayé de voir d'où vient le problème (j'ai dans chaque play joué sur le position en tentant de mettre pour le play32 -224px mais sans succès.

nota : j'avais voulu joindre mon image lors de mon 1er post mais sa taille (non pas sont poids) a été refusé.

voici le code :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <style>
  .icoChatAnim{
	background-repeat: no-repeat;
    background: url('chatanim.gif') left center;  
  }
  
  .ico512{
	width:512px;
	height:512px;
	background-size: 3584px 512px;
  }
  
  .ico64{
	width:64px;
	height:64px;
	background-size: 448px 64px;
  }
  
  .ico32{
	width:32px;
	height:32px;
	background-size: 224px 32px;
  }
  
  @keyframes play512 {
		100% {
			background-position: -3584px;
		}
	}  
  
	@keyframes play64 {
		100% {
			background-position: -3584px;
		}
	}
	
	@keyframes play32 {
		100% {
			background-position: -3584px;
		}
	}
	
	.ico512:hover {
		animation: play512 1.5s steps(7);
	}

	.ico64:hover{
		animation: play64 1.5s steps(7);
	}
	
	.ico32:hover {
		animation: play32 1.5s steps(7);
	}

  </style>
 
</head>
<body>
  <div class="bloc"> 
  <div class="icoChatAnim ico512">  
  </div>
  <div class="icoChatAnim ico64">  
  </div>
  <div class="icoChatAnim ico32">
  </div>  
</body>
</html>
Modérateur
Hello, je ne suis pas sur de voir ce que l'animation fait mais voici un coup de pouce pour simplifier la chose Smiley ravi

Il faut essayer d'écrire moins de code et de garder des choses simples pour pouvoir le maintenir facilement. Et dans ce cas, plutôt que des faires des calculs, utiliser au maximum les raccourcis disponible (left, right), utiliser des % (et au besoin calc(100% / 7) par exemple => Si tu veux changer le nombre de slide, c'est facile Smiley smile )
Yordi a écrit :
Hello, je ne suis pas sur de voir ce que l'animation fait mais voici un coup de pouce pour simplifier la chose Smiley ravi

Il faut essayer d'écrire moins de code et de garder des choses simples pour pouvoir le maintenir facilement. Et dans ce cas, plutôt que des faires des calculs, utiliser au maximum les raccourcis disponible (left, right), utiliser des % (et au besoin calc(100% / 7) par exemple =&gt; Si tu veux changer le nombre de slide, c'est facile Smiley smile )


J'ai réussi, le fait que je sois impaire était génant. je voulais éviter les calcul du fait des arrondis.
du coup j'ai 8 frames maintenant.

solution coté CSS (je ne sais pas si je peux optimisé)


.sz64 {
    width: 64px !important;
    height: 64px;
}

.sz32 {
    width: 32px;
    height: 32px;
}

.ico-chatAnim {
    background-repeat: no-repeat;
    background: url('../images/chatAnim.png') left center;
    display: inline-block;
    animation-play-state: paused;
}

.ico-chatAnim.sz32 {
    background-size: 256px 32px;
}

.ico-chatAnim.sz64 {
    background-size: 512px 64px;
}

.ico-chatAnim.sz64:hover {
    animation-name: playChatAnim64;
}
.ico-chatAnim.sz32:hover {
    animation-name: playChatAnim32;
}


@keyframes playChatAnim32 {
    100% {
        background-position: -256px;
    }
}

@keyframes playChatAnim64 {
    100% {
        background-position: -512px;
    }
}

.ico-chatAnim:hover {
    animation-play-state: running;
    animation-iteration-count: 1;
    animation-duration: 1.2s;
    animation-timing-function: steps(8);
}


HTML généré via .Net :

<a id="btnObs" class="ico-chatAnim sz32" href="javascript:__doPostBack('btnObs','')"></a>
<a id="LinkButton1" class="ico-chatAnim sz64" href="javascript:__doPostBack('LinkButton1','')"></a>



Merci à tous !
Modifié par conan76 (29 Jun 2018 - 16:16)
Modérateur
background-size et background-position exprimé en % font que quelque soit la taille du conteneur, l'image s'adaptera, que ce soit un sprite ou non .

exemple
.sprite {
   background-image:url(monsprite.png);
   background-size: 1000% 100%;/* une bande de 10 images*/
   animation: move 3s infinite steps(9);
}

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


Une démo https://codepen.io/gc-nomade/pen/BVeKed Les 2 div peuvent être redimensionnés avec la souris pour voir les effets de background-size et position en pourcentage ...

Il n'est pas nécessaire de multiplier les class et règles pour chaque taille de conteneur, peut-être juste à penser à la qualité utile de l'image.
Modifié par gcyrillus (04 Jul 2018 - 22:11)
Sujet clos
Aller à