Transformations CSS3 : Animation : translate

13 mars 2019 in CSS

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