CSS 動畫

CSS 中跟動畫相關的屬性有兩個：transition 和 animation。

transition（過渡動畫）

transition是4個屬性的簡寫屬性，transition屬性能夠被指定爲一個或多個 CSS 屬性的過渡效果，多個屬性之間用逗號（,）進行分隔。

transition-property

指定過渡屬性的名稱,並非全部屬性都支持

transition-duration

指定過渡所需的時間，單位s/ms,默認值0s

transition-timing-function

計時函數，即速度曲線,默認值ease

transition-delay

指定過渡的延遲時間，單位s/ms,默認值0s

查看實例

transition的侷限

一、transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態；
二、transition須要事件觸發，如hover，因此無法在網頁加載時自動發生；
三、transition是一次性的，不能重複發生，除非一再觸發事件。

CSS Animation就是爲了解決這些問題而提出的。

animation（關鍵幀動畫）

animation是8個屬性的簡寫屬性，animation屬性能夠被指定爲一個或多個動畫效果，多個動畫之間用逗號（,）進行分隔。

animation-name

指定@keyframes動畫的名稱，經過 @keyframes 來定義關鍵幀。開發者不須要給出每一幀的定義。只須要定義一些關鍵的幀便可。由於其他的幀，瀏覽器會根據計時函數插值計算出來。
好比一個 div 旋轉一圈，只須要定義開始和結束兩幀便可

div{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #afb;
  animation: move 6s linear both;
}

@keyframes move {  
    0% {    
        transform: translate(0,0);  
    } 
    33% {    
      transform: translate(200px,0);  
    } 
    66% {    
      transform: translate(0,0); 
    }  
    100% {    
        transform: translate(200px,0); 
    }
}

其中，move 是我給這個動畫起的名字，CSS 動畫用百分比來刻畫一個動畫週期，即觸發關鍵幀的時間點。0% 表示最開始的那一幀，100% 表示結束時的那一幀。 0% 其也能夠寫成 from ，100% 也能夠寫成 to.
若是一個關鍵幀規則沒有指定動畫的開始或結束狀態（也就是，0%/from 和100%/to），瀏覽器將使用元素的現有樣式做爲起始/結束狀態。這能夠用來從初始狀態開始元素動畫，最終返回初始狀態。

關鍵幀代碼有冗餘，能夠進一步簡寫：

@keyframes move {  
    0%, 66% {    
        transform: translate(0,0);  
    } 
    33%, 100% {    
      transform: translate(200px,0);  
    } 
}

animation-duration

指定了動畫運行的時間，單位秒（s）或者毫秒（ms）,默認值0

animation-timing-function

指定動畫計時函數，即動畫的速度曲線，默認值爲ease

實際上，有時候咱們會把 transition 和 animation 組合，拋棄 animation 的 timing-function，以編排不一樣段用不一樣的曲線。

@keyframes mykf {
  from { top: 0; transition:top ease}
  50% { top: 30px;transition:top ease-in }
  75% { top: 10px;transition:top ease-out }
  to { top: 0; transition:top linear}
}

animation-delay

指定動畫的延遲，單位秒（s）或者毫秒（ms）,默認值0。當播放次數大於1時，從第二次開始，動畫並不會在再延遲執行。不爲你們注意的是，延遲能夠爲負數。負延遲表示動畫彷彿開始前就已經運行過了那麼長時間。

animation-iteration-count

表示動畫播放次數。它很好懂，只有一點要注意，無限播放時使用 infinite。

animation-play-state

CSS 動畫是能夠暫停的。屬性 animation-play-state 表示動畫播放狀態，默認值 running 表示播放， paused 表示暫停：

div {
    height: 10px;
    border: 1px solid;
    background-color: linear-gradient(#off,#off);
    background-repeat: no-repat;
    background-size: 0;
    animation: move 2s linear infinite;
}
div:hover {
    animation-play-state: paused;
}
@keyframes move {
    100% {
        background-size: 100%;
    }
}

animation-fill-mode

直譯爲動畫填充模式，具體說的是什麼事情呢？
@keyframes 只是定義了動畫過程當中每一幀的值，然而在動畫開始前和動畫結束後，元素該處於什麼狀態呢？

• forwards，表示動畫完成後，元素狀態保持爲最後一幀的狀態。
• backwards，表示（有動畫延遲時），動畫開始前，元素狀態保持爲第一幀的狀態。
• both，表示上述兩者效果都有。
• none，默認值，動畫開始和結束後，元素都在起點。

舉個例子，div 從 100px 處移動到 200px 處的關鍵幀定義爲：

@keyframes move{
  0%{
    transform: translate(100px,0);
  }
  100%{
    transform: translate(200px,0);
  }
}

設置填充模式爲 forwards 時，動畫最後停留在 200px 處;

設置動畫延遲 1s 後執行，且填充模式爲 backwards 時，能夠看到動畫在開始前是處於 100px 處，動畫結束後回到 0px 處;

設置填充模式爲 both 的情形，結合了前二者。
查看

animation-direction

指定動畫按照指定順序來播放，其值有：

• normal 默認值，正向播放
• reverse 表示動畫反向播放
• alternate 表示正向和反向交叉進行
• alternate-reverse 表示反向和正向交叉進行

查看

timing-function

動畫裏的timing-function有transition-timing-function和animation-timing-function.它們的值能夠是（三次）貝塞爾曲線，用以建立連續的動畫效果，能夠理解爲電梯；也能夠是steps函數，將動畫分割成段，變成間斷的動畫，能夠理解爲樓梯。而後cubic-bezier()簡化出了linear，ease，ease-in，ease-out以及ease-in-out。steps()則有step-start和step-end這兩個關鍵字。

cubic-bezier()

steps()

語法

語法：steps(<number_of_steps>，<direction>)
第一個參數是一個正值，指定咱們但願動畫分割的段數;

第二個參數定義了這個要點 在咱們的@keyframes中申明的動做將會發生的關鍵。這個值是可選的，在沒有傳遞參數時，默認爲」end」。

方向爲」start」表示在動畫開始時，動畫的第一段將會立刻完成。以左側端點爲起點，當即跳到第一個step的結尾處。它會當即跳到第一段的結束而且保持這樣的狀態直到第一步的持續時間結束。後面的每一幀都將按照此模式來完成動畫。

方向爲」end」表示在動畫執行時，在每一幀裏，動畫保持當前狀態直到這一段的持續時間完成，纔會跳到下一步的起點，後面的每一幀都按照這個模式來進行，在最後一幀的起點，等到這一幀的持續時間結束，整個動畫的執行也已經結束，執行動畫的元素來不及跳到這一幀的終點，直接回到了整個動畫起點，開始了第二次動畫。每一個選擇本質上從一個不一樣的面移動這個元素而且將產生一個不一樣的位置在這個相同的動畫裏。

step-start和step-end

step-start和step-end是steps()功能符簡化關鍵字;
其中，step-start等同於steps(1, start)，step-end等同於steps(1, end)或者steps(1);
step-start和step-end用中文短句解讀就是：一步到位和延遲到位，在實際項目中有什麼做用呢？
對於只有0%,100%或from, to兩個關鍵時間幀的動畫，step-start和step-end是沒有任何須要使用的理由的。

若是是非等分，沒法過渡的階梯動畫，則有使用價值，例以下面這個基於box-shadow實現的打點動畫效果：

<button>訂單提交中<span class="dotting"></span></button>

.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    margin-right: 8px;
    box-shadow: 2px 0, 6px 0, 10px 0;
    animation: dot 4s infinite step-start both;
}
@keyframes dot {
    25% { box-shadow: none; }          /* 0個點 */
    50% { box-shadow: 2px 0; }         /* 1個點 */
    75% { box-shadow: 2px 0, 6px 0; }  /* 2個點 */ 
}

基於box-shadow實現的打點動畫效果

與填充模式animation-fill-mode

end模式表示在每一個階段的起點，而「forwards」的命令使這個動畫元素保持着@keyframes裏最後一幀的動畫樣式，所以，感受會是動畫在咱們設置的步數外添加了額外的一步。

參考鏈接
2019年了，你還不會CSS動畫？
【譯】css動畫裏的steps()用法詳解
CSS3 animation屬性中的steps功能符深刻介紹