如何使用 css3 动画沿曲线路径为球设置动画？

【问题标题】：How to animate a ball along the curved path using css3 animation?如何使用 css3 动画沿曲线路径为球设置动画？
【发布时间】：2015-06-08 15:51:23
【问题描述】：

我有这个场景可以让球沿着弯曲的路径制作动画。我不知道使用css3 来实现它。我知道没有path 动画之类的东西。

有没有办法在弯曲的背景上为球设置动画。

这里是Live Demo

我的代码：

div.path {
  background:url(https://dl.dropboxusercontent.com/u/10268257/images/path.png) no-repeat center bottom;
  width:397px;
  height:66px;
  position: relative;
}

div.ball {
  background : green;
  width:20px; height:20px;
  border-radius:50%;
}

<div class="container">
  <div class="path">
    <div class="ball"></div>
  </div>
</div>

【问题讨论】：

这可以帮助useragentman.com/blog/2013/03/03/…

标签： jquery css animation

【解决方案1】：

这不是您问题的完整解决方案，但您询问如何在 css 动画中定义 path，所以您可以这样做：

JSFIDDLE

div.ball {
    background : green;
    width:20px; height:20px;
    border-radius:50%;

   -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */ 
   animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,IE 10+, safari 5 */
}

@keyframes path {
    0% { transform: translateX(10px)  }
    10%   { transform:  translateX(0px)   translateY(20px)}
     20%   { transform:  translateX(20px)   translateY(40px)}
      30%   { transform:  translateX(50px)   translateY(52px)}
     40%   { transform:  translateX(150px)   translateY(50px)}
}

如果您在代码中看到，您实际上是在定义球移动的路径为 X,Y

【讨论】：

我发现很难与我的 bg 图像匹配。有什么解决办法吗？
如果你想移动一个物体，你必须知道它应该移动的路径！