效果：

关键点：利用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. linux下安装cmake和mysql遇到的问题总结
			
    首先是在安装cmake的过程中遇到的问题: 1.開始使用yum命令安装时,不知道为什么一直不行,然后就准备wget 来先下载压缩包,再手动编译. 因为网络限制,wget不能下载外网的东西一直显示con ...
    
			
    2. 
						
  2. HDU 3954 Level up（线段树)
			
    HDU 3954 Level up 题目链接 题意:k个等级,n个英雄,每一个等级升级有一定经验,每次两种操作,一个区间加上val,这样区间内英雄都获得当前等级*val的经验,还有一个操作询问区间经验 ...
    
			
    3. 
						
  3. coco2dx c++ HTTP实现
			
    coco2dx c++ HTTP实现 达到的结果如下面的 iPhone截图 android 日志截图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdnBp ...
    
			
    4. 
						
  4. Android4.4 Framework分析——Zygote进程的启动过程
			
    Android启动过程中的第一个进程init.在启动过程中会启动两个关键的系统服务进程ServiceManager和Zygote. 本文要介绍的就是Zygote进程的启动,Zygote俗称孵化器,专门 ...
    
			
    5. 
						
  5. listary文件查找程序下载和使用
			
    资源:PHP开发学习门户网站 地址:http://bbs.phpthinking.com/forum.php?mod=viewthread&tid=173 Listary 是一款有用的国产Wi ...
    
			
    6. 
						
  6. 轻松管理您的网络password
			
    在互联网在现在这个时代,,我们注册了很多帐户.支付宝账号password,各种宝账户password.微信,QQ,电话password,购买各种网站,金融password,它是不是让孩子们的鞋子瞬间淡 ...
    
			
    7. 
						
  7. 在js中做数字字符串加0补位,效率分析
			
    分类: Jquery/YUI/ExtJs 2010-08-30 11:27 2700人阅读 评论(0) 收藏 举报 functiondate算法语言c 通常遇到的一个问题是日期的“1976-02-03 ...
    
			
    8. 
						
  8. Case when 的使用方法
			
    SQL Case when 的使用方法 Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THE ...
    
			
    9. 
						
  9. Java引用类型变量
			
    Java引用类型变量 1.编译时类型:由声明该变量时使用的类型决定 2.执行时类型:由实际赋给该变量的对象决定    类型不一致的假设编译时类型和执行,可能会出现多态性 版权声明:本文博主原创文章.博 ...
    
			
    10. 
						
  10. quick 2.23 它们的定义c++代码lua与总结的一些细节
			
    它们的定义c++代码lua与总结的一些细节 参考:点击打开链接 1.自己定义 XXX.cpp .XXX.h 2.D:\quick\quick-cocos2d-x-2.2.3-rc\lib\cocos2 ...
    
			
    11.