css3制作图片轮播

css3制作图片轮播其实就是用多张图片制作淡入淡出效果

假设用3张图片制作淡入淡出效果

假设总时长是12000ms

因为有6部分

则图2  delay:2000ms

图3  delay:6000ms

所以就有如下代码：

.csslider1 >  ul > li.num1 {
	-webkit-animation: fade 12000ms infinite 2000ms;
	-moz-animation: fade 12000ms infinite 2000ms;
	-ms-animation: fade 12000ms infinite 2000ms;
	-o-animation: fade 12000ms infinite 2000ms;
	animation: fade 12000ms infinite 2000ms;
	
}


.csslider1 > ul > li.num2 {
	-webkit-animation: fade 12000ms infinite 6000ms;
	-moz-animation: fade 12000ms infinite 6000ms;
	-ms-animation: fade 12000ms infinite 6000ms;
	-o-animation: fade 12000ms infinite 6000ms;
	animation: fade 12000ms infinite 6000ms; 
	
}

本来按道理说，图2的opacity的动画过程是这样的

图3的opacity的动画过程是这样的

所以我以为代码应该是这样

/* calculate autoplay */
@-webkit-keyframes fade {
	0%,60%,100%	{ opacity: 0;}
	20%,40%	{ opacity: 1;  }
}
@-moz-keyframes fade {
	0%,60%,100%		{ opacity: 0;}
	20%,40%	{ opacity: 1;  }
}
@-ms-keyframes fade {
	0%,60%	,100%	{ opacity: 0;}
	20%,40%	{ opacity: 1;  }
}
@-o-keyframes fade {
	0%,60%,100%		{ opacity: 0;}
	20%,40%	{ opacity: 1;  }
}
@keyframes fade {
	0%,60%,100%		{ opacity: 0;}
	20%,40%	{ opacity: 1;  }
}

/* calculate autoplay */
@-webkit-keyframes fade1 {
	0%, 100%	{ opacity: 0; }
     33.333333333333336%,66.666666666666667%{ opacity: 1; }
}
@-moz-keyframes fade1 {
	0%, 100%	{ opacity: 0; }
     33.333333333333336%,66.666666666666667%{ opacity: 1; }
@-ms-keyframes fade1 {
	0%, 100%	{ opacity: 0; }
     33.333333333333336%,66.666666666666667%{ opacity: 1; }
@-o-keyframes fade1 {
	0%, 100%	{ opacity: 0; }
     33.333333333333336%,66.666666666666667%{ opacity: 1; }
}
@keyframes fade1 {
	0%, 100%	{ opacity: 0; }
     33.333333333333336%,66.666666666666667%{ opacity: 1; }

.csslider1 >  ul > li.num1 {
	-webkit-animation: fade 12000ms infinite 2000ms;
	-moz-animation: fade 12000ms infinite 2000ms;
	-ms-animation: fade 12000ms infinite 2000ms;
	-o-animation: fade 12000ms infinite 2000ms;
	animation: fade 12000ms infinite 2000ms;
	
}


.csslider1 > ul > li.num2 {
	-webkit-animation: fade1 12000ms infinite 6000ms;
	-moz-animation: fade1 12000ms infinite 6000ms;
	-ms-animation: fade1 12000ms infinite 6000ms;
	-o-animation: fade1 12000ms infinite 6000ms;
	animation: fade1 12000ms infinite 6000ms; 
	
}

但这样发现运行结果只有图2和图3轮播，没有图1

猜测是图2和图3只能共用一个@keyframes

因为只用图2和图3都用上面代码keyframes的fade或fade1时，是运行成功的

源代码的@keyframes是这样写的

<pre name="code" class="css">/* calculate autoplay */
@-webkit-keyframes fade {
	0%, 50%, 100%	{ opacity: 0;}
	16.666666666666668%, 33.333333333333336%	{ opacity: 1 }
}
@-moz-keyframes fade {
	0%, 50%, 100%	{ opacity: 0; }
	16.666666666666668%, 33.333333333333336%	{ opacity: 1; }
}
@-ms-keyframes fade {
	0%, 50%, 100%	{ opacity: 0; }
	16.666666666666668%, 33.333333333333336%	{ opacity: 1; }
}
@-o-keyframes fade {
	0%, 50%, 100%	{ opacity: 0;  }
	16.666666666666668%, 33.333333333333336%	{ opacity: 1;; }
}
@keyframes fade {
	0%, 50%, 100%	{ opacity: 0;}
	16.666666666666668%, 33.333333333333336%	{ opacity: 1; }
}