CSS3过渡

 CSS过渡能够做出一些好看动画效果，无需使用Flash动画或JavaScript

使用语法：

         transition:  property   time   speedChange   delayTime,    . . .

属性：  

         ① property：过渡的属性

          ② time：过渡的时间

          ③ speedChange ：过渡时速度的变化

          ④ delayTime：过渡效果延迟触发的时间

     一个过渡属性为一组，多个过渡属性用逗号分隔

使用如下：

① 令box1悬浮时宽度过渡1s

.box1:hover {
    width: 200px;
    transition: width 1s;
}

② 令box1悬浮时宽度过渡1s，延迟0.5s触发

.box1:hover {
    width: 200px;
    transition: width 1s 0.5s;
}

③ 令box1悬浮时高度过渡1s，过渡时速度变化选用ease（渐进渐出，是默认值），延迟0.2s触发

.box1:hover {
    height: 200px;
    transition: height 1s ease 0.2s;
}

④ 令box1悬浮时宽度过渡1s，高度过渡1s，延迟0.5s触发，速度采用渐进渐出ease

.box1:hover {
    width: 200px;
    height: 200px;
    transition: width 1s ease 0.5s,  height 1s ease 0.5s;
}

⑤ 令box1悬浮时所有属性过渡1s

.box1:hover {
    width: 200px;
    height: 200px;
    transition: all 1s;
    /* 或 */
    transition: 1s;
}