Sinus path element animation

Question

I prefer to move the element on a sine wave or path , as shown in the figure above. I did something. But it does not work the way I want.

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 } } 

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

Answer 1

You can move the element along the sine path using 2 CSS keyframe animations . The point is to translate the left right using the linear synchronization function and up / down with the idle time synchronization function.

To do this, you need to translate the container and move the element up and down using two different key frame animations . Here is an example:

 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> 

Note that this example does not contain vendor prefixes. For more information, see CanIuse for:

• CSS keyframe animation
• CSS 2D transforms