@實踐ing----幀動畫實現特效
最近再寫乙個需求，用了大量的css3動畫，但是真的沉澱下來仔細的去深入css3動畫的各個屬性發現還是很深的，這裡就寫下關於幀動畫steps屬性的理解
我們知道css3的animation有八個屬性
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
animation-timing-function
其中1-7大多都有介紹，但是animation-timing-function是控制時間的屬性
在取值中除了常用到的 三次貝塞爾曲線 以外，還有個讓人比較困惑的 steps() 函式
animation預設以ease方式過渡，它會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的
除了ease，linear、cubic-bezier之類的過渡函式都會為其插入補間。但有些效果不需要補間，只需要關鍵幀之間的跳躍，這時應該使用steps過渡方式
理解steps
steps 函式指定了乙個階躍函式
第乙個引數指定了時間函式中的間隔數量（必須是正整數）
第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。
step-start等同於steps(1,start)，動畫分成1步，動畫執行時為開始左側端點的部分為開始；
step-end等同於steps(1,end)：動畫分成一步，動畫執行時以結尾端點為開始，預設值為end。
看看w3c的規範
steps第乙個引數的錯誤的理解：
steps(5，start)
steps() 第乙個引數 number 為指定的間隔數，即把動畫分為 n 步階段性展示，估計大多數人理解就是keyframes寫的變化次數
下面看看我寫的css2幀動畫 也讓我對css3動畫有了很好的理解
@-webkit-keyframes circle
25%{}
50%{}
75%{}
100%{}
}我還寫了乙個js的，求大家參考
CSS3實現逐幀動畫
實現逐幀動畫一般用的 是雪碧圖 css3實現的方法是 新增animation nanimation 第乙個animation name屬性是動畫運動的方法。eg keyframes p8 ms keyframes p8 steps n,end 是表明動畫一共有多少幀，有4幀就寫成 steps 4 或...
css3 animation實現動畫的逐幀檢測
最近在面試的時候被面試官問到 如何使用css3 animation 來實現乙個動畫的逐幀檢測 自己支支吾吾的回答了下，下來之後趕緊查了下api文件，以及翻閱了一些部落格後，對其有了如下的整理。關於animation的一寫屬性值，我們可以在w3c 菜鳥教程上面自行查閱。在了解了animation的屬性...
CSS3 animation實現逐幀動畫效果
css3裡面的animation屬性非常強大，但是自己用的比較少，最近有次面試就剛好被問到了，趁現在有時間就對animation做乙個小總結。同時實現乙個逐幀動畫的demo作為練習 animation屬性一覽 因為animation屬性比較多，然後在w3c上看有點蛋疼，乾脆也做了乙份導圖，以後想檢視...