寫在前面
最近在面試的時候被面試官問到“如何使用css3 animation 來實現一個動畫的逐幀檢測”，自己支支吾吾的回答了下， 下來之後趕緊查了下API文檔，以及翻閱了一些博客後，對其有了如下的整理。
關於animation的一寫屬性值，我們可以在w3c、 菜鳥教程上面自行查閱。
使用animation來實現逐幀檢測
在瞭解了animation的屬性後，我們可以自己寫一個動畫跑起來觀察下效果，瞭解下其過程，代碼如下：
<html>
<head>
<style>
@keyframes run {
from { background-position: 0 0; }
to {background-position: -1540px 0;}
}
div{
width: 140px;
height: 140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png);
animation: run 1s infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
實現的效果如下：
在這個GIF圖裏面，我們可以明顯的看出來，動畫每一幀之間的跑動都是平滑的，這是因爲在animation屬性中，默認以ease(平滑)的方式進行過渡，當然這並不是我們想要的結果，我們需要在每一幀中間自己來手動過渡，解決的方法如下：
@keyframes run {
0%, 8% {//過渡到自己想要的那個動作上面}
9.2%，17.2% {// 每個動作之間相隔1.2個幀，動作之間停留8個幀}
}
可能這麼說大家還不是很清楚，那麼我們來上圖，看看到底是怎麼回事，圖片如下：
從這幅圖我們清楚，逐幀動畫就是通過一幀一幀的顯示動畫的圖像序列，利用人的視覺暫留原地而實現運動的，瞭解了其原理，我們可以利用以上的方法來實現如下的代碼：
<!DOCTYPE html>
<html>
<head>
<title>css3的逐幀檢測</title>
<style>
@keyframes run {
0%, 8% {
background-position: 0 0;
}
9.2%, 17.2% {
background-position: -140px 0;
}
18.4%, 26.4% {
background-position: -280px 0;
}
27.6%, 35.6% {
background-position: -420px 0;
}
36.8%, 44.8% {
background-position: -560px 0;
}
46%, 54% {
background-position: -700px, 0;
}
55.2%, 63.2% {
background-position: -840px, 0;
}
64.4%, 72.4% {
background-position: -980px, 0;
}
73.6%, 81.6% {
background-position: -1120px, 0;
}
82.8%, 90.8% {
background-position: -1400px, 0;
}
92%, 100% {
background-position: -1540px, 0;
}
}
@-webkit-keyframes run {
0%, 8% {
background-position: 0 0;
}
9.2%, 17.2% {
background-position: -140px 0;
}
18.4%, 26.4% {
background-position: -280px 0;
}
27.6%, 35.6% {
background-position: -420px 0;
}
36.8%, 44.8% {
background-position: -560px 0;
}
46%, 54% {
background-position: -700px, 0;
}
55.2%, 63.2% {
background-position: -840px, 0;
}
64.4%, 72.4% {
background-position: -980px, 0;
}
73.6%, 81.6% {
background-position: -1120px, 0;
}
82.8%, 90.8% {
background-position: -1260px, 0;
}
92%, 100% {
background-position: -1400px, 0;
}
}
div {
width: 140px;
height: 140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png);
animation: run 5s infinite;
-webkit-animation: run 1s infinite;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
實現效果如下：
那麼現在這個效果也就是我們所需要的，其將十二幅圖像序列展示成動畫效果。
使用steps()（幀之間的階躍動畫）來實現逐幀檢測
這個方式是在一個博客裏面看到的，但真的很好用。
- steps(1，start)表示從動畫一開始便能夠跳到100%，直至這一幀結束。
- steps(1，end)動畫從一開始便跳到0%，直到這一幀結束。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐幀動畫</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
效果和上述代碼的實現是一致的。
以上兩種方法都能夠很好地實現，當然如果有不同方法的，歡迎留言評論。