今天完成的事情：

轮播图动画效果。

明天计划的事情：

任务14尽量完成。

遇到的问题：

圆点的动画效果，我用的是设计了3个动画效果，然后同时运行，改变背景色，和图片的动画效果，一个时间，然后同时同步，坐到效果，但是点击效果时的动画，还需要再去做，就很多问题，所以，今天晚上再去想想，明天争取做完。

-webkit-keyframes dot1 {
    0%,25% {
       background-color: blue;
    }
    35%, 50% {
       background-color: #d0d6d9;
    }
    60%,100% {
        background-color: #d0d6d9;
    }
}
@-webkit-keyframes dot2 {

    0%,25% {
        background-color: #d0d6d9;
    }
    35%, 50% {
        background-color: blue;
    }
    60%,100% {
        background-color: #d0d6d9;
    }
}
@-webkit-keyframes dot3 {

    0%,25% {
        background-color: #d0d6d9;
    }
    35%, 50% {
        background-color: #d0d6d9;
    }
    60%,100% {
        background-color: blue;
    }
}
#l01:checked ~ #opts .dot1 {
    -webkit-animation-name:the1;
}
#l02:checked ~ #opts .dot2{
    -webkit-animation-name:the2;
}

#l03:checked ~ #opts .dot3{
    -webkit-animation-name:the3;
}
#l01:active ~  #opts .dot1 {
    -webkit-animation-name:none;
    background-color: blue;
}
#l02:active ~ #opts .dot2 {
    -webkit-animation-name:none;
    background-color: blue;
}

#l03:active ~ #opts .dot3 {
    -webkit-animation-name:none;
    background-color: blue;

   第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。

要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property：规定对哪个属性进行过渡

transition-duration：定义过渡的时间，默认是0

transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease

transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

 第二种叫做关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。具体格式为：

@keyframes 动画名称{

      时间点 {元素状态}

      时间点 {元素状态}

animate.css的使用

animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：

然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery，要给一个id为demo的元素添加一个摇动的动画

2.动画方向（animation-direction） animation-direction属性表示CSS动画是否反向播放。 可选配置参数为: single-animation-direction = normal | reverse | alternate | alternate-reverse animation-direction: normal 正序播放 animation-direction: reverse 倒序播放 animation-direction: alternate 交替播放 animation-direction: alternate-reverse 反向交替播放 animation-direction: normal, reverse animation-direction: alternate, reverse, normal 动画源码 MDN文档 

3.动画延迟（animation-delay） animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。 默认值0s，表示动画在该元素上后立即开始执行。 该值以秒(s)或者毫秒(ms)为单位。

 4.动画迭代次数（animation-iteration-count） animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。 默认值只播放一次。 single-animation-iteration-count = infinite | number 

5.动画填充模式（animation-fill-mode） animation-fill-mode是指给定动画播放前后应用元素的样式。 single-animation-fill-mode = none | forwards | backwards | both animation-fill-mode: none 动画执行前后不改变任何样式 animation-fill-mode: forwards 保持目标动画最后一帧的样式 animation-fill-mode: backwards 保持目标动画第一帧的样式 animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。

 6.动画播放状态（animation-timing-function） animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。 默认值为running single-animation-timing-function = running | paused running 动画正常播放 paused 动画暂停播放

收获：

学会了动画效果