Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Animations sprite CSS

Dernière modification : juin 2022

Le code :



<div class=animation>

<div class="blanka"></div>
<div class="zangief"></div>

</div>





*,
*::before,
*::after{

box-sizing: border-box;

}	


.animation{

background:url(fond.jpg) no-repeat center;
width: 621px;
height: 224px;

}

.blanka{
margin: 110px 160px;
width: 189px;
height: 91px;
float: left;
background: url(blanka.png) no-repeat center;
-webkit-animation:anim 1s steps(4) infinite;
animation:anim 1s steps(4) infinite

}

@keyframes anim{

0%{

background-position:0 0

}
100%{

background-position:-756px 0

}

}

.zangief{

float:left;
margin:100px -230px;
width: 139px;
height: 112px;
background:url(zangief.png) no-repeat center;
-webkit-animation:anim1 1s steps(4) infinite;
animation:anim1 1s steps(4) infinite}
@keyframes anim1 {0%{background-position:0 0}100%{background-position:-556px 0}}
@-webkit-keyframes anim1 {0%{background-position:0 0}100%{background-position:-556px 0}

}



Le code :



<div class=animation1>
<div class="goku"></div>
</div>




*,*::before,*::after{box-sizing: border-box;}	


.animation1{background:url(fond1.jpg) no-repeat center;width:256px;height:192px;margin:30px auto}
.goku{
float:left;
margin:100px 100px;
width: 105px;
height: 65px;
background:url(goku.png) no-repeat center;
-webkit-animation:anim2 2s steps(8) infinite;
animation:anim2 2s steps(8) infinite}
@keyframes anim2{0%{background-position:0 0}100%{background-position:-840px 0}}
@-webkit-keyframes anim2{0%{background-position:0 0}100%{background-position:-840px 0}}
	


Le code :



<div class=animation2>

<div class="mario"></div>

</div>




*,*::before,*::after{box-sizing: border-box;}	


.animation2{

background:url(fond.png) no-repeat center;
width:114px;
height:79px;
margin:60px auto

}

.mario{

float:left;
margin-top:-28px;
width:25px;
height:28px;
background:url(mario.png) no-repeat center;
-webkit-animation:anim3 1s steps(2) infinite;
animation:anim3 1s steps(2) infinite

}

@keyframes anim3{0%{background-position:0 0}100%{background-position:-100px 0}}
@-webkit-keyframes anim3{0%{background-position:0 0}100%{background-position:-100px 0}}
	




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.