0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf

Transcript

1. CSS Animation 基礎 讓網⾴動起來
2. keyframe 關鍵影格 @keyframe move {
 from {
 left:0;
 }
 to {
 left: 100px;
 }
 }
3. keyframe 的位置可以使⽤百分比 @keyframe move {
 0% {
 background: #fff
 }
 50% {
 background: #f00
 } 100% {
 background: #000
 }
 }
4. animation name 動畫名稱 @keyframe move {
 xxx
 } @keyframe fade {
 xxx
 }
5. animation duration 動畫持續的時間 animation-duration: 5s;
6. animation delay 動畫延遲的時間 animation-delay: 2s;
7. animation-timing-function 動畫加速度函式 animation-timing-function: linear; 有 linear, ease, ease-in,
 ease-out, ease-in-out 等設定
8. ⾙茲曲線 cubic-bezier(n,n,n,n)
9. animation-direction 動畫播放⽅向 normal
 reverse
 alternate
 alternate-reverse
10. animation-fill-mode 動畫播放前後模式 none
 forwards
 backwards
 both
11. :after :before 偽元素
12. rotate 旋轉 transform-origin 旋轉的中⼼點