CSS3动画，让元素沿圆弧移动

Question

CSS3动画，让绝对定位的元素沿圆弧移动，

@keyframes bimg1 {
      0% {top: 10%;left: 12%;width:50%;}
      30% {top: -10%;left: -12%;width:45%;}
      100% {top: 19%;left: 52%;width:40%;}
    }
    

这样写的话，会是线性的移动，从一个点，移动到另外一个点，想要的效果是按圆弧来移动

Answer 1

x軸和y軸的動畫分開寫，然後兩個速度不一樣就會形成曲線運動，具體曲線可以透過計算，隨便寫了個
也可以直接給對應關鍵影格的x，y值

@keyframes bimg1 {
      0% {top: 0;}
      100% {top: 200px;}
}
@keyframes bimg2 {
  0%  {left: 0;}
  100% {left: 200px;}
}
 #item {
  animation: bimg1 2s infinite cubic-bezier(0,0,1,1),bimg2 2s infinite cubic-bezier(0,1,0,1);
  width: 10px;
  height: 10px;
  position: absolute;
  background: red;
}

Answer 2

用變換：旋轉()

Answer 3

抄送http://segmentfault.com/q/1010000002951253/a-1020000002951387

Answer 4

http://codepen.io/zzuieliyaoli/pen/EVVGKM

關鍵是:

transform-origin、transform: rotate();