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}}
