参考这个transfrom、transition、animation区别
transfrom
transform是静态属性，非动画属性，和margin-left、margin-top类似。
- translate：平移，类似position:relative;translate()分三种情况：
- translate(x, y) // 水平、垂直方向移动
- translateX(x) // 水平方向移动，相当于translate(x, 0)
- translateY(y) // 垂直方向移动，相当于translate(0, y)
- scale：缩放，x,y可以是负数，负数的情况缩放并反转
- scale(x, y) // 水平、垂直方向缩放，第二个参数未提供则取与第一个一样的值
- scaleX(x) // x轴缩放
- scaleY(y) // y轴缩放
- rotate：旋转，整数顺时针，负数逆时针
- transform:rotate(90deg);
- transform-origin:top center; // 变形的基点，默认中心点
- skew：斜角变换
- skew(x, y) // 沿x轴、y轴进行扭曲变形，第二个参数未提供取值为0
- skewX(x) // 沿x轴进行扭曲变形
- skewY(y) // 沿y轴进行扭曲变形
- matrix：将所有的2D效果全部组合在了一起使用
transition
animation的简化版本
- transition: all 1s ease 0; // 过渡效果的css属性名称、过渡效果时间、速度曲线、延迟时间
那么简化了哪些地方？对比下面animation的属性，属性越多，控制的动画功能越多
animation
transition虽然简单好用，但是我们会发现它受到各种限制
1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生
2: transition是一次性的，不能重复发生，除非一再触发。
3： transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4：一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
（为了表达清晰，上述4条限制是我引用阮一峰大神博客里的简介）
为了突破这些限制，animation出来了
- animation: move 1s ease 0 infinite alternate; // keyframe名字、过渡效果时间、速度曲线、延迟时间、循环次数、是否轮流反向播放动画
- 定义keyframe：@keyframes name {}
transition和animation做动画
常和transfrom配合使用，区别如下：
| transition | animation | |
|---|---|---|
| 触发条件 | 通常和hover等事件配合，由事件触发 | 和gif差不多，立即播放 |
| 循环 | 不能循环 | 可设置循环次数 |
| 精确性 | 只能设置头尾，所有样式属性都要一起变化 | 可以设置每一帧的时间和样式，每一帧变化的样式可以单独设置 |
| 与JavaScript的交互 | tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果 | 与js交互不是很紧密 |