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:矩阵，一般用来变换前面四种没有的效果，也可以实现前面四种效果