參與 Modern Web 2016，聽了 Amos 的分享後， 多瞭解了一些關於 CSS3 animation 的知識，並聽到了之前沒注意到的面向。 因此在做個簡單的介紹，並以最近做到的小動畫作為範例，分享製作過程中的碰到的問題以及所使用的解決方法。

5. .element {
animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
}

6. .element {
animation:
name duration delay timingFunc
count direct fillMode;
animation-play-state
}

8. animation-name

9. animation-duration

10. animation-delay

11. animation-timing-function
參參考：http://cubic-bezier.com/#.67,-0.34,.49,1.43

12. animation-iteration-count

13. animation-direction

14. animation-fill-mode

15. animation-play-state

18. CSS Triggers - https://csstriggers.com/

19. https://docs.google.com/spreadsheets/d/
1Hvi0nu2wG3oQ51XRHtMv-A_ZlidnwUYwgQsPQUg1R2s/pub

20. High Performance Animations | HTML5 ROCKS

21. High Performance Animations | HTML5 ROCKS

54. •
http://www.ithome.com.tw/video/108431
http://s.itho.me/modernweb/2016/trackb/Amos/amos-ppt.html
•
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/
Using_CSS_animations
•
http://unmatchedstyle.com/news/css-animation.php
•
http://codepen.io/dapacreative/full/bNZbMM/
•
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/