學習重點
理解CSS3 Animation中的steps()

steps() 為animation-timing-functio屬性
此屬性大多都是使用ease linear 或cubic-bezier()流暢性的動感
而steps()有逐格動畫的效果，像是過往製作gifs做很多的影格去完成

原始參考圖是這樣的 高度768px 做成11格補間動畫的圖

HTML

<ul>
  <li>
    <a href="#">
      <div id="roll_box" class="roll_box"></div>
    </a>
  </li>
</ul>

SCSS

* { 
  box-sizing: border-box; }

ul{
  li{
    width: 80px;
    height: 80px;
    display:table-cell;
    vertical-align:middle;
    border:1px solid #ddd;
    &:hover .roll_up{
      //執行rollup 1秒跑11個影格 forwards動畫結束在最後影格
      animation: rollup 1s steps(11) forwards;
    }
    a{
      width:64px;
      height:64px;   
      display:block;
      margin:0 auto;
      position: relative;
      //超出64px就藏起來摟～
      overflow:hidden;
      .roll_up{
        //需要跟@keyframes rollup 0% 位置一樣
        top:0;
        position: absolute;
        width:64px;
        height:768px;  
        background: url(https://t.kfs.io/assets/category-cupid-6711e9e6dab394b7fbc82867f447087c.svg) 0 0 no-repeat; 
      }
    }
  }
}

//keyframes rollup，定義了一段從0~-706px的位移，所以影格是往上滾的喔
@keyframes rollup {
  0% {
    top: 0px;
  }
  100% {
    top: -706px;
  }
}
}

當然CSS3 Animation還需加上瀏覽器相容性 這邊就不贅述了 可以看codepen有完整相容性的code

效果參考網址KKTIX
學習文章 理解CSS3 Animation中的steps()
Codepen DemoDay1. animate steps()