[CSS][Animation] 動畫效果

前言

在 UI 當道的領域當中,要讓介面更加地易於使用,就必須要善加利用 animation 來創造動畫效果,有非常多的「微互動」都會需要使用,瞭解 keyframes 與 animation 勢在必行。

Keyframes

  • 建立多個狀態的轉場效果,A to B to C (and on)。
  • 可以自動播放,不用依賴任何的事件監聽(例:hover)。
  • 有更多可以控制的層面,例如 direction、looping。

Keyframes 語法

@keyframes 是關鍵字,代表要開始設定 keyframes 了,後面緊接著這一系列 keyframes 的名稱(name),這個 name 是可以自己定義的。而在最外層大括號中間,就開始設定各個 State,以下例來說,是 0%、50%、100% 的時候,會有各自的 State,依據不同的 State,設定 CSS:

@keyframes 自訂的name {
  0% { ... }
  50% { ... }
  100% { ... }
}

以上例來說的話,整個動畫會是從 0% 開始,然後轉場到 50%、再轉場到 100%,然後到 100% 的時候,可再設定要停止,或是自動回到 0% 開始重頭播放。

最後當我們定義好了一個 @keyframes 時,要將之運用在某個元素的時候,就會需要使用 css 中的 animation 了。

animation 語法

animation: keyframes_name 2s 1s ease-out forwards;
// 等同於:
animation-name: keyframes_name; // 這裡的 keyframes_name 就是定義好的名稱。
animation-duration: 2s; // 動畫執行期間的秒數。
animation-delay: 1s; // 等待 1 秒之後,才會開始執行 keyframes 所設定的動畫。
animation-timing-function: ease-out; // 轉場的 timing function。
animation-fill-mode: forwards; // 在動畫結束之後,該停在哪個狀態或該如何接續進行動畫,這裡選 forwards 是指停在 100% 的狀態,可選的值有 none(default)|forwards|backwards|both|initial|inherit

除此之外,還有其它有關於 animation 的 css 可以使用:

animation-iteration-count: 1; // 動畫重覆的次數,如果要無限次數,就設定 infinite。
animation-direction: normal; // 在執行 keyframes 時,預設通常都是從 0% 執行到 100%,如果想要設定從 100% 執行到 0% 時,就可以設定 reverse。另一個選項是 alternate,會從 0% 執行到  100%,然後再從 100% 執行回 0%。
animation-play-state: running; // 可以的選項有 running|pause,與影片的播放、暫停是同樣的意思;這在與 JS 搭配時,可妥善控制動畫。

談談 Timing functions

預設的 Timing functions 有以下幾種:

  • ease:是預設的。慢進 → 加速 → 減速到結束。
  • ease-in:慢進 → 加速到結束。
  • ease-out:快進 → 減速到結束。
  • ease-in-out:開始跟結束都是慢的狀態。
  • linear:以相同速度前進。
  • steps():無連續的動作,直接跳至各步 ( step ) 的指定 css。
  • cubic-bezier():指定動畫滑動的曲線,此網站可視覺化的指定。

預設的 Timing functions 示範:

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(.5, -.5, .5, 1.5)
steps(3)

進一步瞭解 cubic-bezier

有名的貝茲曲線(cubic-bezier),在 CSS3 中的 animation-timing-function 就是可以讓你指定 cubic-bezier 的地方,預設中的 ease、ease-in、ease-out、ease-in-out、linear ,其實都可以透過 cubic-bezier 來達成,當你想要客製化一些移動的動畫效果時,就會需要用到 cubic-bezier,詳細範例可以在此網站瀏覽。

範例

範例 1:重新瀏覽網頁方可看到效果

Surprise!

看原始碼:html css

範例 2:重新瀏覽網頁方可看到效果

Keyframes! 💯

看原始碼:html css

範例 3:重新瀏覽網頁方可看到效果

Three deee! ✨

看原始碼:html css

範例 4:(套用多個 keyframes)重新瀏覽網頁方可看到效果

Surprise

看原始碼:html css

您可在此處留言

搶先留言!

Notify of
avatar