为正弦路径上的元素设置动画答案

【问题标题】：Animate an element on a sine path为正弦路径上的元素设置动画
【发布时间】：2016-08-05 17:43:23
【问题描述】：

我需要在正弦波或路径上移动元素，如上图所示。我做了一些东西。但它没有按我的意愿工作。

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

&lt;img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png"&gt;

【问题讨论】：

这不是我想要的。 - 好的，但它应该如何工作？您需要明确您需要什么以及弯曲路径的含义。
是的。等等，我正在发布图片。
这对于 CSS 来说非常复杂（如果不是不可能的话）。您可能想改用 SVG + CSS 动画。
我有一张图片。我想移动这个图像。如果可以使用 SVG + CSS，那么好的。没问题。
实际上，即使使用 SVG 也可能无法实现。他们使用的属性 (startOffset) in this demo 似乎已被弃用。

标签： css css-transitions css-animations

【解决方案1】：

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

请注意，此示例不包含供应商前缀。有关详细信息，请参阅可用于：

【讨论】：

note 900% of 10% is 90%... 900/100*10/100 = 9 * 0.1 = 0.9 = 90%....这就是为什么动画知道将 x 平移多远, 页面有多大。