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;

}

總結

以上是生活随笔為你收集整理的CSS3 帧动画分段,CSS3 animation实现逐帧动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。