1、transition： 平衡过渡
transition简写属性，transition{transition-property，transition-duration，transition-timing-function，transition-delay}
transition-property
| 属性值 | 含义 |
|---|---|
| all | 所有 |
| none | 没有属性 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
transition-duration
| time | 这个效果执行多长时间 |
|---|
transition-timing-function指定效果的转速曲线
| 属性值 | 含义 |
|---|---|
| linear | 匀速 |
| ease | 先快后慢再慢 |
| ease-in | 以慢速开始 |
| ease-out | 以慢速结束 |
| ease-in-out | 以慢速开始和结束 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
transition-delay延迟多少秒执行效果
animation： 动画
一般通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
| animation-name | 指定要绑定到选择器的关键帧的名称 |
|---|---|
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔 |
| animation-iteration-count | 定义动画的播放次数 |
| animation-direction | 指定是否应该轮流反向播放动画 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| animation-play-state | 指定动画是否正在运行或已暂停 |
transform： 改变元素的大小、位置
translate:移动
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x)
translateY(y)
translateZ(z)
rotate：旋转
旋转的时候，可以给旋转的模块设置一个原点
transform-origin: x , y;
scale：放缩
skew：扭曲（倾斜）
matrix:矩阵，一般用来变换前面四种没有的效果，也可以实现前面四种效果
