<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
@keyframes aaa {
from {left:0;}
20% {left:-200px;}
40% {left:-400px;}
60% {left:-600px;}
80% {left:-800px;}
to {left:-1000px;}
}
#aaa{
margin:100px auto;
width:200px;
height:200px;
background: red;
overflow: hidden;
position: relative;
}
#bbb{
position: absolute;
}
#bbb div{
width:200px;
height:200px;
float:left;
}
#bbb:hover{
animation: aaa 5s ease-in 0s infinite;
}
</style>
</head>
<body>
<div id="aaa">
<div id="bbb">
<div style="background: green"></div>
<div style="background: blue"></div>
<div style="background: black"></div>
<div style="background: yellow"></div>
<div style="background: grey"></div>
</div>
</div>
</body>
</html>
用CSS3的animation+absolute，实现轮播效果
原文：http://www.cnblogs.com/qiancheng123/p/6337264.html