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();