timing-function: steps()、step-start和step-end

admin發表於2017-02-12
Function
關於timing-function的相關用法可以參閱CSS3 animation一章節。

本章節單獨介紹一下timing-function: steps()的用法；關於此引數的介紹網上有不少，但是大多數文章看了之後的唯一感覺就是:“說什麼呢？”；為了便於對此屬性值的理解，下面就結合圖示對此再做一下說明。

特別說明:圖示是別人繪製的，但是原文地址連結已經打不開，估計作者網站已經廢棄，所以就不發原文連結。

語法結構:

[CSS] 純文字檢視 複製程式碼
steps(number_of_steps, direction)

引數解析:

（1）.number_of_steps:必需，指定了時間函式中的間隔數量（必須是正整數）。

（2）.direction:必需，屬性值為start或者end；start表示動畫在每個計時週期的起點發生階躍；end表示動畫在每個計時週期的終點發生階躍。

程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
#demo {
  animation-iteration-count: 2;
  animation-duration: 3s;
}

動畫迴圈執行2兩次，每一次週期是3s。

一.steps(3, start)：

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/175519xp8ciplcrmp8z8l8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

縱軸是每一次動畫完成度，橫軸是時間。

由於第二個引數是start，所以在動畫在每個計時週期的起點發生階躍。

於是動畫的第一步，在時間0刻動畫就變成三分之一狀態。因此在視覺上動畫的過程為 1/3 → 2/3 → 1。

二.steps(3，end):

a:3:{s:3:\"pic\";s:43:\"portal/201702/12/175548uyp3q6lc8zjquir3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

縱軸是每一次動畫完成度，橫軸是時間。

當指定躍點為end，動畫則在每個計時週期的終點發生階躍。

由於第一次階躍發生在第一個計時週期結束時（1s），所以我們看到的初態為 0% 的狀態；而在整個動畫週期完成處（3s），雖然發生階躍跳到了100%的狀態，但同時動畫結束，所以100% 的狀態不可視。因此在視覺上動畫的過程為 0 → 1/3 → 2/3。

有時候，timing-function也可以賦值為step-start或者step-end，分別對應steps(1, start) 和 steps(1, end)。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
dot {
  display:inline-block; 
  width:3ch;
  text-indent:-1ch;
  vertical-align:bottom; 
  overflow:hidden;
  animation:dot 3s infinite step-start both;
}
@keyframes dot {
  33% { text-indent: 0; }
  66% { text-indent: -2ch; }
}
</style>
</head>
<body>
<a href="javascript:">提交進行中<dot>...</dot></a>
</body>
</html>

上面的程式碼實現了打點功能，就應用到了steps()，當然這裡直接寫的是step-start，相當於steps(1, start)。

相關文章