[CSS][Animation] 動畫效果 - Carlos-Studio

前言

在 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 示範：

進一步瞭解 cubic-bezier

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

範例

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

看原始碼：html css

// html

	Surprise!

// css
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.demo_basic_animation {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-delay: .5s;
  opacity: 0;

  background: #3991AE;
  color: #fff;
  font-size: 3rem;
  overflow: hidden;
  padding: 1rem 2rem;
  position: relative;
  text-align: center;
}

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

看原始碼：html css

// html

  Keyframes!
  ?

// css
@keyframes show-background {
  0% {
    transform: translate(-110%, 95%);
  }
  50% {
    transform: translate(0, 95%);
  }
  100% {
    transform: none;
  }
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.demo2 {
  color: #fff;
  font-size: 3rem;
  overflow: hidden;
  padding: 1rem 2rem;
  position: relative;
  text-align: center;
}
.demo2:before {
  animation: show-background 1s .5s cubic-bezier(0, .9, .3, 1) forwards;
  background: #3991AE;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-110%, 95%);
}
.demo2 span {
  animation: pop-in .5s 1.4s cubic-bezier(0, .8, .4, 1.25) forwards;
  display: inline-block;
  transform: scale(1);
  opacity: 0;
}
.demo2 .text-part-1 {
}
.demo2 .text-part-2 {
  animation-delay: 1.6s;
}

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

看原始碼：html css

// html

	

		Three deee! ✨
	

// css
@keyframes no-transform {
  100% {
    transform: none;
  }
}
.centered {
  -webkit-transform-style: preserve3d;
          transform-style: preserve3d;
  -webkit-perspective: 800px;
          perspective: 800px;
}
.demo3 {
  animation: no-transform 1s .5s cubic-bezier(0, .1, .5, 1.5) forwards;
  background: #3991AE;
  color: #fff;
  font-size: 2rem;
  padding: 1rem 1.5rem;
  position: relative;
  text-align: center;
  transform: rotateX(-90deg);
}

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

看原始碼：html css

// html

	

		Surprise
	

// css
@keyframes setup{
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 1;
    transform: rotateZ(5deg);
  }
}
@keyframes dance{
  0% {
    transform: rotateZ(5deg);
  }
  50% {
    transform: rotateZ(-5deg);
  }
  100% {
    transform: rotateZ(5deg);
  }
}
.demo4_multiple {
  animation: setup 2s ease-out,
             dance 1s 2s cubic-bezier(0, .8, .5, 1.5) infinite;
  background: #3991AE;
  color: #fff;
  font-size: 2rem;
  padding: 1rem 1.5rem;
  position: relative;
  text-align: center;
  transform: rotateX(-90deg);
}