---
title: CSS3 學習筆記 (下) 動畫篇
tags: CSS , Web,
author: BoboLin
robots: index, follow
lang: zh
dir: ltr
breaks: true
disqus: hackmd
---

# CSS3 學習筆記 (下) 動畫篇
[CSS3 學習筆記 (上) 基礎篇](https://hackmd.io/@bingdoal/rJ21-Nx8W)
## Transition

| 屬性 | 參數 |
|:--------:| -------- |
| transition | `屬性,動畫時間,延遲,速度` |
+ 速度參數
+ ease 預設
+ ease-in 加速
+ ease-out 減速
+ ease-in-out 先加速後減速
+ linear 等速
+ `cubic-bezier(x1,x2,y1,y2)` [貝茲曲線](http://cubic-bezier.com/#.17,.67,.83,.67)
:::success
+ 基本上用貝茲就可以做到所有的效果，搭配 GUI 網站可以簡單產出參數。
+ 拉過頭可以搭配出意想不到的效果
:::
##### 示例一

.trans1{
    width:100px;
    height:100px;
    background-color:#bbb;
    transition:all 1s cubic-bezier(.57,-0.46,.66,1.58);
}
.trans1:hover{
    width:200px;
    height:200px;
    background-color:red;
}

<style>
.trans1{
width:100px;
height:100px;
background-color:#bbb;
transition:all 1s cubic-bezier(.57,-0.46,.66,1.58);
}
.trans1:hover{
width:200px;
height:200px;
background-color:red;
}
</style>
<div class="trans1"></div>

+ 貝茲的四個參數代表的是兩個點的座標
:::success
透過 `label for` 的功能，可以運用 `input` 的 `:checked` 選擇器，來實作一些簡單的事件。
:::
##### 動畫實驗一
<iframe height='300' width='130' scrolling='no' title='xPvqRd' src='//codepen.io/BoboBearLin/embed/xPvqRd/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/xPvqRd/'>xPvqRd</a> by chris (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

##### 動畫實驗二
<iframe height='400' scrolling='no' title='mqNmmb' src='//codepen.io/BoboBearLin/embed/mqNmmb/?height=265&theme-id=0&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/mqNmmb/'>mqNmmb</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

##### 動畫實驗三
<iframe height='265' scrolling='no' title='GOVmXo' src='//codepen.io/BoboBearLin/embed/GOVmXo/?height=265&theme-id=0&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/GOVmXo/'>GOVmXo</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

##### 動畫實驗四
<iframe height='265' scrolling='no' title='PQPPqN' src='//codepen.io/BoboBearLin/embed/PQPPqN/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/PQPPqN/'>PQPPqN</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Transform

#### 參數函式
| 縮放 | 傾斜 | 旋轉 | 位移 |
|:----:|:---:|:---:|:---:|
| scale() | skew() | rotate() | translate() |
| scaleX() | skewX() | rotateX() | translateX() |
| scaleY() | skewY() | rotateY() | translateY() |
| | | rotateZ() | translateZ() |
| | | rotate3D() | translate3D() |

| | 透視點 | 背面可見度 |
|:----:|:-----:|:----:|
| transform-origin<br>(轉換的起點) | perspective<br>(視野的距離) | backface-visibility |
| transform-style | perspective-origin<br>(視角的位置) |

:::success
跟直接更改屬性不同，透過 Transform 做變形不會改變元素的本體，只是顯示上的不同，不會造成跑版。
:::

+ 示例用 div style

.transform-div{
    height:100px;
    width:100px;
    background-color:#bbb;
    color:#f00;
    margin-left:50px;
    transition:all .5s;
    transform:perspective(200px);
}

<style>
.transform-div{
height:100px;
width:100px;
background-color:#bbb;
color:#f00;
margin-left:50px;
transition:all .5s;
transform:perspective(200px);
}
</style>
##### 示例一

.transform-scale:hover{
    transform:scale(2); 
    transform-origin:left bottom;
    transition:all 1s;
}

<style>
.transform-scale:hover{
transform:scale(2);
transform-origin:left bottom;
transition:all 1s;
}
</style>
<div class="transform-div transform-scale">scale</div>

##### 示例二

.transform-skew:hover{
    transform:skew(30deg,40deg);   
    transition:all 1s;
}

<style>
.transform-skew:hover{
transform:skew(30deg,40deg);
transition:all 1s;
}
</style>
<div class="transform-div transform-skew">skew</div>

##### 示例三

.trans-rotation:hover{
    transform:perspective(200px) rotateX(30deg);
    transition:all .5s;
}

<style>
.trans-rotation:hover{
transform:perspective(200px) rotateX(30deg);
transition:all .5s;
}
</style>
<div class="transform-div trans-rotation">Rotation</div><br>

:::info
+ 立體旋轉應該受到遠近的影響而改變大小，加入 perspective 屬性，定義 3D 上的視點距離。
+ 直接加入動畫的話，會因為 perspective 的改變而有打臉的情況發生，可以在原 class 先寫好 perspective 不讓其參與改變。
+ 或者可以直接把 perspective 當作屬性，定義在父輩，讓下面的子元素去繼承。
:::

##### 示例四

.trans-translation:hover{
    transform:translateY(200px);
    transition:all 1s;
}

<style>
.trans-translation:hover{
transform:translateY(200px);
transition:all 1s;
}
</style>
<div class="transform-div trans-translation">Translation</div>
<br>

### 各種應用
##### 翻牌
<iframe height='265' scrolling='no' title='BmXZqx' src='//codepen.io/BoboBearLin/embed/BmXZqx/?height=265&theme-id=0&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/BmXZqx/'>BmXZqx</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

+ 設定 backface-visibility 可以讓背面消失，搭配 rotateY，達到翻轉到背面的效果。

##### 3D 方塊
<iframe height='300' scrolling='no' title='BJBKpy' src='//codepen.io/BoboBearLin/embed/BJBKpy/?height=300&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/BJBKpy/'>BJBKpy</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Animation
|屬性|參數|
|:---:|:---:|
|`animation`|動畫名稱,動畫時間,延遲時間,速度,<br>==次數==,==方向==,==填充模式==,==播放狀態==|

+ **每個參數都可以獨立為各自屬性去設定:**

| 屬性 | 說明 |
|:--------:|:--------:|
| `animation-name` | 動畫名稱 |
| `animation-duration` | 動畫時間 |
| `animation-delay` | 延遲 |
| `animation-timing-function` | 速度 |
| `animation-iteration-count` | 次數 |
| `animation-direction` | 方向 |
| `animation-fill-mode` | 填充模式 |
| `animation-play-state` | 播放狀態 |
[MDN - animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)

+ 動畫名稱透過 `@keyframes` 關鍵字來定義，可以想成變數宣告，定義動畫過程中每個位置的狀態

@keyframes 動畫名稱 {
    0%{
        ...
    }
    ...
    100%{
        ...
    }
}

+ 延遲
+ 可以寫負值，代表先跑幾秒，起點不同
+ 次數
+ 0~100% 算一次
+ `infinite`: 無限次
+ 方向
+ `reverse`: 相反 100% -> 0%
+ `alternate`: 往返，次數 2 以上會來回，0% -> 100% -> 0% ...
+ `alternate-reverse`: 方向相反得往返
+ 播放狀態
+ `paused`: 暫停
+ `running`: 播放
+ 填充模式
+ 預設 delay 作用在沒有動畫發生下
+ `backwards`: delay 時間作用在 0% 之後
+ `forwards`: delay 作用在預設，最後停止在 100%，不會跳回預設
+ `both`: delay 時間作用在 0% 之後，且最後停留在 100%
:::warning
+ 設定 forwards 或者是 both 的話，最後停留的狀態是在 animation 執行中的，因此若有相同的屬性設定都會被 animation 給覆蓋掉。
+ animation 優先度高於 transition。
:::
:::info
+ 建議別用 forwards 或者 both，需要類似效果，可以設定預設狀態在 0% 或者 100% 的位置。
:::
#### 幻燈片實作
<iframe height='265' scrolling='no' title='EoVvxp' src='//codepen.io/BoboBearLin/embed/EoVvxp/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/EoVvxp/'>EoVvxp</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe><br><br>

## 其他
| 屬性 | 說明 | 值 |
|:---:|:----:|:--|
| `box-sizing` | | `border-box`: margin，padding 不會增加元素的寬度 |

+ RWD 寫法，根據裝置寬度去調整

@media screen and (min-width: 720px){
    h1{
        ...
    }
    div{
        ...
    }
    ...
}

[波浪](https://codepen.io/davinci/pen/YxwwWd)