Webinnov'@EureTransformations CSS3 : Animation : translate

Transformations CSS3 : Animation : translate

13 mars 2019 in CSS

Animation:translate

Code Css pour le 1ère avion

CSS

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

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

CSS

.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'); }

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

CSS

.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'); }

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

CSS

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

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

David LAURENT | TMI | Webinnov™