CSS > sine curveを作ろうとしたが失敗 > 教えていただきました

CSSというのを試しているうちに、ふとsine curveが作れないかと思った。

<div>
<span>o</span>
</div>

div{
  position: relative;
  top: 200px;
  left: 50px;
}

span{
  position: absolute;
  top: 100px;
  left: 100px;

  font-size: 1em;

  animation: anim 3s linear infinite;
}

/* アニメーション */
@keyframes anim{
    0%{ 
      transform: translate(0px, 50px);
      animation-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); /* ease in sine */
      }
    50% {
      transform: translate(50px, 0px);
      animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* ease out sine */
    }
  100%{ 
      transform: translate(100px, 50px);
    }
}

できてない。sine curveというより三角波のようだ。
https://jsfiddle.net/v2v70epw/

参考 https://cho45.stfuawsc.com/misc/css3-sine-wave.html
参考 http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/