今天学了动画，动画的功能真的很强大，如果有哪个不把麻烦的耐心，完全可以做个
动画片出来。
1、animation-name
元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
div{
-webkit-animation-name : FromLeftToRight;
animation-name : FromLeftToRight;
}
2、 keyframes
被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
@-webkit-keyframes FromLeftToRight{
0%{left: 0; }
100%{ left: 800px; }
}
@-webkit-keyframes FromLeftToRight{
from {left: 0; }
to {left: 800px; }
}
@keyframes FromLeftToRight{ 0%{left: 0; } 100%{ left: 800px; } }
@keyframes FromLeftToRight{ from {left: 0; } to {left: 800px; } }
3、animation-duration
设置对象动画的持续时间
div{
-webkit-animation-duration:1s;
animation-duration:1s
}
4、animation-timing-function
div{
-webkit-animation-timing-function : ease-in;
animation-timing-function : ease-in;
}
5、animation-delay
设置对象动画的延迟时间
div{
-webkit-animation-delay : 1s;
animation-delay : ease-in;
}
6、 animation-iteration-count
设置对象动画的延迟时间
div{
-webkit-animation-iteration-count : 2;
animation-iteration-count : 2;
}
infinite表示无限次数
7、animation-direction
设置对象动画在循环中是否按照相反顺序执行
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
div{
-webkit-animation-direction : normal;
animation-direction : normal;
}
8、animation-play-state
running：运动 paused：暂停
div:hover{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
9、animation-fill-mode
设置对象动画时间之外的状态
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
div {
-webkit-animation-fill-mode : both;
animation-fill-mode : both;
}
10、animation
通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。
animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] ||
[ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> ||
<single-animation-play-state> [ ,*]
多个可以逗号隔开；
div{
-webkit-animation: FromLeftToRight 2s ease-out forwards;
animation: FromLeftToRight 2s ease-out forwards;
}
小例子：
简单的纯css的轮播图，没有索引的点击。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播css</title>
<style>
body{
margin: 0;
}
#container{
margin: 50px auto 0;
width: 160px;
height: 110px;
box-shadow: 1px 1px 3px 1px #888;
}
#wrap{
width: 160px;
height: 110px;
background: url(images/1.jpg) no-repeat;
animation: Carousel 20s infinite;
opacity: 1;
}
#wrap:hover{
animation-play-state:paused;
}
@keyframes Carousel{
0%{background: url(images/1.jpg) no-repeat;opacity: 1;}
4%{opacity: 1}
8%{opacity:0.6;background: url(images/1.jpg) no-repeat;opacity: 1;}
12%{opacity:0.2;background: url(images/2.jpg) no-repeat;}
16%{opacity:0.6;background: url(images/2.jpg) no-repeat;}
20%{opacity:1;background: url(images/2.jpg) no-repeat;}
24%{opacity: 1}
28%{opacity: 0.6;background: url(images/2.jpg) no-repeat;}
32%{opacity:0.2;background: url(images/3.jpg) no-repeat;}
36%{opacity:0.6;background: url(images/3.jpg) no-repeat;}
40%{opacity:1;background: url(images/3.jpg) no-repeat;}
44%{opacity: 1}
48%{opacity: 0.6;background: url(images/3.jpg) no-repeat;}
52%{opacity:0.2;background: url(images/4.jpg) no-repeat;}
56%{opacity:0.6;background: url(images/4.jpg) no-repeat;}
60%{opacity:1;background: url(images/4.jpg) no-repeat;}
64%{opacity: 1}
68%{opacity: 0.6;background: url(images/4.jpg) no-repeat;}
72%{opacity:0.2;background: url(images/5.jpg) no-repeat;}
76%{opacity:0.6;background: url(images/5.jpg) no-repeat;}
80%{opacity:1;background: url(images/5.jpg) no-repeat;}
84%{opacity: 1}
88%{opacity: 0.6;background: url(images/5.jpg) no-repeat;}
92%{opacity:0.2;background: url(images/1.jpg) no-repeat;}
96%{opacity:0.6;background: url(images/1.jpg) no-repeat;}
100%{opacity:1;background: url(images/1.jpg) no-repeat;}
}
</style>
</head>
<body>
<div id="container">
<div id="wrap">
</div>
</div>
</body>
</html>
不解释！