CSS3动画，让绝对定位的元素沿圆弧移动，
@keyframes bimg1 { 0% {top: 10%;left: 12%;width:50%;} 30% {top: -10%;left: -12%;width:45%;} 100% {top: 19%;left: 52%;width:40%;} }
这样写的话，会是线性的移动，从一个点，移动到另外一个点，想要的效果是按圆弧来移动
欢迎选择我的课程，让我们一起见证您的进步~~
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; }
用變換：旋轉()
抄送http://segmentfault.com/q/1010000002951253/a-1020000002951387
http://codepen.io/zzuieliyaoli/pen/EVVGKM
關鍵是:
transform-origin、transform: rotate();
x軸和y軸的動畫分開寫，然後兩個速度不一樣就會形成曲線運動，具體曲線可以透過計算，隨便寫了個
也可以直接給對應關鍵影格的x，y值
用變換：旋轉()
抄送http://segmentfault.com/q/1010000002951253/a-1020000002951387
http://codepen.io/zzuieliyaoli/pen/EVVGKM
關鍵是:
transform-origin、transform: rotate();