iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

30天讓設計師搞定CSS/SVG動畫系列 第 5

CSS動畫-Animation(三)(iteraction-count/direction/fill-mode/play-state)

  • 分享至 

  • xImage
  •  

Animation(iteraction-count/direction/fill-mode/play-state)

今天要來介紹animation剩下的屬性:

  • animation-iteration-count:動畫播放次數
  • animation-direction:動畫播放方向
  • animation-fill-mode:動畫播放前後狀態
  • animation-play-state:動畫播放或暫停

animation-iteration-count 動畫播放次數

屬性值介紹

名稱 說明
number 播放的次數,預設值為1
infinite 動畫連續播放不停止

animation-direction 動畫播放方向

屬性值介紹

名稱 說明
normal 預設值,正常播放,順向,從0%→100%
reverse 反向播放,逆向,從100%→0%
alternate 正逆向輪流播放,奇數次為0%→100%,偶數次為100%→0%,若動畫播放次數只有一次就只會正常播放。
alternate-reverse alternate 的相反,奇數次為100%→0%,偶數次為0%→100%,若動畫播放次數只有一次就只會反向播放。

如下圖,為alternate的示範,第一次是從50px放大到100px,第二次是從100px縮小到50px,再加上infinite無限播放,就形成一直放大縮小的情形

.ball{
  background-color:black;
  color:white;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  animation:change 3s alternate infinite;
}
@keyframes change{
  from{
    width:50px;
    height:50px;
  }
  to{
    width:100px;
    height:100px;
  }
}

animation-fill-mode 動畫播放前後模式

屬性值介紹

名稱 說明
none 預設值,播放結束後,返回最初狀態
forwards 播放結束後,保持在最後影格狀態
backwards 播放結束後,保持在第一個影格狀態
both alternate 的相反,奇數次為 100% 到 0%,偶數次為 0% 到 100%,若動畫播放次數只有一次就只會反向播放。

animation-play-state 動畫播放或暫停

屬性值介紹

名稱 說明
running 預設值,播放
paused 停止

呼~到今天為止animation的屬性算是介紹完了,如果沒看過前面的文章,給個懶人包

  1. CSS動畫-Animation(ㄧ)概述
  2. CSS動畫-Animation(二)(name/duration/delay/timing-function)

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

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


上一篇
CSS動畫-Animation(二)(name/duration/delay/timing-function)
下一篇
CSS動畫-Animation(四)(keyframes)
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
K.
iT邦新手 5 級 ‧ 2018-11-01 12:18:01

超棒,非常用心的整理!
/images/emoticon/emoticon07.gif

/images/emoticon/emoticon41.gif

我要留言

立即登入留言