Animation:translate
Code Css pour le 1ère avion
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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 pour le 2ème avion
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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'); } |
Code Css pour le 3ème avion
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@-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;} } |
Créé par David LAURENT | TMI | Webinnov™
Aucun commentaire