一個簡單的動畫效果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>
