Animate an element on a sine path

Question

I neeed to move an element on sine wave or path as shown in above image. I made something. But it is not working as 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 an element on a sine path with 2 CSS keyframe animations. The point is to translate left right with a linear timing function and up/down with an ease-in-out timing function.

This requires to translate the container and move the element up and down with 2 different keyframe 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 doesn't contain vendor prefixes. For more info, see canIuse for:

• CSS keyframe animations
• CSS 2D transforms