css3 tupianlunbo_CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码（图片轮播效果一）...

首先来看一下效果：(这些个电影画风好温柔...)

0、先讲一个CSS3的动画用法

animation基本用法是：animation: name keeping-time animate-function delay times iteration final;

第一个参数：name (animation-name)：

动画的名字，CSS3采用“关键帧 keyframes”来定义动画,如下第4个步骤展示；

1 @keyframes image{

2 0%{opacity:0;}

3 100%{opacity:1;}

4 }5 /*或者*/

6 @keyframes image{

7 from{opacity:0;}

8 to{opacity:1;}

9 }

第二个参数 keeping-time (animation-duration)：

动画的持续时间，单位s或者ms(一定要带时间单位)；

第三个参数 animate-function (animation-timing-function)：

(动画方式)的贝赛尔曲线，可取值有：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)；

第四个参数 delay (animation-delay)：

动画延迟执行的时间，单位为s或者ms{即使延迟时间为0，也必须加上时间单位，