---
tags: Cmoney_Web_檢討
---
WEEK2_Self-Study_CSS 動畫
===

討論
---

1. 如果要使用移動動畫，盡量使用 ==translate== 而不是，設定 position 然後 `left: 1000px;` 之類的。因為 position 的方法是更改到 layout 再去渲染，速度比較慢。

/* 不好 */
.cloud:hover {
  left: 1000px;
}

/* 讚讚用這個 */
.cloud:hover {
  transform: translatex(1000px);
}

2. 緩動函數網站，可以看各種貝茲曲線的變化，還有怎麼用
[緩動函數網站](https://easings.net/zh-tw)

3. CSS 變化教學網站
[教學網站](http://www.dfuns.idv.tw/teaching_css3.html)

4. 看各種東西在瀏覽器的支援度
[Can I use](https://caniuse.com/)

簡報
---

- [CSS動畫_A](https://docs.google.com/presentation/d/1IbehLKHJlovW-sttBSVpVC2mJSPXnn5-/edit?usp=sharing&ouid=116902059173324685282&rtpof=true&sd=true)

- [CSS動畫_C](https://docs.google.com/presentation/d/1rXyzv4PibZ9i0s6xy_r9xLdyC6Td98Pi/edit#slide=id.p1)

- [CSS動畫_J](https://jaosn60810.github.io/2021_cm_frontend_selfStudy/week2_CSS_animation/)