transform 2D转换，animation 动画
2D转换 transform
transform 是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果
移动 translate
transform: translate(x, y); /* 或者分开写，单位px */
transform: translateX(n);
transform: translateY(n);
重点
- 定义2D转换中的移动，沿着X轴和Y轴移动元素；
- translate最大的有点：不会影响到其他元素的位置；
- translate中的半分比单位是相对于自身元素的
translate:(50%, 50%); - 对行内标签没有效果
旋转 rotate
transform: rotate(度数deg) /* 单位为 deg */
重点：
- rotate里面跟度数，单位是deg，比如rotate(45deg)
- 角度为正时，顺时针，负时，逆时针
- 默认旋转中心点是元素的中心点
转换中心点 transform-origin
transform-origin: x y;
重点：
- 注意后面的x和y使用空格隔开的
- x y默认转换的重点是元素的中心点（50% 50%）
- 还可以给 x y 设置像素或者方位名词 （top bottom left right center）
缩放 scale
transform: scale(x, y);
注意：
- 注意x和y是用逗号隔开
- transform:scale(1, 1); ：宽和高都放大一倍，相对于没有放大，依次类推
- transform:scale(2); ：宽和高都放大2倍，第二个默认与第一个一致
- transform:scale(0.5, 0.5); ：缩小
- scale缩放的最大优势，可以设置中心缩放点，默认以中心缩放，而且不影响其他盒子；
综合性写法
- 同时使用多个转换，其格式为：
transform: translate() rotate() scale()等 - 其顺序会影响转换的效果，（先旋转会改变坐标轴）
- 当我们同时有位移和其他属性的时候，要将位移放到前面
动画 animation
动画 animation 是CSS3中具有颠覆性的属性之一，可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，相比较于过渡，动画可以实现更多变化，更多控制，连续自动播放等动画
动画基本使用
1，先定义动画
2，再调用动画
1，使用 keyframes 定义动画
/* 0%, 100% 也可使用 from, to */
@keyframes animationName{
0% {
transform: translateX(0);
}
100% {
transform: translate(200px, 200px);
}
}
2，调用动画
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: animationName;
animation-duration: 2s;
}
动画序列
- 0% 是动画的开始，100%是动画的完成，这样的规则就是动画序列
- 在 @keyframes 中规定某项 css 样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变换为另一种样式效果，可以改变任意多的次数和样式；
- 用百分比来规定变化发生的时间，或用关键词 from to，等同于 0% 100%
动画属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画的简写属性，除了 animation-play-state |
| animation-name | 规定keyframes动画的名称（必须） |
| animation-duration | 规定动画完成一个周期所花费的时间，默认是0（必须） |
| animation-timing-function | 规定动画速度曲线，默认是ease |
| animation-delay | 规定动画何时开始默认是0 |
| animation-interation-count | 规定动画播放次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是 normal，alternate 逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停，默认是running，还有paused |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
animation: move 2s ease 0s infinte alternate backwards;
速度曲线
animation-timing-function: 规定动画的速度曲线，默认是 ease
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的，匀速 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数的间隔数量与步长 steps(10) |
