Day 17 CSS變身，給我動起來！（變形、轉換、動畫）

2022 iThome 鐵人賽

DAY 17

自我挑戰組

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 17 篇

14th鐵人賽

candy82202

2022-10-02 18:19:00

1667 瀏覽

分享至

前言

昨天提到了動態轉場的部分，今天就要順勢講到動畫啦

這趴自己覺得蠻好玩的，想要開始嘗試創造出簡單的動畫，在還不了解JavaScript的時候也能做出來，就需要學到今天的Animation了！

那至於想創造出在網站上看到動畫的樣子出來，一樣就需要詳細的跟電腦說明，我希望開始的樣子跟結束變化的樣子是如何，中間的過程，希望哪個元素跑到哪個位置去，花多久的時間等等的。

在講Animation以前首先先來講2D平面的 Transform：變形效果
裡面的屬性可以讓你修改 CSS 可以看到的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。語法格式如下

transform: 變形效果

下面幾個比較常用的變形效果：

translate(x, y)
rotate(deg)
scale(x, y)

translate()移動

translate後面是放(x軸, y軸)，x軸水平移動多少距離，ｙ軸垂直移動多少距離

距離可以設定是負值，就是往反方向，一般正常是x軸向右跟y軸向下，單位一樣使用（px）

rotate()旋轉

我們設定角度，那元素就會依照元素本身區域的中央為基準，來進行順時針方向旋轉，rotate後面的數值放想要旋轉幾度，旋轉角度單位是（deg）。

例如向右轉90度就是90deg，想要反方向的話，加上負值即可。

scale()縮放

scale後面放上(寬度想要放大的倍數, 高度想要放大的倍數)

x軸想要縮放的比例跟y軸想要縮放的比例。

當然如果我們使用寬度跟高度直接設定也可以，但中心點是使用左上角為中心

這時候如果改成使用scale的話就會是以自己的中心點為中心來進行放大，就不會有看起來偏移的樣子出現。

Animation動畫效果

就像是2D 跟 3D transform+ transition，決定整個動畫的播放方式，既然這樣說，那這兩個的差別在哪裡呢？

transition

不能有時間上個別設定的功能，比較類似上述 from to 的效果，因此動畫效果會比較單一。

animation

因為有關鍵影格(@keyframe) 可以設定，@keyframes才可以控制動畫中間的步驟。

所以animation才會達成更多更複雜的動畫，至於使用什麼方法來寫 CSS 的動畫，就根據需求而定。

@keyframes 關鍵影格

我們學會前面各種CSS設計的樣式變換，如果把這些樣式跟定位結合起來，有開始跟結束加上可能中間有不同變化，可能移動速度有快有慢等等的，就會像是一個簡單的動畫效果，至於中間轉換的過程，就可以借( @keyframe ) 來達成效果。

那他跟transition相比較起來，@keyframes才可以控制動畫中間的步驟。

如果沒有指定定開始或是結束的狀態，也就是從0%-100%那格式如下：

@keyframes 動畫自訂名稱{
	from {CSS設定;}
	to{Css設定;}
	}
@keyframes MoveToRight {
    from { left: 0; }
    to { left: 80%; }

上面是設定開始跟結束比較簡單設定的方法。

上下寫法雖然都是向右移動，但差異是在使用百分比會"有頓點"，但用from到to畫面感"較連續"，而要使用哪種寫法，就要看需求而定了。

下面是想要改成利用百分比的方式，中間新增不同的變化，格式如下：

@keyframes 關鍵影格自訂名稱{
	百分比1 {CSS設定;}
	百分比2 {CSS設定;}
	}
@keyframes MoveToRight {
    0% { left: 0; }
    25% { left: 20%; }
    50% { left: 40%; }
    75% { left: 60%; }
    100% { left: 80%; }
}

下面是動畫播放時可以調整的屬性

animation-name: 動畫名稱
animation-duration: 動畫時間
animation-timing-function: 動畫轉換方法
animation-delay: 動畫延遲時間
animation-iteration-count: 動畫重複次數
animation-direction: 動畫播放方向
animation-play-state: 動畫播放狀況
animation-filled-mode: 動畫開始或結束，元素呈現的樣子

動畫名稱

執行動畫前先用@keyframe自訂動畫名稱還有屬性變化

動畫時間

指的是單一次播放的時間，單位是 s（秒），預設是0秒

動畫轉換方式

跟transition 一樣是設定動畫轉換的速度配置

動畫延遲時間

常常在網站上看到加載中loading的時間，基本上就是動畫開始之前等待的時間，預設是０秒

動畫重複次數

可以設定大於0的數字，因為預設是1次，如果設定”infinite”代表會無限重複播放。

動畫播放方向

動畫跑完一次以後要幹嘛再跑一次嗎？

跟學校體育課一樣，短跑100公尺後是從頭再跑一次嗎，還是要跑折返跑，跑過去再跑回來呢？

alternate從頭開始播放到最後，再反向播放回去

reverse就會反著播放動畫

動畫播放狀況

預設動畫是running播放中，可以設定paused暫停

animation-filled-mode

這個屬性規定動畫在播放前後呈現的樣子是什麼

常用的 forwards 參數是說，當動畫結束時，可以停在最後一個影格上，避免動畫結束回到初始設定。

設定參數時有一個時間表示是動畫播放時間，第二個時間是動畫延遲時間，省略沒有key的參數就會以預設值為主，統整後的寫法如下：

animation: 動畫名稱 動畫時間 動畫轉換方式 動畫延遲時間 動畫重複次數 動畫播放方向 播放狀況

接下來用個小小的動畫呈現：

<div class="container">
      <div class="box"></div>
      <p>
        Logic will get you from A to B. Imagination will take you everywhere.
      </p>
      <p>---Albert Einstein</p>
    </div>

div.container {
  width: 550px;
  height: 550px;
  background-color: crimson;
}
div.box {
  width: 150px;
  height: 150px;
  background-color: darkgray;
  transition: all 1s;
  animation-name: cross;
  animation-duration: 2s;
  position: relative;
  animation-fill-mode: forwards;
}
@keyframes cross {
  from {
    background-color: brown;
    top: 0px;
    left: 0px;
  }
  to {
    background-color: antiquewhite;
    top: 400px;
    left: 400px;
  }
}
p {
  font-size: 2rem;
  animation-duration: 3s;
  animation-name: slidein;
  animation-fill-mode: forwards;
}
@keyframes slidein {
  from {
    margin-left: 90%;
    width: 300%;
  }
  to {
    margin-left: 5%;
    width: 100%;
  }
}