css进阶添加动画效果和引入动画库

添加动画效果：

@keyframes 名称 { （keyframes-selector）css动画样式 }

必须添加名称然后再css里边调用名称，必须有执行的时间，动画效果才可以生效

animation-name 名称：规定需要绑定到选择器的 keyframe 名称，必须要有，然后用css调用名称。

animation-duration 时间：规定完成动画所花费的时间，以秒或毫秒计。默认是 0。

animation-timing-function 动画曲线：规定动画的速度曲线。默认是 "ease"。

animation-delay  动画开始时间：规定动画何时开始。默认是 0。

animation-iteration-count 动画播放次数：规定动画被播放的次数。默认是 1。

animation-direction 逆向播放：规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state 播放暂停：规定动画是否正在运行或暂停。默认是 "running"。

添加动画效果属性

animation-timing-function 动画曲线的属性值

linear：匀速运动，动画从头到尾的速度是相同的。

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始。

ease-out：动画以低速结束。

ease-in-out：动画以低速开始和结束。

steps（）：常用于实现动画卡帧效果，多少张图片可以卡出来多少帧数，然后实现雪碧图运动的效果

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。详细解释转到w3cschool

animation-delay 定义动画开始的时间

可以设置s描述，可以设置ms毫秒，如果再简写的时候，第一个数值一定是动画效果的时间，第二个数值才是定义动画开始的时间

animation-iteration-count 规定动画的播放次数，默认是1次

infinite： 指定动画播放次数为无限次

n： 动画可以自己设置n次

animation-direction 定义动画是否还会往回走（如果播放次数为1次，那么该属性不起作用）

normal： 默认值，动画正常播放

reverse： 动画反向播放

alternate： 动画在奇数次正向播放，在偶数次反向播放

alternate-reverse： 动画在奇数次反向播放，在偶数次正向播放

animation-play-state 规定动画是否正在运行或者暂停

paused： 指定暂停动画

running： 指定正在运行的动画