CSS3实现圆形轨迹的动画

### CSS3实现圆形轨迹的动画

#### 1. 前言

最近有点懒，就不多说废话了，还是直接上示例吧

#### 2. CSS3 transfrom 与 transition实现圆形旋转

自从CSS3在移动端兼容性好了之后，CSS实现的动画也越来越多。

先看一个例子：

开新页查看：[DEMO](/study/2019/20190113/index-1.html)；

这里主要是两套旋转，外层自动旋转，内层为了内部在旋转的任意位置，都能正常，也在进行旋转。

#### 3. transfrom 与 transition实现类似圆形进度条

transform与transition的实现，再配合：overflow与width:50%，即可实现；

毕竟本篇也不是用于讲原理的，就直接上示例了，毕竟对于 程序员 来说，还是代码来的实在：

实例一：

先化几个固定角度的圆：

开新页查看：[固定角度的圆DEMO](/study/2019/20190113/index-2.html)；

接下来，如果是静态的，以上面的解决思路，就完全可以实现了，那如果他我想要把上面的形状动起来呢？

依然很简单，看如下的，只需要再配合transition就可以了。

示例：

开新页查看：[会动的固定角度的圆DEMO](/study/2019/20190113/index-3.html)；

注意，这里呢，有一个限制，就是动画的缓动效果，最完美的是`linear`，只有这个效果，才是完全流畅的，不可以是`ease-in-out`这样的效果，因为这是两个元素的动画，连在一起实现的；

> 如果要求不高的话，也可以使用：`ease-in-out`， `ease-in`， `ease-out`来做这个缓动；当`180`之下，只需要一个元素的时候，就使用`ease-in-out`，当两个元素，都需要动的时候，前者使用`ease-in`，后者使用`ease-out`；但是因为前后转的角度不同，可能导致前后动画的快慢不一致。

#### CSS3 贝塞尔曲线与animation

强大贝塞尔曲线：

示例：

开新页查看：[贝塞尔曲线圆形轨迹DEMO](/study/2019/20190113/index-4.html)；

> 这种方法有个限制，就是无法使用transform来实现动画，因为同一个元素，不能分别在X轴和Y轴，同时使用transform，而transform只设置了X，Y轴的变化。

这个方法不好，使用起来比较麻烦，建议还是使用前面的两种；

### 不总结了

这里就是几个基本的方法，没有花时间，去找更多的实现，先放在这里了，以后慢慢补。

内容会持续更新，也欢迎提出新的实现方案；