用css動畫元素方向控制

我用css動畫有3只鳥。目前所有三隻鳥都是直線進入畫布內，但是鳥不像這樣飛。我想實現的明確描述在圖片中。我想要控制鳥兒在旅行的每一個階段飛向帆布的飛行方向。任何人都可以幫助我實現它嗎？用css動畫元素方向控制

我的代碼

HTML

<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="canvas"> 
    <img class="people" src="https://i.imgsafe.org/9967e45cc8.png" alt=""> 
    <img class="bird-1" src="https://i.imgsafe.org/996ac926a0.png" alt=""> 
    <img class="bird-2" src="https://i.imgsafe.org/996bc03236.png" alt=""> 
    <img class="bird-3" src="https://i.imgsafe.org/996cfb24a4.png" alt=""> 
</div> 
</body> 
</html>

CSS

body{ 
margin: 0; 
} 

.canvas{ 
background-color: lightgrey; 
width: 300px; 
height: 250px; 
position: relative; 
left: 30%; 
top: 20%; 
overflow: hidden; 
} 

.logo, 
.people{ 
position: absolute; 
} 


.bird-1{ 
position: absolute; 
width: 50px; 
-webkit-animation: first 2s linear forwards; 
animation: first 2s linear forwards; 
top: -70px; 
left: 55px; 
} 

.bird-2{ 
position: absolute; 
width: 50px; 
-webkit-animation: second 2s linear forwards; 
animation: second 2s linear forwards; 
top: 165px; 
left: -50px; 
} 
.bird-3{ 
position: absolute; 
width: 50px; 
-webkit-animation: third 2s linear forwards; 
animation: third 2s linear forwards; 
top: 163px; 
right: -50px; 
transform: rotateY(180deg); 
} 

@-webkit-keyframes first{ 
0%{top: -70px;} 
100%{top:65px;} 
} 

@-webkit-keyframes second{ 
0%{left: -50px;} 
100%{left:15px;} 
} 

@-webkit-keyframes third{ 
0%{right: -50px;} 
100%{right:135px;} 
}

My PEN

來源

2017-03-03 Saif Md Towfiq Islam