CSSのアニメーションによる要素の方向制御

私は3つの鳥が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

あなたが（曲線で）一定の速度でX軸上の動きを作成する必要があり、別の速度でY軸移動します。あなたはまた、それぞれの鳥のためのSVGパスを作成し、この技術を使用するが、それはJavaScriptが必要ですでき http://tobiasahlin.com/blog/curved-path-animations-in-css/

：http://icanbecreative.com/article/animate-element-along-svg-path/

出典

2017-03-03 18:58:28 Zetura

おかげであなたはそれはあなたがCSSでそれを行うために必要なすべてを与える必要があり、このチュートリアルを確認することができますZetura、私はそれを試してみると、私はあなたに戻ってきます:) ..歓声 –

CSSのアニメーションによる要素の方向制御

答えて

関連する問題