---
# System prepended metadata

title: 2021 夏季切版直播班 week7 - CSS 動畫效果
tags: [CSS, animation, 上課筆記, transform]

---

# 2021 夏季切版直播班 week7 - CSS 動畫效果
###### tags: `CSS` `animation` `transform` `上課筆記`
2021/08/13 上課筆記

## CSS animation
[完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html)
### 關鍵影格 @keyframe
* 設定影格內容及位置
* 每日任務：[練習 keyframes](https://codepen.io/Zoechiueh/pen/ExXYoPM)
```css=
/* The animation code */
@keyframes example {
  0%   {background-color:pink; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:50px;}
}
```

### 移動速率
#### 動畫持續時間 duration
* 持續時間：秒數 s
```css=
animation-duration: 4s;
```
#### 動畫播放延遲時間 animation delay
* 延遲時間：秒數 s
```css=
animation-delay: 2s;
```
#### 動畫播放次數 animation iteration count
* 次數：
    * infinite 無限循環
    * 數字
```css=
animation-iteration-count: infinite;
```
#### 動畫影格 animation fill mode
* 停留在哪個影格
    * forwards 停留在最後一個位置
    * backwards: 留在第一個位置
    * both 擁有前兩者功能(停留在最後一個位置+留在第一個位置)
* [animation-fill-mode](https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html)
```css=
animation-fill-mode: backwards;
```
#### animation 範例
```css=
/* The animation code */
@keyframes example {
  0%   {background-color:pink; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:50px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;

/*  晚幾秒發動  */
  animation-delay: 2s; 
  
/*  要重複跑幾次，或者是用 infinite 一直持續跑   */
/*   animation-iteration-count: infinite; * /
  
/*  停留在哪個影格  forwards、backwards、both */
/*   animation-fill-mode: backwards; */
/* 
  forwards 停留在最後一個位置   
  backwards: 留在第一個位置
  both 擁有前兩者功能
  */
}
```
## 業界常用動畫效果套件 animate.css
* [animate css](https://animate.style/) 使用
* 用法：套用 2 個 class
* 範例：**animateshakeX**
class 套用 `animate__animated` `animate__shakeX`

### animate.css 的通用類別
* [Utility classes](https://animate.style/#utilities)
    * Delay classes
    * Slow, slower, fast, and Faster classes
    * Repeating classes

## transform 用法
* transform 屬性不會影響畫面空間

### 旋轉 rotate
* transform: rotate(...deg) 旋轉角度
* 每日任務：[練習 transform](https://codepen.io/Zoechiueh/pen/wvewpWq)
```css=
transform: rotate(30deg);
```

### 放大/縮小 scale
* transform: scale(...) 放大縮小倍率
```css=
transform: scale(3); //放大倍率
```

### 移動 translateX translateY
* translateX(...px) 水平移動
* translateY(...px) 垂直移動
```css=
transform: translateY(100px);
```

## opacity 透明度
* 數值 1不透明 ~ 0透明
* 適合用於漸變效果
* 每日任務：[練習 opacity](https://codepen.io/Zoechiueh/pen/qBjWprB)
```css=
opacity: 1;
opacity: .5;
opacity: 0;
```

## 比較 visibility:hidden 與 display: none
* `visibility: hidden;` 會佔用區塊空間
* `display: none;` 不會佔用區塊空間
* 做動畫效果 opacity 比 visibility 更實用

### visibility
* visibility 用法
value: visible(顯示) / hidden(不顯示) / collapse / inherit

## 【觀念小測驗】box-model 與 transform
* 題目：哪些用法不會影響到 box-model 內容區塊？
a. display: none;
b. transform
c. opacity
d. visibility: hidden;
* ANS：b, c, d

## transition
* 用法：簡單基本的效果建議可以使用 transition
```css=
.box{
width: 100px;
height: 100px;
background: #000;
transition: all .8s;
/*  all 代表全屬性 (width height background 三項都要有漸變效果)，也可以只要某項漸變 ex.transition: width .8s */
}

.box:hover{
width: 300px;
height: 300px;
background: blue;
}
```

## AOS 套件
* [AOS 官網](https://michalsnik.github.io/aos/)
* 此套件支援 RWD 響應式
* 使用此套件不太需要寫到 javascript
* 原理：js 偵測移動到即將到來的區塊>> 動態加入 class 讓他出現效果

### 載入步驟

在 </body>前加上以下程式碼

```
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
 AOS.init();
</script>
```


AOS 單一設計

```
<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
  </div>
```


AOS 全域設計

```
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});
```

* 學員範例：https://codepen.io/liao/pen/BaovZRg


## AOS範例

* 文章左右偏移：https://codepen.io/bradtraversy/pen/bGbREWg 
* 組合： https://codepen.io/amctagg1/pen/WVjGKw
* 完整範例：https://codepen.io/taohuh/pen/OZmgRV
* 每日任務：[aos + animate](https://codepen.io/Zoechiueh/pen/xxrKpXK)
* 每日任務：[第七週版型 + aos](https://codepen.io/Zoechiueh/pen/dyRbJeX)

## 額外補充
* [hover.css](https://ianlunn.github.io/Hover/)
* [菁英團](https://courses.hexschool.com/courses/951862/lectures/20753023)
