Animiere ein Element auf einem Sinus-Pfad

Question

Ich benötige bewegen Sie ein Element auf Sinuswelle oder Pfad wie in der obigen Abbildung gezeigt. Ich habe etwas gemacht. Aber es funktioniert nicht wie ich will.

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

Sie können auf einem Sinuspfad ein Element bewegen mit 2 CSSkeyframe animations. Der Punkt ist, links nach rechts mit einem linearen timing function und hoch/runter mit einer Ease-In-Out-Timing-Funktion zu übersetzen.

Dazu muss der Container übersetzt und das Element mit 2 verschiedenen Keyframe-Animationen nach oben und unten verschoben werden. Hier ein Beispiel:

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>

Beachten Sie, dass dieses Beispiel nicht Anbieter Präfixe enthält. Weitere Informationen finden Sie canIuse für:

• CSS keyframe animations
• CSS 2D transforms