animation

Animation simplette

Réaliser une animation telle que la celle-ci.
solution possible

<!DOCTYPE html>
 

<html lang="fr">

 
<head>
	<meta charset="utf-8">
	<title>  avion virevolte  </title>
	<style>
		
	div{
		width:550px;
		height:50px;
		border: 1px solid black;
	}
	 
	@keyframes  avance{ 
	 from {transform: translateX(0px); }
	 25%{transform: translateX(125px);  }
	 50%{transform: translateX(250px);  }
	  80%{transform: translateX(400px) rotate(120deg);  }
	   90%{transform: translateX(450px) rotate(120deg);  }
     to{transform: translateX(500px) rotate(180deg); }
	}
	
	
	@keyframes  couleur{ 
	 from {fill: red;}
	 50%{fill:purple;}
     to{fill: blue;}
	}
	
	
	#avion{
		animation-name: avance, couleur; /* noms des  animations */
		animation-timing-function: linear; /* nombre d'étapes */
		animation-duration: 4s; /* durée de l'animation */
		animation-iteration-count: infinite; /* répétition infinie*/
		animation-direction: normal; /* permet le retour */
	}
	</style>
	 
</head>


<body>
	
<div>
<svg id="avion" width="50" height="50" viewBox="-4 -4 12 9">
<polygon points="-4 0, 3 0, 3.5 -4, 4 0, 5 0, 8 0.5,   5 1, 4 1, 3.5 5, 3 1, -4 1"
   stroke-width="1" />
</svg>
</div>
</body>
 
</html>