如何使用CSS3动画沿着曲线路径使一个球运动？

Question

我有一个场景，需要沿着曲线路径动画运动一个球。我不知道如何使用 css3 来实现这个功能。我知道没有 path 这种动画类型。

是否有一种方法可以在弯曲的背景上动画运动一个球。

这里是 演示链接

我的代码:

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>

- 3gwebtrain

---

这可以帮助 http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/ - Naeem Shaikh

Answer 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。

- Naeem Shaikh

---

我发现很难与我的背景图片匹配。有什么解决方法吗？ - 3gwebtrain

如果您想移动一个对象，必须知道它应该移动的路径！ - Naeem Shaikh