css3 animation學習心得

先說一下與transition的差別，因為他們真的有點點相似。

• animation動畫可以通過@keyframes屬性對動畫進行更為精細的控制，設定多個狀态。

  但是transition屬性則隻有兩個狀态，起始狀态與結束狀态。

• 兩個屬性的觸發時機有很大的不同，animation好比是一個自執行函數，隻要定義好，立馬生效觸發動畫。

  transition則像是一個事件處理函數（事件監聽器），隻有它監聽的屬性值發生改變，動畫效果才會生效。

我認為，選擇使用時機恰恰就是看他們的名字。如果想過渡就transition，如果想動畫就animation

針對每個屬性的解釋

• animation-name
• animation-duration: animation中第一個time被解析為duration, 第二個是delay
• animation-timing-function
• animation-delay: -1s;定義為負數會直接從動畫開始多少秒後開始
• animation-iteration-count： 定義為小數，比如1.5會在播放到第二次一半的時候突然結束
• anitmatation-direction: 四種，normal reverse alternate(交替，看次數，如果隻有一次自然就不會交替了） alternate-reverse
• animation-fill-mode 設定CSS動畫在執行之前和之後如何将樣式應用于其目标。

  

  

  總的來說就是：forwards是執行到最後的關鍵幀。 準确來說其實是動畫在哪停就永遠保持在哪

  backwards與none的差別在于： animation-delay期間，因為兩者真正開始都時候都是要突變到第一個關鍵幀中定義的值，這個第一個關鍵幀受direction的影響，如果是reverse則是100%的時候

• animation-play-state

  用法：

const elem = document.getElementById('elem');
setTimeout(() => {elem.style.animationPlayState = 'paused'}, 2000);
setTimeout(() => {elem.style.animationPlayState = 'running'}, 4000);
           

就是可以控制是否暫停和繼續。

接下來詳細說一下animation-timing-function

這個和transition的timing-function差不多。

主要說一下ease-out, ease-in, ease-in-out,ease(default value)

橫軸時間，縱軸進度

總結就是：

ease out尾緩動

ease in首緩動，

ease-in-out是ease-in和ease-out的結合。首尾緩動。

ease尾緩動，與ease out有點相似，不過ease一開始速度要比ease-out快很多

大部分時候直接用預設的ease就行了。

還有幾種：

linear：字面意思，線性的，全程一個速率

cubic-bezier(0.1, 0.7, 1.0, 0.1);

三次貝塞爾曲線。一共四個參數，代表了第二個橫縱坐标和第三個點的橫縱坐标（一共四個點，第一個在(0,0),最後一個在(1,1) ）

前面的ease之類的都是可以通過cubic-bezier設定特定的參數來實作的。

steps(number, position)：number就是說平均分成幾段，

position取值有：

start，end，jump-start，jump-end，jump-none，jump-both。

jump-start就是以前的start，jump-end就是以前的end。這個jump了解為跳過。

直接看橫線的位置就行了，因為單獨一個點，在數學上有意義，而不會反映到螢幕上。比如jump-start，就會跳過開頭，你永遠看不到在0的位置

個人覺得用來做時鐘動畫是很經典的，因為秒針是一秒跳一格，而不是像ease類函數那樣連續地劃過去。

• jump-start｜start代表秒針剛進入動畫，就跳了一格。
• jump-end｜end代表秒針等了一秒才開始跳。
• jump-none：适用場景為0和1都得持續一段時間的，比如說完全透明和完全不透明。jump-start和jump-end就沒辦法做到。
• jump-both首尾都是沒有的。目前沒感覺這個both有啥适用場景

這裡錄了一個gif（虛線框代表進度中to也就是100%的位置，沒有去仔細考慮border占的width，是以可能不能完全重合，知道是100%就行）

對于關鍵幀動畫來說，timing function作用于一個關鍵幀周期而非整個動畫周期，即從關鍵幀開始開始，到關鍵幀結束結束。

若該關鍵幀沒有定義緩動函數，則使用定義于整個動畫的緩動函數，

!!!如果定義了0-50%-100%，會有兩段ease，也就是從快到慢，從快到慢。如果是step。例如本來設定的0-100%秒針一共跳60次，于是你設定了steps(60, jump-start)，但是如果是0-50%-100%，他每一段都跳60次，那就成了120次。

@keyframe裡的百分比是支援重寫timing function的

animation的@keyframe定義的是時間的百分比，舉例就是絕對定位的left從0變到100px。持續兩秒

現在@keyframes {

…

50% {left: 30px;}

}

這個50%就是在1s的時候

至于

CSS animation-timing-function屬性定義CSS動畫在每一動畫周期中執行的節奏。可能值為一或多個<timing-function>

說的是一個timing-function對應一個animation-name，

像這樣

隻做了解，個人感覺實際意義不大。