iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0

Animation keyframes

Animation keyframes

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

@keyframes animation-name{  /* 動畫名稱 */
  keyframes-selector{  /* 關鍵影格選擇器,0-100% or from-to */ 
     css-styles; /* CSS樣式 */ 
  }
}
名稱 說明
animation-name 自定義的動畫名稱
keyframes-selector 0-100%,可以在100%中任意下keyframe;from( =0%)to( =100%)

小提醒:除了設定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


上一篇
CSS動畫-Animation(三)(iteraction-count/direction/fill-mode/play-state)
下一篇
CSS動畫-Transition、Animation、Transform的分析比較
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言