.background
  .box.bigZombie
    // 圖片高度 6000，16 幀
    img(src="https://i.imgur.com/uDVxJDL.png", alt="")
  .box.smallZombie
    // 圖片高度 4080，16 幀
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-1.png", alt="")
    
  

html,body 
  margin: 0
  height: 100%
  
.background
  position: relative
  height: 100%
  background-image: url(http://img1.dowebok.com/3397.png)
  background-size: cover
  background-position: 50% 50%
  
.box
  position: absolute
  bottom: 0
  overflow: hidden

.bigZombie
  width: 400px
  height: 375px
  animation: move_bigZombie 90s infinite
  img
    animation: walk_bigZombie 1s infinite steps(16)
  
.smallZombie
  width: 200px
  height: 255px
  animation: move_smallZombie 65s infinite
  img
    animation: walk_smallZombie 1.7s infinite steps(16)
  
@keyframes walk_bigZombie
  0%
    transform: translateY(0) 
  100%
    transform: translateY(-6000px)
  
@keyframes walk_smallZombie
  0%
    transform: translateY(0)
  100%
    transform: translateY(-4080px)
   
@keyframes move_bigZombie
  0%
    transform: translateX(1000px)
  100%
    transform: translateX(-500px)
  
@keyframes move_smallZombie
  0%
    transform: translateX(600px)
  100%
    transform: translateX(-500px)