重点:定义动画时的百分比间隔,与使用动画时延时设置
<style>
@-webkit-keyframes fadeIn{
0%{opacity:0;}5%{opacity:1;}35%{opacity:1;}40%{opacity:0;}100%{opacity:0;}
}
@-moz-keyframes fadeIn{
0%{opacity:0;}5%{opacity:1;}35%{opacity:1;}40%{opacity:0;}100%{opacity:0;}
}
@keyframes fadeIn{
0%{opacity:0;}5%{opacity:1;}35%{opacity:1;}40%{opacity:0;}100%{opacity:0;}
}
.CssSlider{
height: 456px; width: 300px; overflow: hidden; position: relative; margin: 50px auto;
}
.CssSlider img{
position: absolute; left: 0; top:0; z-index: 0;
}
img.slider01{
-webkit-animation:fadeIn 15s ease infinite both;-moz-animation:fadeIn 15s ease infinite both;animation:fadeIn 15s ease infinite both;
}
img.slider02{
-webkit-animation:fadeIn 15s ease 5s infinite both;-moz-animation:fadeIn 15s ease 5s infinite both;animation:fadeIn 15s ease 5s infinite both;
}
img.slider03{
-webkit-animation:fadeIn 15s ease 10s infinite both;-moz-animation:fadeIn 15s ease 10s infinite both;animation:fadeIn 15s ease 10s infinite both;
}
</style>
<div class="CssSlider">
<img src="1.jpg" class="slider01" alt="">
<img src="2.jpg" class="slider02" alt="">
<img src="3.jpg" class="slider03" alt="">
</div>