Animation:translate
Code Css 1ère avion
.avion1{
position:absolute;
width:164px;
height:164px;
margin-left:-400px;
margin-top:-110px;
top:75px;
bottom:0px;
left:1550px;
z-index:4;
-moz-animation:translate 5s linear infinite;
-webkit-animation:translate 5s linear infinite;
background-image: url('/avion_1.png');
background-repeat: no-repeat;
}
Code Css 2ème avion
.avion2{
position:absolute;
width:256px;
height:256px;
margin-left:-400px;
margin-top:-100px;
top:124px;
bottom:0px;
left:1100px;
z-index:5;
-moz-animation:translate 5s linear infinite;
-webkit-animation:translate 5s linear infinite;
background-image: url('/avion_2.png');
}
David LAURENT | TMI | Webinnov™
Code Css 3ème avion
.avion3{
position:absolute;
width:128px;
height:128px;
margin-left:-1000px;
margin-top:0px;
top:124px;
bottom:0px;
left:2000px;
z-index:2;
-moz-animation:translate 5s linear infinite;
-webkit-animation:translate 5s linear infinite;
background-image: url('/avion_3.png');
}
Code Css de l’animation
@-moz-keyframes translate{
from{left:106px;}
10%{top:99px;}
20%{top:93px;}
30%{top:89px;}
40%{top:87px;}
50%{top:86px;}
60%{top:87px;}
70%{top:89px;}
80%{top:93px;}
90%{top:99px;}
to{top:106px;}
}