今天完成事件

animation  css动画属性

它有属性形式

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iter

ation-count

animation-direction

分别代表这 第一个名字 这个是需要和 选择器的keyframe名称进行绑定可以实现动画。

第二个规定动画所花费的时间这里可以直接写成时间就行

第三个就是规定动画的速度，  一般我们都是linear动画从头到尾速度是相同的但也有其他值

如 ease-in动画从低速开始ease-out动画低速结束的等等还有很多

第四个就是延迟  比如第一个动画播完后第二个动画延迟几秒在开始

第五个就是播放次数 这里一版都是写无线循环infinite。

第6个就是规定你是否反向播放动画， 当你的动画从左到右的时候如果没有这个会直接跳到第一个如果有这一属性值就是从右到左来回播放。代码是alternate代表这反向播放

这是动画属性的值 最常用的 一般就是  animation: name  5s  infinte；

这三个属性是最常用的。  名字用来绑定的 5s就是animation-duration 可以直接写不用特意写出这个代码 最后就是循环这些是最常用的三个代码。

遇到问题 如果实现 3个原点跟这轮播一起动画 

这里的@keyframes 和 轮播的时间是一样的  里面的0% 49.99%的意思就是从0到 4.9秒这段时间出现的动画效果  %是代表这时间的，  而这里总时间加起来是10秒 也就是 animation: feizao1 10s infinte;  总和是10秒 如果你在设置100% 就相当于是停留10秒无线重复这10秒种的内容看起来就和暂定一样 如果把他们分段 设置不动的属性就是动画一样 在多少秒变颜色 停顿多少等。

这里注意下  如果 设置0%~10%  20%~30% 中间少了10%就相当于暂停一秒，而20%~30%之间可以这么理解 如果是图片的话那么它从0这宽度到占满全屏这个宽度 需要用到1秒的时间然后在暂停一秒接着 播放下一个时间段一直到100%也就是10秒播放完毕后在进行重复 如果设置animation-direction：alternate;s属性 那么它会从100%倒退到0%的时间播放就相当于倒退，来回播放。 

steps()这个参数可以让你动画不是连续播放 而是一瞬间完成 比如 你的图片从0到100设置是需要3秒完成用这个属性就是一瞬间切换然后停留3秒钟 这个属性主要用来控制关键帧动画控制一帧一帧的。 占时还不太熟悉。这些属性是可以完成实现3个远点跟则轮播一样播放动画当然还有很多属性没有用到。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation