問題描述

CSS3動(dòng)畫，讓絕對(duì)定位的元素沿圓弧移動(dòng)，

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

這樣寫的話，會(huì)是線性的移動(dòng)，從一個(gè)點(diǎn)，移動(dòng)到另外一個(gè)點(diǎn)，想要的效果是按圓弧來(lái)移動(dòng)

問題解答

x軸和y軸的動(dòng)畫分開寫，然后兩個(gè)速度不一樣就會(huì)形成曲線運(yùn)動(dòng)，具體曲線可以通過計(jì)算，隨便寫了個(gè)也可以直接給對(duì)應(yīng)關(guān)鍵幀的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

關(guān)鍵是:

transform-origin、transform: rotate();