# 【Day13】前端基礎動畫互動 part2
## CSS影格動畫

1. 用@keyframes定義影格

2. 在元素上套用影格製作動畫(animation: 影格名稱/時長/次數)

### 參考範例
**程式碼**
HTML(jade)

.box
  .block.block1 
  .block.block2 
  .block.block3 
  .block.block4 
  .block.block5 

CSS(sass)

@mixin size($w, $h)
  width: $w
  height: $h
  
.box, .block
  border: solid 2px
  
.box
  +size(900px,500px)
  position: relative
.block
  +size(50px,50px)
  position: absolute
  bottom: 0px
  
.block1
  left: 150px
  animation: ani1 2s infinite
  
.block2
  left: 300px
  animation: ani2 2s infinite
  animation-delay: 1s
  
.block3
  left: 450px
  animation: ani3 5s infinite
  
.block4
  left: 600px
  animation: ani4 7s infinite
  
.block5
  left: 750px
  animation: ani5 2s infinite
  
@keyframes ani1
  0%
    bottom: 100px
  50%
    bottom: 0px
    background-color: red
  100%
    bottom: 100px
  
@keyframes ani2
  0%
    bottom: 100px
  30%
    background-color: white
    transform: rotate(0deg)
  50%
    bottom: 0px
    background-color: red
    transform: rotate(180deg)
  70%
    background-color: white
    transform: rotate(0deg)
  100%
    bottom: 100px
  
@keyframes ani3
  0%
    bottom: 100px
  30%
    transform: scale(1)
  50%
    bottom: 0px
    transform: scale(0.5)
  70%
    transform: scale(1)
  100%
    bottom: 100px
  
@keyframes ani4
  0%
    transform: translateX(0px) translateY(0px)
  20%
    transform: translateX(50px) translateY(0px)
  40%
    transform: translateX(50px) translateY(-50px)
  60%
    transform: translateX(0px) translateY(-50px)
  80%
    transform: translateX(0px) translateY(0px)
  
@keyframes ani5
  0%
    transform: skewX(20deg)
    transform-origin: 0% 100%
  50%
    transform: skewX(-20deg)
    transform-origin: 0% 100%
  100%
    transform: skewX(20deg)
    transform-origin: 0% 100%
  

**呈現**
{%youtube dhBMMX7yW-0 %}

## CSS動畫速度曲線
可查詢關鍵字「[W3schools animation timing](https://www.w3schools.com/cssref/css3_pr_animation-timing-function.php)」查看相關功能


利用animation-timing-function套用不同value已呈現不同速度變化

例：

可查詢「[easing函數速查表](http://xuanmo.me/hd.html)」了解其動畫速度曲線

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::