動畫(animations)

• CSS3轉場/過渡(transitions): 主要以開始狀態、結束狀態與持續期間(duration)三種參數，以及可指定的漸變函數(transition timing function)，將DOM元素或網頁上的物件進行轉變。
• CSS3動畫(animations): 又稱為關鍵影格(Keyframe)動畫，可以加入關鍵影格，提供許多動畫片段的組合。

轉場(Transition)

將鼠標懸停在下面的紅色方塊上，查看轉場效果：

轉場用法

CSS 轉場允許您在給定的持續時間內平滑地更改屬性值。

要創建轉場效果，您必須指定兩件事：

• 要添加效果的 CSS 屬性
• 效果的持續時間

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

當指定的 CSS 屬性（寬度）更改值時，轉場效果將開始。

現在，當用戶將鼠標懸停在 <div> 元件上時，讓我們為 width 屬性指定一個新值：

<style>
div:hover {
  width: 500px;
}
</style>

CSS Transition

指定轉場的速度曲線

transition-timing-function 屬性可以具有以下值：

• ease - 指定一個緩慢開始，然後快速，然後緩慢結束的轉場效果（這是預設值）
• linear - 指定從開始到結束具有相同速度的轉場效果
• ease-in - 指定一個緩慢啟動的轉場效果
• ease-out - 指定一個緩慢結束的轉場效果
• ease-in-out - 指定緩慢開始和結束的轉場效果
• cube-bezier(n,n,n,n) - 允許您在三次貝塞爾函數中定義自己的值

延遲轉場效果

轉場+變形

div {
  transition: width 2s, height 2s, transform 2s;
}

轉場+變形

CSS 3D

HTML 結構如下：

<div class="perspective"> 
  <div class="flip-box"> 
  </div>
</div>

翻牌

翻牌的基本CSS 結構如下：

.perspective {
  preserve: 500px;
}
.flip-box {
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

請將滑鼠懸停在牌上

例題:翻牌

速記屬性轉場

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div {
  transition: width 2s linear 1s;
}

CSS 動畫

@keyframes 規則

下例實現文本的水平滾動，達到走馬燈的效果:

<style>
div.animate {
  animation-name: example;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes example {
  from {transform:translatex(-100%);}
  to {transform:translatex(100%);}
}
</style>
<div id="animate" style="font-size:3vw">Welcome to CSS animation! Welcome to CSS animation!</div>

下面的示例將“example”動畫綁定到 <div> 元件。 動畫將持續 4 秒，它會逐漸將 <div> 元件的背景顏色從“紅色”更改為“黃色”：

看效果

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

CSS 動畫屬性總覽 ( CSS Animation Properties )

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

動畫速記屬性示例

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: example 5s linear 2s infinite alternate;
}

彈跳

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient
      (circle at 50px 50px, #5cabff, #000);

  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function:
      cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 300px, 0); }
}
  

使用 sprite 的動畫

以戴帽人為例，使用以下屬性呈現動畫:

animation: <name> <duration of one frame in seconds> steps(<number of frames>) 
    動畫：<名稱> <一影格的持續時間（以秒為單位）> 步驟（<影格數>）<完成動畫的持續時間>。
    

<style>
@keyframes walk {
    from { background-position: 0px; }
    to { background-position: -1472px; }
}                         /* 精靈圖寬度*/

.capguy {
    width: 184px; height: 325px;  /* 單一影格大小*/
    background-image: url("../css/gif/capguy-walk-1472.png");  /* sprite 圖片位址*/
    margin: 0 auto;   /* 表示上下邊界為0 ，左右為 auto 表示自動均分。*/
    animation: walk 1s steps(8) infinite;  /* 動畫屬性*/
}
</style>
<div class="capguy"></div>

現在將以上代碼放置在希望播放動畫的頁面中就成功了。

例題: 戴帽人立定走
參考資料:animate-sprites-in-css 如要平移，必須在樣式表中加入平移的關鍵影格如下:

@keyframes move_forward	{
	0%{transform:translateX(-736px);}
	100%{transform:translateX(736px);}
	}
    

並將 move_forward 類別加入 capguy 的 animation 屬性，注意要用逗號隔開如下:

    animation: walk 1s steps(8) infinite, move_forward 8s linear infinite;
    

例題: 戴帽人行走

熊貓走路

例題: 熊貓走路
參考資料:panda Animation

騎馬奔駛

有的精靈圖(如騎馬奔駛圖)各影格位置不易計算，可先用sprite-cutter切割為個別影格。
如騎馬奔駛圖切成16片，@keyframes 設定 16 段，每段佔 6.25%。
注意 animation-timing-function 設定為 step-start，動畫開始立即呈現第一個影格。

 <style>
  #horse {
    width:186px;
    height:141px;
    position:absolute;
    animation: oxxo 1s infinite step-start ;
  }

@keyframes oxxo{
    0%{
    background-image:url("tile000.jpg");
    }
    6.25%{
    background-image:url("tile001.jpg");
    }
      ... 依此類推，每格相間 6.25%
    100%{
    background-image:url("tile000.jpg");
    }
}
  </style>
  <div id="horse"></div>
  

例題: 騎馬奔駛
參考資料:css-animation

賽馬
原圖在:shawnmcburnie

網格圖像的 css 動畫

對於這個大小為 450px × 112px 的圖像，精靈幀大小為 112.5px X 112px，我們需要水平移動 4 幀，垂直移動 2 幀。
這意味著我們需要創建兩個單獨的 @keyframe 動畫來遍歷每個方向。 當 X 方向動畫正在播放時，Y 必須凍結直到它完成。
除非 X 動畫完成，否則不得觸發 Y 動畫。 這可以通過我證明 Y 動畫的動畫時間增加 4倍來完成。

     div.leopard{
      width: 112.5px;
      height: 56px;
      margin: 0 auto;
      background-image: url("../css/gif/leopard.png");
      animation: playX 1s steps(4) infinite,
                 playY 4s steps(2) infinite,
                 move_forward 12s linear infinite;
    }
    @keyframes playX {
      from {background-position-x: 0px;}
      to {background-position-x: -450px;}
    }
    @keyframes playY {
      from {background-position-y: 0px;}
      to {background-position-y: -112px;
      }
    @keyframes move_forward	{
		0%{transform:translateX(0px);}
		100%{transform:translateX(450px);}
	 }
    }
 

例題: Leopard
參考資料:css-animations-using-with-spritesheets-in-a-grid-image

DOM 動畫

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id ="container">
  <div id ="animate">動畫在此進行</div>
</div>

</body>
</html>

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

動畫程式碼

id = setInterval(frame, 5);

function frame() {
  if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */
  }
}

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}

例題: animation.html

下雨效果

看圖來分析下，我們需要實現哪些效果。

1. 雨滴下落效果，移動鼠標控制下落方向
2. 雨滴下落散成小水珠，小水珠的移動方向和鼠標移動方向相同
3. 雨滴下落到鼠標坐標一定範圍內，散成小水珠，同樣的，小水珠的移動方向也和鼠標移動方向相同

逐步詳細解說見canvas 實現漂亮的下雨效果

參考資料

• css3 動畫
• ANIMATE! (with CSS)
• CSS 3D transforms
• DOM Animation
• ponda Animation
• bouncing-ball
• Animate.css
• sprite+animation
• sprite-cutter
• Cross fading images
• Scrolling Text
• itread01.com
• 35 Inspiring Examples of CSS Animation