CSS3動畫，讓元素沿圓弧移動

問題描述

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;}回答2：

用transform: rotate()

cc http://segmentfault.com/q/1010000002951253/a-1020000002951387

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

關鍵是:

transform-origin、transform: rotate();