CSS animation

• 指定keyframes，定義動畫動作
• 設定animation，定義動畫秒速、次數

.outer
 .block 上下移動

.outer
 width: 300px
 height: 200px
 border: 1px solid #000
 text-align: center
 position: relative
 display: flex
 justify-content: center
 
.block
 width: 50px
 height: 50px
 border: 1px solid #000
 position: absolute
 bottom: 0
 animation: UpAndDown 2s infinite
 
@keyframes UpAndDown
 0%
  bottom: 0
 50%
  bottom: 100px
 100%
  bottom: 0

動畫速度曲線

animation-timing-function: linear