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;
margin:30px auto}
.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}}
@-webkit-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}}
	

Source, inspiration, ressources :

CSS animations