一个简单的动画效果demo，keyframes为关键帧，图片贴在代码下方。利用了伪类实现css3动画效果，初学者可以看一下，恩。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>css3 animation</title>
<style>
*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
body{width:272px;margin:0 auto;}
.auto{margin-top:40px;}
.auto-rotate{
color:#333;
font-weight:bold;
font-family:sans-serif;
}
span{font-size:40px;color:#000;font-weight:bold;
font-family:sans-serif;cursor:pointer;}
.anticlockwise{float:left;}
.clockwise{float:right}
.rotate{width:273px;height:273px;margin:auto;
background:url("1.jpg") no-repeat;}
input:checked ~ .rotate{/*选中input框自动旋转*/
animation:clockwise 1s steps(30) infinite;
}
/*自定义动画：名称 动一次时间 多少步执行完 无限重复*/
input:checked ~ span{
display:none;
}
@keyframes clockwise{/*顺时针旋转*/
0%{
background-position:0px 0px;
}
100%{
background-position:-8192px 0px;
}
}
.anticlockwise:hover ~ .rotate{
animation:anticlockwise 1s steps(30) infinite;
}
.clockwise:hover ~ .rotate{
animation:clockwise 1s steps(30) infinite;
}
@keyframes anticlockwise{/*逆时针旋转*/
0%{
background-position:-8192px 0px;
}
100%{
background-position:0px 0px;
}
}
</style>
</head>
<body>
<!--选中自动播放-->
<input id="auto" class="auto" type="checkbox" checked / >
<label class="auto-rotate" for="auto">Auto ↻</label><br/>
<!-- 右箭头 -->
<span class="anticlockwise">←</span>
<!-- 左箭头 -->
<span class="clockwise">→</span>
<div class="rotate"></div>
</body>
</html>
