css3中的animation:动画名 持续时间 动画的速度曲线 动画开始之前的延迟 动画播放的次数 是否应该轮流反向播放动画
动画播放次数：n（定义应该播放多少次动画） ； infinite（无限循环）
动画延迟：ns （默认为零）
是否反向播放： normal alterna
动画的速度曲线; linear (匀速)；ease（默认 先快然后加速，最后变慢）；ease-in（以低速开始）；ease-out（以低速结束）；ease-in-out（动画一低速开始和结束）
cubic-bezier（n，n，n，n）
@keyframes（用来改变动画轨迹或者效果）和animate
1需要创建一个名字，后面绑定动画时需要
2.from 起始时0%
3 to到达终点时等同于100%
box-sizing属性：content-box（border和padding值不计算在width之内）；padding-box（padding计算在width之内）；border-box（border和padding计算在width之内）
content属性：
a:after
{
content: " (" attr(href) ")";
}
HTML：
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="main"> <div class="imgs"> <a href="javascript:void(0);" class="first-img"><img src="img/img1.jpg"></a> <a href="javascript:void(0);"><img src="img/img2.jpg"></a> <a href="javascript:void(0);"><img src="img/img3.jpg"></a> <a href="javascript:void(0);"><img src="img/img4.jpg"></a> <a href="javascript:void(0);"><img src="img/img5.jpg"></a> </div> <div class="controller"> <div class="show-static"></div> <div class="show-run"></div> <a class="controller-tag1" href="javascript:void(0);"><img src="img/img1.jpg"></a> <a class="controller-tag2" href="javascript:void(0);"><img src="img/img2.jpg"></a> <a class="controller-tag3" href="javascript:void(0);"><img src="img/img3.jpg"></a> <a class="controller-tag4" href="javascript:void(0);"><img src="img/img4.jpg"></a> <a class="controller-tag5" href="javascript:void(0);"><img src="img/img5.jpg"></a> </div></body></html>CSS：
* { margin: 0; padding: 0;}.main { position: relative; width: 1200px; margin: 50px auto; border: solid 1px #ccc;}.imgs { position: relative; width: 100%; height: 600px; overflow: hidden;}.main a { display: block; width: 100%; height: 100%;}.imgs a:first-child{ animation: imgAnimate 18s linear infinite alternate;}.imgs:hover > .first-img,.imgs:hover + .controller .show-run { animation-play-state: paused;}.imgs a img { width: 100%; height: 100%;}.controller { position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; width: 80%; height: 40px; margin: 0 auto; margin-top: 560px;}.controller .show-run { margin-bottom: -17px; height: 16px; width: 20%; background: #FDB024; animation: showAnimate 18s linear infinite alternate;}.controller .show-static { margin-bottom: -17px; height: 17px; width: 100%; background: #575757;}.controller a { display: block; box-sizing: border-box; float: left; width: 20%; height: 17px; margin: 0px; border: solid 1px #CCC;}.controller a img { display: none; box-sizing: border-box; width: 100%; height: 150px; margin-top: -160px; border: solid 1px #FDB024;}.controller a::after { position: relative; content: ""; display: none; margin-left: -20px; left: 50%; width: 10px; height: 0px; border-left:20px solid transparent; border-right:20px solid transparent; border-top: solid 10px #FDB024;}.controller-tag1:hover > img,.controller-tag1:hover::after{ display: block;}.controller-tag2:hover > img,.controller-tag2:hover::after{ display: block;}.controller-tag3:hover > img,.controller-tag3:hover::after{ display: block;}.controller-tag4:hover > img,.controller-tag4:hover::after{ display: block;}.controller-tag5:hover > img,.controller-tag5:hover::after{ display: block;}@keyframes imgAnimate{ 0% { margin-top: 0px; } 11.11% { margin-top: 0px; } 22.22% { margin-top: -600px; } 33.33% { margin-top: -600px; } 44.44% { margin-top: -1200px; } 55.55% { margin-top: -1200px; } 66.66% { margin-top: -1800px; } 77.77% { margin-top: -1800px; } 88.88% { margin-top: -2400px; } 100% { margin-top: -2400px; }}@keyframes showAnimate{ 0% { margin-left: 0px; } 11.11% { margin-left: 0px; } 22.22% { margin-left: 20%; } 33.33% { margin-left: 20%; } 44.44% { margin-left: 40%; } 55.55% { margin-left: 40%; } 66.66% { margin-left: 60%; } 77.77% { margin-left: 60%; } 88.88% { margin-left: 80%; } 100% { margin-left: 80%; }}