今日完成：

 将任务十四中的轮播图模拟完成

今日收获：了解并使用了css3动画

1  如今日模拟轮播图所使用的css

红色标注的就是相当于一个id，方便@keyframes进行定位并引用

1. 2  上面案例中的20s，相当于定义了此次动画所用时长
2. ‍‍必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
3. 
   
4. 3  下面的表格列出了 @keyframes 规则和所有动画属性：

5. 属性	描述	CSS
   ‍‍‍‍@keyframes	规定动画。	3
   animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
   animation-name	规定 @keyframes 动画的名称。	3
   animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
   animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
   animation-delay	规定动画何时开始。默认是 0。	3
   animation-iteration-count	规定动画被播放的次数。默认是 1。	3
   animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
   animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
   animation-fill-mode‍‍	规定对象动画时间之外的状态。‍‍	3

4  由于-webkit 不支持@keyframes，所以要在@keyframes加上前缀。

今日困惑及处理：模拟轮播图时所遇到的难点

1 整个盒子的移动相对于视窗

在刚使用动画时，一直卡在盒子内部的小盒子进行动画操作，后来在搜索的时候发现，其实并不是，

之所以教程里面都用小盒子，是为了更直观的让大家感受到盒子在父盒子内的移动，而不是父盒子一定要大于子盒子的宽度，

参考着其他人的案例，自己将里面的东西模拟了一遍之后发现，结果正验证了我的猜想，css动画中的子盒子移动是相对于父盒子的视窗，

例如任务十四中的轮播图，子盒子有三个图，每个都占视窗的100%，即每个图的宽度都是100vw，只需将父盒子设置一个

width：100vw;

overflow：hidden；

即可实现盒子视窗内，每次都只有一个盒子。

2 css动画移动时的断点

断点的个数始终是和页面的个数相等，如任务十四中有三个图，那么如上图所示，从0开始设置3个断点，

刚开始的时候，由于自己自作聪明的设了四个断点，从而导致轮播图在运行的时候始终会多出一个空白页面，

后来在百度的时候，发现大家都是有几个图，就有几个断点，最终我才明白，盒子的移动始终是相对于父盒子的视窗，

而视窗内的所有东西都是默认的以左上为起点，所以，当我设置100%的时候，其实就相当于命令视窗内的子盒子的末尾出现在

视窗的左侧，这样自然而然的就会出现一片空白来填充窗口。

3 初始状态的0%和0不是一回事，当初始状态0%写成了0，css会显示未定义此状态，从而报错

明日计划：开始任务十五，对任务十二，十三进行知识回顾并上传至confluence