一、timing-function: steps()

一開始在使用CSS3的時候並沒有太注意這個timing-function，只是注意到自定義貝塞爾曲線。

1）一個項目中的實例

先來看看左邊加了steps和右邊沒加的區別。左邊的是一錘一錘的，右邊會出現影子。

【注意下面這個demo在firefox中不能執行，只能在chrome中執行，因為我動畫的是“background-image”屬性】

代碼如下，我只把關鍵的幾個代碼貼出來了，詳細的可以查看這里：

.btn-pay {
  background: url(t_btn-pay.png) no-repeat -30px;
  animation: pay-interval 0.5s steps(1) infinite;
}
.btn-pay2 {
  animation: pay-interval 0.5s linear infinite;
}
@keyframes pay-interval {
  from {
    background-image: url(t_btn-pay.png);
  }
  30% {
    background-image: url(t_btn-pay-active.png);
  }
  to {
    background-image: url(t_btn-pay.png);
  }
}

2）參數說明

語法如下：

a. 第一個參數指定了時間函數中的間隔數量（必須是正整數），這個間隔數量作用用於兩個關鍵幀之間，也就是form與30%之間、30%與to之間。

b. 第二個參數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，默認為 end。

我在CSS中設置了1（這個例子中start與end區別不大），也就是一步一步動畫，而如果不設置，那其實里面就會有多步操作，就會出現影子。

國外有篇文章中寫了個例子，可以區分這兩個值的區別，demo鏈接可以點擊這里，具體的原理可以在網上搜索。

.contain-car {
  animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
  animation: drive 4s steps(4, start) infinite;
}

3）通過sprite圖片制作動畫

通過合成的圖片，再設置個間隔數，就能出現動畫了，例如下面的這張loading圖片，點擊查看在線demo。注意，最后一幀中的background-position得是圖片寬度的負數。

.loading {
  animation: loading-rotate 1s steps(12) infinite;
}

二、animation-direction

animation-direction 定義是否應該輪流反向播放動畫，選項有normal、alternate（交替）、reverse（反向）等。

1）一個項目中的實例

左邊的抖動明顯要流暢很多，而右邊的抖動在完成100%以后就直接跳回到0%的狀態。

代碼如下，我只把關鍵的幾個代碼貼出來了，詳細的可以查看這里：

.img1 {
  animation: tel-rotate 1s linear infinite alternate;
}
.img2 {
  animation: tel-rotate 1s linear infinite;
}
@keyframes tel-rotate {
  from {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  to {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
}