Animation keyframes

Animation keyframes

有了animation屬性就會設定一個keyframe，來控制是哪些CSS屬性做變化以及做多少變化

@keyframes animation-name{  /* 動畫名稱 */
  keyframes-selector{  /* 關鍵影格選擇器，0-100% or from-to */ 
     css-styles; /* CSS樣式 */ 
  }
}

小提醒：除了設定from-to，keyframes如果是設定數值，必須加％單位，不能單純數字

範例

• from-to

.ball{
  position:absolute;
  left:0;
  width:100px;
  height:100px;
  border-radius:50%;
  background-color:gray;
  animation:move 2s infinite;
}
@keyframes move{
  from{
    left:0;
  }
  to{
    left:500px;
  }
} 

• 百分比寫法

.ball{
  position:absolute;
  left:0;
  width:100px;
  height:100px;
  border-radius:50%;
  background-color:black;
  animation:move 2s infinite;
}
@keyframes move{
  0%{
    left:0;
  }
  50%{
    left:200px;
  }
  100%{
    left:500px;
  }
} 

～不專業學習筆記，如有疑問或是錯誤，歡迎不吝指教～

參考來源
[1]https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
[2]https://www.oxxostudio.tw/articles/201803/css-animation.html