今天学了动画，动画的功能真的很强大，如果有哪个不把麻烦的耐心，完全可以做个
动画片出来。
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>
不解释！
