大家好，我是一名菜鳥工程師，Chris，今天來到第 10 天， CSS 元素變形、轉場效果以及動畫效果

1 CSS 元素變形 : 使用transform屬性
可以對元素進行變形，以下是一些常見的函式用法

- 平移（位移）： translate(x, y) 讓元素在水平和垂直方向移動，以下有幾種方式可以參考

移動水平方向 :

.element {
  transform: translateX(50px); /* 元素向右移動50像素 */
}

.element {
  transform: translateX(-20px); /* 元素向左移動20像素 */
}

移動垂直方向 :

.element {
  transform: translateY(30px); /* 元素向下移動30像素 */
}

.element {
  transform: translateY(-10px); /* 元素向上移動10像素 */
}

同時移動水平和垂直方向 :

.element {
  transform: translate(50px, 30px); /* 同時向右和向下移動元素 */
}

.element {
  transform: translate(-20px, -10px); /* 同時向左和向上移動元素 */
}

組合 translate 屬性 :

.element {
  transform: translateX(50px) translateY(30px); 
  /* 先向右移動50像素，然後向下移動30像素 */
}

- 旋轉： rotate(angle) 指定角度，讓元素旋轉

旋轉 45 度：

.element {
  transform: rotate(45deg);
}

- 縮放： scale(x, y) 讓元素能夠水平和垂直方向的縮放，以下有幾種方式可以參考

將元素放大1.5倍 :

.element {
  transform: scale(1.5);
}

水平方向縮小至50%，垂直方向放大至200% :

.element {
  transform: scaleX(0.5) scaleY(2);
}

- 傾斜： skew(x-angle, y-angle) 讓元素傾斜，並建立有趣的視覺效果，以下範例可以製作出菱形
HTML 設定 :

<div class="box"></div>

CSS 設定 :

.box {
  width: 200px;
  height: 200px;
  transform: skew(10deg);
  background-color: pink;
}

- 可以結合 scale 屬性與其他 transform 屬性一起使用，建立複雜的變形效果，以下為範例

.element {
  transform: translate(50px, 50px) scale(1.5);
  /* 同時平移且放大 */
}

2 CSS 轉場的效果 : 使用transition屬性
當元素的某些屬性變化時，建立有漸變的轉場效果，可以與偽元素（如 :hover）一起使用，以達到互動的效果

CSS transition 基本結構設定
- property： 指定要有轉場效果的屬性，如 color, width 等
- duration： 指定轉場的持續時間
- timing-function： 指定轉場的時間函數，例如 ease、linear、ease-in-out 等
- delay： 指定轉場開始前的延遲時間

transition屬性的基本結構：

.element {
  transition: property duration timing-function delay;
}

範例：

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
}

.box:hover {
  width: 250px;
  transition: width 1s ease-in;
}

3 CSS 動畫的效果 : 使用animation屬性

CSS animation 基本結構設定

- name：動畫名稱，通常會使用 @keyframes 來定義動畫
- duration：動畫持續時間，以秒(s)或毫秒(ms)為單位
- timing-function 動畫的時間函數。常見的值包括 ease（默認值，緩慢開始，緩慢結束）、linear（均速）、ease-in（緩慢開始）、ease-out（緩慢結束）等
- delay：動畫開始前的延遲時間
- iteration-count：動畫的重複次數。可以是整數，也可以是 infinite（無限重複）
- direction：動畫的播放方向，可以是 normal（正向，默認值）、reverse（反向）、alternate（正向和反向交替）等
- fill-mode：動畫在非運行時間段內的行為。例如： forwards（保持最終狀態）、backwards（使用第一個關鍵幀的狀態）、both（同時應用 forwards 和 backwards）

animation 屬性的基本結構：

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

範例：

.element {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: myAnimation 3s ease-in-out 1s infinite alternate forwards;
}

/* 定義動畫 */
@keyframes myAnimation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
        background-color: red;
    }
}

我建立一個名為 myAnimation 的動畫，動畫持續時間為3秒，使用 ease-in-out 時間函數，在1秒後開始，並無限次交替播放，最終狀態保持在：結束時的狀態

以上就是CSS 元素變形、轉場效果以及動畫效果的用法，我們也可以設定更複雜的動畫，製作出更具創意的效果

那我們明天見囉～～

預告：明天的主題是 CSS 變數!!!