CSS动画语法

作用：

安心（告诉用户页面在执行）

简单（减少JS代码）

流畅（浏览器去执行，性能优化）

#伪类

&:focus 鼠标按动时候的效果

&:hover 光标移动到时的效果

&:active 鼠标按动时候的效果

#transition 变换

transition-property :规定设置过渡效果的CSS属性的名称。none/all/property

transition-duration :规定完成过渡效果需要多少秒或毫秒。ns/ms

transition-timing-function :规定速度效果的速度曲线。linear（线性）/ease/...（缓冲）

transition-delay :定义过渡效果何时开始。ns/ms

#transform过渡

transform: none / transform-functions;

transform-functions :

translate(x,y)定义2D转换;

rotate (angle)定义旋转;

skew(x,y)定义2D倾斜变换;

scale(x[,y])定义2D缩放;

perspective(n)定义3D透视视图;

scale3d(x,y,z)定义3D缩放；

translate3d(x,y,z)定义3D转换。

#animation  动画

animation-name：规定动画的名称。 keyframename

animation-duration：规定动画完成一个周期所花费的秒或毫秒。time

animation-timing-function：规定动画的速度曲线。linear线性 / ease加快-慢 / ease-in慢-快 / ease-out快-慢 / ease-in-out慢-快-慢

animation-delay:规定动画开始是否需要延时。time

animation-iteration-count:规定动画被播放的次数。n次数 / infinite无限循环

animation-direction:规定动画是否在下一周期逆向地播放。normal / alternate

animation-play-state:规定动画是否正在运行或暂停。paused / running

animation-fill-mode:规定动画执行之后的状态。 none / forwards / backwards / both