साइन पथ पर एक तत्व को एनिमेट करें

Question

मैं पर निर्भर करता हूं, ऊपर की छवि में दिखाए गए साइन लहर या पथ पर एक तत्व को स्थानांतरित करें। मैंने कुछ बनाया लेकिन यह काम नहीं कर रहा है जैसा मैं चाहता हूं।

img { 
 
    position:absolute; 
 
    animation: roam infinite; 
 
    animation-duration: 15s; 
 
} 
 

 
@keyframes roam { 
 
    0% { left: 50px; top:100px } 
 
    10%{ left:100px; top:100px } 
 
    20%{ left:200px; top:200px } 
 
    30%{ left:300px; top:50px } 
 
    40%{ left:400px; top:200px } 
 
\t 
 
}

<img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png">

Answer 1

आप एक साइन पथ पर एक तत्व स्थानांतरित कर सकते हैं 2 सीएसएसkeyframe animations साथ। बिंदु एक रैखिक timing function के साथ बाएं दाएं अनुवाद करना और आसानी से समय-समय पर कार्य करने के साथ ऊपर/नीचे अनुवाद करना है।

इसके लिए कंटेनर का अनुवाद करने और तत्व को ऊपर और नीचे को 2 अलग-अलग कीफ्रेम एनिमेशन के साथ स्थानांतरित करने की आवश्यकता है।

div{ 
 
    position:absolute; 
 
    left:0; 
 
    width:10%; 
 
    animation: translate 15s infinite linear; 
 
} 
 
img { 
 
    position:absolute; 
 
    animation: upDown 1.5s alternate infinite ease-in-out; 
 
    width:100%; 
 
} 
 

 
@keyframes upDown { 
 
    to { transform: translatey(100px);} 
 
} 
 
@keyframes translate { 
 
    to { transform: translatex(900%);} 
 
}

<div> 
 
    <img src="http://i.imgur.com/QdWJXta.png"> 
 
</div>

ध्यान दें कि यह उदाहरण विक्रेता उपसर्गों शामिल नहीं है: यहाँ एक उदाहरण है। । - ठीक है, लेकिन यह कैसे काम करना चाहिए

• CSS keyframe animations
• CSS 2D transforms