css – 在正弦路径上为元素设置动画

我需要在正弦波或路径上移动一个元素,如上图所示.我做了些什么.但它不能按我的意愿工作.

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

解决方法

您可以使用2 CSS 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>

请注意,此示例不包含供应商前缀.有关更多信息,请参阅canIuse：

> CSS keyframe animations
> CSS 2D transforms