css动画帧动画效果,CSS3 animation实现逐帧动画效果

css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习

animation属性一览

因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了

使用animation实现逐帧动画

熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己

思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：

css code复制内容到剪贴板

@keyframes run{

from{

background-position: 0 0;

}

to{

background-position: -1540px0 ;

}

}

div{

width:140px;

height:140px;

background:url(run.png) ;

animation-name：run;

animation-duration:1s;

animation-iteration-count:infinite;

}

但是跑起来后我们发现，每帧动画之间帧动画都是滑动，并不是我们要的效果,为什么呢？

原来animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的

知道原因就好办了，解决思路就是：

css code复制内容到剪贴板

@keyframes run{

0%, 8%{/*动作一*/}

9.2%, 17.2%{/*动作二*/}

...

}

step1：动作之间停留8帧，0%设置动作一，动作一结束在8%

step2：动作之间过渡1.2帧，9.2%设置动作二，动作二结束在17.2%

完整代码：

xml/html code复制内容到剪贴板

html>

css3逐帧动画

@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: -1400px 0 ;  }

92%, 100%{  background-position: -1540px 0 ;  }

}

div{

width:140px;

height:140px;

background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;

animation:run 1s infinite;

-webkit-animation:run 1s infinite;

animation-fill-mode : backwards;

-webkit-animation-fill-mode : backwards;

}