效果：

关键点：利用keyframes 原理：infinite

注意点：在处理关键帧动画的时候，注意处理好 总共花费的 animation-duration：time  与每帧延延迟的时间的交错；要让动画显得层次感，处理好 每帧的延迟时间；

多注意时间的穿插 ；效果更很好；下面只是我的小插图；画的不一定对;

以下是我的代码；有兴趣拷贝来看看，仅作为我的练习记录；关键帧要兼容其他浏览器，自行补充前缀即可；

下面附上源码；

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯css轮播图</title>

</head>

<body>

<style>

*{ margin:0 ; padding:0}

ul,li{ list-style:none; margin:0; padding:0;}

.box,

.box:after {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0px;

    left: 0px;

    z-index: 0;

}

.box:after {

    content: '';

    background: transparent url(../images/pattern.png) repeat top left;

}

.box li span {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0px;

    left: 0px;

    background-size: cover;

    background-position: 50% 50%;

    background-repeat: none; background-color:#333;

    opacity: 0;

    z-index: 0;

	-webkit-backface-visibility: hidden;

    -webkit-animation: imageAnimation 18s linear infinite 0s;

    -moz-animation: imageAnimation 18s linear infinite 0s;

    -o-animation: imageAnimation 18s linear infinite 0s;

    -ms-animation: imageAnimation 18s linear infinite 0s;

    animation: imageAnimation 18s linear infinite 0s;

}

.box li div {

    z-index: 1000;

    position: absolute;

    bottom: 30px;

    left: 0px;

    width: 100%;

    text-align: center;

    opacity: 0;

    -webkit-animation: titleAnimation 18s linear infinite 0s;

    -moz-animation: titleAnimation 18s linear infinite 0s;

    -o-animation: titleAnimation 18s linear infinite 0s;

    -ms-animation: titleAnimation 18s linear infinite 0s;

    animation: titleAnimation 18s linear infinite 0s;

}

.box li div h3 {

    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

    font-size: 160px;

    padding: 0 30px;

    line-height: 120px;

    color: rgba(255,255,255,0.8);

}

.box li:nth-child(1) span { background-image: url(../images/love5.jpg) }

.box li:nth-child(2) span {

    background-image: url(../images/love3.jpg);

    -webkit-animation-delay: 6s;

    -moz-animation-delay: 6s;

    -o-animation-delay: 6s;

    -ms-animation-delay: 6s;

    animation-delay: 6s;

}

.box li:nth-child(3) span {

    background-image: url(../images/love1.jpg);

    -webkit-animation-delay: 12s;

    -moz-animation-delay: 12s;

    -o-animation-delay: 12s;

    -ms-animation-delay: 12s;

    animation-delay: 12s;

}

.box li:nth-child(2) div {

    -webkit-animation-delay: 6s;

    -moz-animation-delay: 6s;

    -o-animation-delay: 6s;

    -ms-animation-delay: 6s;

    animation-delay: 6s;

}

.box li:nth-child(3) div {

    -webkit-animation-delay: 12s;

    -moz-animation-delay: 12s;

    -o-animation-delay: 12s;

    -ms-animation-delay: 12s;

    animation-delay: 12s;

}

@-webkit-keyframes imageAnimation {

	0% {

	    opacity: 0;

	    -webkit-animation-timing-function: ease-in;

	}

	11% {

	    opacity: 1;

	    -webkit-transform: scale(1.05);

	    -webkit-animation-timing-function: ease-out;

	}

	30% {

	    opacity: 1;

	    -webkit-transform: scale(1.1);

	}

	35% {

		opacity: 0;

		-webkit-transform: scale(1.1) translateY(-20%);

	}

	49% {

		opacity: 0;

		-webkit-transform: scale(1.1) translateY(-60%);

	}

	100% { opacity: 0 ;  -webkit-transform: scale(1.1) translateY(-100%);}

}

@-moz-keyframes imageAnimation {

	0% {

	    opacity: 0;

	    -moz-animation-timing-function: ease-in;

	}

	11% {

	    opacity: 1;

	    -moz-transform: scale(1.05);

	    -moz-animation-timing-function: ease-out;

	}

	30% {

	    opacity: 1;

	    -moz-transform: scale(1.1);

	}

	35% {

		opacity: 0;

		-moz-transform: scale(1.1) translateY(-20%);

	}

	49% {

		opacity: 0;

		-moz-transform: scale(1.1) translateY(-60%);

	}

	100% { opacity: 0 ;  -moz-transform: scale(1.1) translateY(-100%);}

}

@keyframes imageAnimation {

	0% {

	    opacity: 0;

	    animation-timing-function: ease-in;

	}

	11% {

	    opacity: 1;

	    transform: scale(1.05);

	    animation-timing-function: ease-out;

	}

	30% {

	    opacity: 1;

	    transform: scale(1.1);

	}

	35% {

		opacity: 0;

		transform: scale(1.1) translateY(-20%);

	}

	49% {

		opacity: 0;

		transform: scale(1.1) translateY(-60%);

	}

	100% { opacity: 0 ;  transform: scale(1.1) translateY(-100%);}

}

@-webkit-keyframes titleAnimation {

	0% {

	    opacity: 0;

	    -webkit-transform: translateY(-300%);

	}

	8% {

	    opacity: 1;

	    -webkit-transform: translateY(0%);

	}

	22% {

	    opacity: 1;

	    -webkit-transform: translateY(0%);

	}

	28% {

	    opacity: 0;

	    -webkit-transform: translateY(100%);

	}

	35% { opacity: 0 }

	100% { opacity: 0 }

}

@-moz-keyframes titleAnimation {

	0% {

	    opacity: 0;

	    -moz-transform: translateY(-300%);

	}

	8% {

	    opacity: 1;

	    -moz-transform: translateY(0%);

	}

	22% {

	    opacity: 1;

	    -moz-transform: translateY(0%);

	}

	28% {

	    opacity: 0;

	    -moz-transform: translateY(100%);

	}

	35% { opacity: 0 }

	100% { opacity: 0 }

}

@keyframes titleAnimation {

	0% {

	    opacity: 0;

	    transform: translateY(-300%);

	}

	8% {

	    opacity: 1;

	    transform: translateY(0%);

	}

	22% {

	    opacity: 1;

	    transform: translateY(0%);

	}

	28% {

	    opacity: 0;

	    transform: translateY(100%);

	}

	35% { opacity: 0 }

	100% { opacity: 0 }

}

/* Show at least something when animations not supported */

.no-cssanimations .box li span{

	opacity: 1;

}

</style>

        <ul class="box">

            <li><span>Image 01</span><div class="title"><h3>第1张</h3></div></li>

            <li><span>Image 02</span><div class="title"><h3>第2张</h3></div></li>

            <li><span>Image 03</span><div class="title"><h3>第3张</h3></div></li>

        </ul>

</body>

</html>

其他：
1，相同参数的可以写在一起；
2，可以只有to， 也可以只有类似50%  省略0%和100%；因为后面的会重置前面的样式；

												


											
纯css3 轮播图 利用keyframes的更多相关文章
	

    
								
  1. 纯CSS3轮播图
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    2. 
						
  2. 纯js轮播图练习-1
		
    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
    
		
    3. 
						
  3. css  纯css轮播图 示例
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
    
		
    4. 
						
  4. 纯js轮播图练习-2，js+css旋转木马层叠轮播
		
    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
    
		
    5. 
						
  5. 纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图
		
    基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页 自己做的: 代码: <!DOCTYPE html> <html> & ...
    
		
    6. 
						
  6. 纯js轮播图
		
    <div id="wrapper"> <div id="container"> <img src="http://ima ...
    
		
    7. 
						
  7. 纯CSS3实现轮播图
		
    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
    
		
    8. 
						
  8. 纯CSS实现轮播图效果，你不知道的CSS3黑科技
		
    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
    
		
    9. 
						
  9. css3 - 纯css实现一个轮播图
		
    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. xamarin之  安装工具介绍
			
    原文:xamarin之 安装工具介绍 思考: 1,  一定要按照顺序安装吗? 先装JDK,再装Android SDK 原因:Android SDK采用了Java语言 先装Android SDK,再装A ...
    
			
    2. 
						
  2. swift 学习资源 大集合
			
    今天看到一个swift学习网站,其中我们收集了大量的学习资源 Swift 介绍 Swift 介绍 来自 Apple 官方 Swift 简单介绍 (@peng_gong) 一篇不错的中文简单介绍 [译] ...
    
			
    3. 
						
  3. HTTP相关概念
			
    最近观看HTTP权威指南.这本书是一个小更,欲了解更多详细信息,我们不能照顾.但一些基本概念仍然应该清楚.在这里,我整理: HTTP--因特网的多媒体信使 HTTP 使用的是可靠的传输数据协议,因此即 ...
    
			
    4. 
						
  4. ESFramework 开发手册（07） －－ 掉线与心跳机制（转）
			
    虽然我们前面已经介绍完了ESFramework开发所需掌握的各种基础设施,但是还不够.想要更好地利用ESFramework这一利器,有些背景知识是我们必须要理解的.就像本文介绍的心跳机制,在严峻的In ...
    
			
    5. 
						
  5. python常用类型的内置函数列表
			
    1.list.append(obj)         向列表中加入一个对象obj fruits = ['apple', 'pear', 'orange'] >>> fruits.ap ...
    
			
    6. 
						
  6. 从控制台读取password - C#
			
    Tip :    从控制台读取password 语言: C# ______________________________________________________________ 在登陆Lin ...
    
			
    7. 
						
  7. 主从集群搭建及容灾部署redis
			
    redis主从集群搭建及容灾部署(哨兵sentinel) Redis也用了一段时间了,记录一下相关集群搭建及配置详解,方便后续使用查阅. 提纲 l  Redis安装 l  整体架构 l  Redis主 ...
    
			
    8. 
						
  8. c++  primer 函数传值1
			
    不看c++ primer  永远不知道自己基础有多差 函数的參数传值一般有两种方式:值传递,引用传递. 值传递有以下两种形式: void func( int a ) { // } void func1 ...
    
			
    9. 
						
  9. rac安装grid报INS-41112错误
			
    原创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...
    
			
    10. 
						
  10. LA3026 - Period(KMP)
			
    For each prefix of a given string S with N characters (each character has an ASCII code between 97 a ...
    
			
    11.