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的简化版本

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交互不是很紧密

巴特西