今天完成的事情：

1、学习CSS3动画相关的@keyframes规格与animation属性的使用。

      @keyframes用于创建动画，使当前样式按百分比或者使用“from”和“to”的组合变化到指定的样式。

      animation用于将动画捆绑到选择器，设置动画的名字（animation-name）、周期时长（animation-duration）、速度曲线（animation-timing-function）、何时开始（animation-delay）、播放次数（animation-iteration-count）、完成后是否逆序播放（animation-direction）、运行或暂定（animation-play-state）、动画时间外的状态（animation-fill-mode）。具体值可查阅w3cschool手册。

      例如：

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

也可以简写为：

div
{
animation: myfirst 5s linear 2s infinite alternate;
}

注：不知此IE9以及更低版本的IE，使用时Firefox加前缀-moz-，Chrome 和 Safari 需要前缀 -webkit-， Opera加前缀-o-

2、CSS3的过渡效果，transition属性的使用，语法如下

transition: property duration timing-function delay;

值包含：CSS属性名称、周期时长、速度曲线、多久开始

3、CSS3的2D转换效果，transform属性的使用，包含几种方法：

• translate()     移动
• rotate()      旋转
• scale()    尺寸
• skew()    翻转
• matrix() 

4、利用CSS实现了图片轮播效果，具体实现方法如下：

      a.将需要轮播的图片n张向左浮动放在一个宽度为轮播区域宽度n倍的框中，使超出部分隐藏。

      b.利用动画改变图片窗口的定位，例如"left: -100%;"从而实现轮播。

明天计划的事情：先完成任务7页面的其他静态部分，然后开始了解javascript，看能否实现对轮播图区域的操作。

遇到的问题：

问题：在设置轮播图全部向左浮动的时候，图片并不能像想象中那样横向排列，隐藏超出去的部分

解决方法：将最外层的框宽度设置为100%，overflow设置为hidden,在所有轮播图外设置一个框（例：<div class="window">轮播图部分</div>），将框的宽度设置为400%（4张图片）高度固定，position设置为relative。

收获：通过今天的尝试，对JavaScript能够实现的效果产生了兴趣。