今天完成的事情： 

今天学习了轮播图，有点困难，未完成
明天计划的事情：

深入学习一下轮播图，开始完成轮播图
遇到的问题：

看了半天没有头绪，明天继续学习
收获：学习CSS3 时可以利用animation 属性制作一个简单的纯CSS3轮播图

基础知识

属性 说明

animation-name 用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加 载时会应用 animation-name 指定的动画， 从而执行动画。

animation-duration 用来设置动画播放所需要的时间。

animation-timing-function 用来设置动画的播放方式。

animation-delay 用来指定动画的延迟时间

animation-iteartion-count 用来指定动画的播放的循环次数

animation-direction 用来指定动画的播放方向

animation- play-state 用来控制动画的播放状态

animation-fill-mode 用来设置动画的时间外属性

animation 以上的简称

除了这 9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性：@keyframes。 它的作用是声明一个动画，然后在 animation 调用关键帧声明的动画。

接下来详解9个属性的属性值：

1.animation-name:myani;

属性值 说明

none 默认值，没有指定任何动画

INDEX 是由@keyframes 指定创建的动画名称

2.animation-duration:

用来设置动画的时间： animation-duration:1s

3.animation-timing-function

//设置缓动

如：animation-timing-function: ease-in;

属性值 说明

ease 默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)

linear 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease-in 元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0)

ease-out 元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0)

east-in-out 元素样式从初始状态过渡到终止状态时，先加速，再减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier 自定义三次贝塞尔曲线

4.animation-delay

设置延迟时间 :animation-delay: 1s;

5.animation-iteration-count

//设置循环次数

如：animation-iteration-count:infinte

属性值 说明

次数 默认值为1

infinite 表示无限次循环

6.animation-direction

//设置缓动方向交替

如：animation-diretion:alternate

属性值 说明

normal 默认值，每次播放向前

alternate 一次向前，一次向后，一次向前，一次向后这样交替

7.animation-play-state

//设置停止播放动画

animation-play-state: paused;

8.animation-fill-mode

//设置结束后不在返回

如：animation-fill-mode: forwards;

属性值 说明

none 默认值，表示按预期进行和结束

forwards 动画结束后继续应用最后关键帧位置，即不返回

backforwards 动画结束后迅速应用起始关键帧位置，即返回

both 根据情况产生 forwards 或 backforwards 的效果