Question

怎么完全用CSS3使一个的元素做流畅的弧线运动？

Answer 1

可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。

Answer 2

1. 首先运动要用到transform：translate。

2. 单单translate不够，它是直线运动。这时候要加上旋转。因为直线运动的方向是相对于元素本身的指向的。

3. 所以在平移的时候改变元素本身的志向就会改变移动方向。这时候做一个平缓的旋转，那么它移动的轨迹就是弧线了。transform：rotate

4. 同时设置transform：translate()  rotate()。

5. 再使用动画，让这个属性平均的变换就可以了

Answer 3

在html5+css3中做到动态效果有4种方式：
1.transition(过渡)-通过属性值的变化来平滑过渡产生动画；

2.animate(动画)-这是css3中的自带的动画，可以动过各种变形（比如形变、缩放、位移），这里的位移其实就可以实现弧线运动，但是这儿需要的代码会非常多，个人是不建议用这个方法的。

3.canvas（画布）-可以想象着拿着一支笔在画笔上画东西，映射到电脑上，就是在每个坐标上面画东西。

4.svg-抱歉 这个我还没研究。

推荐方式：
canvas，步骤：

1.要达到弧线运动，那么就必须知道弧线的公式
2.通过setinterval来设置每一帧的坐标，比如：
(function({
y=公式与x的联系
} ,30)//这儿的30，代表30毫秒为一帧。
补充：如果要有个重复动作，那么久必须设置一个临界值，然后点返回原点重复动作；

Answer 4

这种需求除了自己要做研究或者show一下做个demo外，还是js比较好。
css3的话，给该元素套个外层dom，外层transform:rotate，控制好半径（由外层dom大小控制）、角度、时间就行。

Answer 5

这个要用到animation这个属性，

可以参考这个