好的，在上篇說明完動畫屬性後
要進到時間軸跟關鍵影格的部分了

關鍵影格的定義用 @keyframes
時間軸有兩種寫法，基本上 from 等同於 0% ， to 等同於 100%。(但整個時間軸的長度)
1.from、n%、to
2.0%、n%、100%

使用第一天的 css 來做說明
我的元件寬度為 20px，當游標滑入時動畫開始
假設說我初始寬度是 50px ，在過程一半的時候寬度增加到 100px ，最後結束時寬度是 150px 。
就會如下方表示：

/*這是元素樣式 這裡可以自行設定各種想要的值*/
.lazydog{
  background-color:#ff4141;
  color:#fff;
  padding:20px;
  margin:auto;
  width:50px;
  text-align:center;
}

/*滑入時動畫開始*/
.lazydog:hover{
  animation: my-animate 2s infinite;
  
}

/*設定動畫內的時間軸囉 記得keyframes這邊要打s*/
@keyframes my-animate{
    from{
      width:50px;
    }
    50%{
      width:100px;
    }
  
    to{
      width:150px;
    }
}

/*另一種寫法會長這樣 但基本上效果是一樣的*/
@keyframes my-animate{
    0%{
      width:50px;
    }
    50%{
      width:100px;
    }
  
    100%{
      width:150px;
    }
}

如果混用 0% 、 50% 、 to 或 from 、 50% 、100% ，其實也是有效果的，只是個人不建議這樣寫。
看起來比較亂除非是故意想要挖坑給別人XD

今天這篇的codepen的網址如下，有興趣的人可以試試效果
https://codepen.io/UHU/pen/mzRLPN

下篇來談談
@keyframes 除了這篇出現的 width ，還可以寫什麼在裡面咧
進擊的 @keyframes 襲來