一、过度动画：transition
五个属性：
transition-property css 样式属性名称
transition-duration 动画持续时间（需要单位s）
transition-timing-function 动画效果函数名称
linear、ease、ease-in、ease-out、
ease-in-out、cubic-bezier(n,n,n,n)
transition-delay 延迟执行动画的时间
animation-play-state:paused;暂停动画执行
简写
transition：样式 持续时间 动画效果 延迟时间
transition：持续时间；（all时间 ease 0）
二、关键帧动画
七个属性
animation-name 帧动画名称
animation-duration 动画持续时间（需要单位s）
animation-timing-function 动画效果函数名称（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）
animation-delay 延迟执行动画的时间
animation-iteration-count 动画播放次数（n 次数；infinite 无限次）
animation-direction 是否轮流播放（normal 正常播放 alternate 来回轮流播放）
animation-fill-mode：none丨forwards丨backwards丨both丨initial丨inherit； 动画完成时的状态
样式：
@keyframes 帧动画名称{selector{styles}}
selector from to/%
简写：
animation：name time ease delay count direction fill-mode；
三、transform的2D变换
偏移（left top）
translate（x,y）translateX（） translateY（）
缩放（width height）
scale（x,y） scaleX() scaleY()
旋转
rotate（角度）
倾斜
skew(x角度，y角度) skewX(角度) skewY（角度）
四、transform的3D变换
每个属性都比2D多了一个Z轴需要设置transform-style:preserve-3d；才能看到3D视觉效果
偏移（left top 景深）
translate3d（x,y,z,angle） translateX（） translateY（） translateZ（）
缩放（ width height 景深）
scale3d（x,y,z） scaleX（） scaleY（） scaleZ（）
旋转
rotate3d（x,y,z） rotateX（） rotateY（） rotateZ（）
注：倾斜没有Z轴
transform-origin 改变被变换元素的转换参考位置
transform-origin：left top；（left top之间是空格）
五、3D透视（效果类似于相机拍照）
透视距离（perspective）
当给一个元素设置透视属性时，其子元素会获得透视效果，通过设置不同的值，可以改变观察子元素的距离
透视位置（perspective-origin）
需要先使用perspective，可以改变在观察子元素时，观察点的X,Y方向的位置
设置背面不可见（backface-visibility:hidden）
设置之后，当旋转180度查看元素背面时，将看不到正面透视内容（如果不设置，默认正面内容可以被透视）