css

你可能不知道的 CSS3 Animation

目前animation有下面9種屬性,其中第一個是後面屬性的簡寫形式。

>

目前 animation 有下面 9 種屬性,其中第一個是後面屬性的簡寫形式。

屬性 描述
animation 下面各屬性的簡寫(除了 animation-play-state)
animation-name 指定 @keyframes 動畫的名稱
animation-duration 動畫完成一個週期的時間,預設為 0s
animation-timing-function 動畫執行的'節奏',預設是 ease
animation-delay 動畫開始播放的延遲時間,預設是 0
animation-iteration-count 動畫播放的次數,預設是 1
animation-direction 規定動畫是否在下一個週期逆向播放
animation-fill-mode 返回標籤包裹的字串。
animation-play-state 控制動畫的執行或暫停,預設是 running

animation-name

該屬性用於指定 @keyframes 動畫的名稱,可以傳入多個名稱,用逗號隔開。定義關鍵幀需要使用 @keyframes 規則。樣式塊語句中可以使用 from...to 結構,也可以使用 百分比

如下面這段程式碼,它在動畫開始執行時將元素放大 1.1 倍,在動畫執行到一半時將元素縮小為 0.8 倍,在動畫結束時將元素再放大為 1.1 倍,配合上後面要講到的 infinite 和貝塞爾曲線,就可以模擬出不錯的心跳動畫效果。

.heart {
  animation: heartbeat cubic-bezier(0.2, 0.73, 0.71, 0.44) infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.1);
  }
}

img

animation-duration

該屬性定義一個動畫週期的時長,可以傳入多個時間,用逗號隔開。

  • 預設值為 0s,表示無動畫
  • 單位為秒或者毫秒,無單位值無效

animation-timing-function

該屬性用於定義動畫的'節奏',預設值為 ease.

屬性值 描述
ease 緩慢開始,緩慢結束
ease-in 先慢後快
ease-out 先快後慢
ease-in-out 以慢速開始和結束的過渡效果
linear 動畫播放的次數,預設是 1
step-start 步進,忽略第一幀
step-end 步進,忽略最後一幀
step-middle 步進,從第一幀到最後一幀

不管是在 Animation 還是 Transition 裡,前 5 個應該很常見,我們可以直接在 Chrome Dev 中檢視具體的函式影象(其實這五個就是貝塞爾曲線的幾種特殊形式)。

img

step-start, step-end 和 step-middle 表示步進動畫。

其中 step-start 會忽略相應 @keyframs 規則的第一幀,而 step-end 會忽略最後一幀, step-middle 在一個週期內會從 第一幀一直步進到最後一幀

看下面這個例子,當使用 step-start 時,元素的初始狀態就是 1.2 倍(對應著 25%),一個週期內步進執行 25% -> 50% -> 75% -> 100%

當使用 step-end 時,元素的初始狀態是 1.1 倍(對應著 0%),一個週期內步進執行 0% -> 25% -> 50% -> 75%

當使用 step-middle 時,元素的初始狀態就是元素的初始狀態,一個週期內步進執行 0% -> 25% -> 50% -> 75% -> 100%

@keyframes someEffect {
  0% {
    transform: scale(1.1);
  }
  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.3);
  }

  75% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1.5);
  }
}

此外該屬性還有三個內建函式,分別是 cubic-bezier(), steps() 以及 frames()。

這裏只簡單談一談 steps()。Twitter 的點贊效果很酷,並且這種效果完全可以用 steps() 模擬出來。

img

首先你要下載下面這張圖片,可以看到它是一張 未點贊狀態 -> 生成禮花 -> 禮花消失 -> 點贊狀態 的雪碧圖。

img

在初始化時,我們通過 background-position: left;background-size: 2900%; 將初始背景定位到上圖中第一個灰色的 icon.

接著我們建立一個 @keyframes,用於在一個動畫週期內將上面的圖片從左到右一次性走完。

爲了每一幀都會「跳」到下一個 icon,而不是平滑的移動。我們使用 steps() 函式,因為共有 29 張小 icon,其中預設是第一個,所以傳遞引數 28.

在點選背景圖片時,將 is_animating 新增到 heart 元素上,即可實現點贊禮花效果。

<div class="heart"></div>
.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image: url('heart-locus.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: 2900%;
}

.is_animating {
  animation-name: heart-burst;
  animation-duration: 800ms;
  animation-timing-function: steps(28);
  animation-iteration-count: 1;
}

@keyframes heart-burst {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}
const heartDOM = document.querySelector('.heart');

heartDOM.addEventListener('click', function() {
  this.classList.toggle('is_animating');
});

heartDOM.addEventListener('animationend', function() {
  this.classList.toggle('is_animating');
});

animation-delay

該屬性用於將動畫延遲執行,預設值為 0s。當該屬性的屬性值為負值會出現一些好玩的事情,我們直接看 MDN 上的定義。

定義一個負值會讓動畫立即開始。但是動畫會從它的動畫序列中某位置開始。例如,如果設定值為-1s,動畫會從它的動畫序列的第 1 秒位置處立即開始。 如果為動畫延遲指定了一個負值,但起始值是隱藏的,則從動畫應用於元素的那一刻起就獲取起始值。

我們看下面這個例子:

.cube {
  margin-bottom: 10px;
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 10s linear;
}

.has-delay {
  animation-delay: 2s;
}

.has-ng-delay {
  animation-delay: -2s;
}

@keyframes colorChange {
  20% {
    background-color: #f8e81c;
  }

  40% {
    background-color: #d0011b;
  }

  60% {
    background-color: #7ed321;
  }

  80% {
    background-color: #509ce3;
  }

  100% {
    background-color: #ccc;
  }
}

html 結構如下:

<div class="cube"></div>
<div class="cube has-ng-delay"></div>
<div class="cube has-delay"></div>

這個例子中,我們將 cube 的動畫總時長設為 10s,且初始顏色都是灰色。不同的是,第一個 cube 正常執行,第二個 cube "延遲" -2s 執行,第三個 cube 延遲 2s 執行。

根據下面這張圖可以看出,第二個 cube 雖然是負數,但從動畫一開始就會執行,只不過它是從第二幀開始的。

這是因為定義在 @keyframes 中的動畫需要執行 animation-time 時間長度。animation-delay 為正數的時候,動畫就要要延遲開始,animation-time 都還沒有開始計算,正數的 delay 不會被計算到 animation-time 中,因此我們看到的動畫就是從第一幀開始的;animation-delay 為負數的時候,意味著動畫是提前開始的,animation-time 已經開始計算了,負數的 delay 是被算入 animation-time 中的,所以我們看到的動畫是從某一幀開始的。

img

所以我們可以嘗試寫個 loading 元件出來。原始碼貼在下面。

.loader-container {
  width: 210px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.cube {
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 5s linear infinite;
}

.delay-neg-1 {
  animation-delay: -1s;
}

.delay-neg-2 {
  animation-delay: -2s;
}

.delay-neg-3 {
  animation-delay: -3s;
}

.delay-neg-4 {
  animation-delay: -4s;
}

下面是 HTML

<div class="loading-container">
  <div class="cube delay-neg-1"></div>
  <div class="cube delay-neg-2"></div>
  <div class="cube delay-neg-3"></div>
  <div class="cube delay-neg-4"></div>
</div>

img

animation-iteration-count

該屬性定義迴圈播放動畫的次數,預設值為 1

  • 不可以為負數
  • infinite 表示無限迴圈
  • 可以為小數,比如 0.5 代表播放動畫的一半即結束

animation-direction

該屬性表示動畫是否反向播放,共有 4 個值:

  • normal: 每次從 @keyframes 0% 執行到 100%,一個週期結束後立即回到 0% 的位置
  • alternate: 假設 animation-iteration-count: infinite ,從 @keyframes 0% 執行到 100%後,再從 100% 的位置 回到 0%,周而復始
  • normal: 每次從 @keyframes 100% 執行到 0%,,一個週期結束後立即回到 100% 的位置
  • alternate-reverse: 假設 animation-iteration-count: infinite ,從 @keyframes 100% 執行到 0%後,再從 0% 的位置 回到 100%,周而復始

animation-fill-mode

用於設定動畫時間外的屬性,也就是說一個動畫週期開始之前或結束之後,元素的狀態應該是什麼樣的。該屬性有四個屬性值,分別是 none, forwards, backwards, both.

  • none 是預設值,表示動畫播放完成後,恢復到初始的狀態。
  • forwards 表示動畫播放完成後,保持 @keyframes 裡最後一幀的樣式。
  • backwards 表示開始播放動畫之前,元素的樣式將設定為動畫第一幀的樣式
  • both 相當於同時配置了 forwards 和 backwards。也就是說,動畫開始前,元素樣式將設定為動畫第一幀的樣式;而在動畫線束狀態,元素樣式將設定為動畫最後一幀樣式。

animation-play-state

該屬性用於讓一個動畫的暫停與啟動,有兩個屬性值,分別是 running 和 pause,當設定為 pause 時,動畫會立即會停在當前位置,當取消暫停後會在 停住的位置 繼續執行,而不會回到原點(或終點)重新執行。

animation

最後說一下 animation 屬性,它是上述屬性的簡寫形式,animation 屬性暫時還沒有收錄 animation-play-state ,如若使用需要單獨來寫,語法如下。

animation: name duration timing-function delay iteration-count direction fill-mode;
Facebook Profile photo
Written by Nat
This is the author box. A short description about the author of this article. Could be their website link, what they like to read about and so on. Profile