關於幀動畫steps屬性的理解

 

CSS3的Animation有八個屬性

1. animation-name
2. animation-duration
3. animation-delay
4. animation-iteration-count
5. animation-direction
6. animation-play-state
7. animation-fill-mode
8. animation-timing-function

其中1-7大多都有介紹，可是animation-timing-function是控制時間的屬性

在取值中除了經常使用到的 三次貝塞爾曲線 之外，還有個讓人比較困惑的 steps() 函數

animation默認以ease方式過渡，它會在每一個關鍵幀之間插入補間動畫，因此動畫效果是連貫性的

除了ease，linear、cubic-bezier之類的過渡函數都會爲其插入補間。但有些效果不須要補間，只須要關鍵幀之間的跳躍，這時應該使用steps過渡方式