[CSS] 的關鍵影格創造動畫

@keyframes:宣告動畫效果

@-webkit-keyframes fadeOut{  /* fadeOut是自訂的動畫名稱 */
  from{  /* from代表0%,動畫的開始狀態 */
    opacity: 1;
  }
  to{  /* to代表100%,動畫的結束狀態 */
    opacity: 0;
  }
}

animation-name、animation-duration、animation-timing-function、animation-delay

.showcase li:first-child{
  z-index:3;
  position: relative;
  -webkit-animation-name: fadeOut;  /* fadeOut為@keyframes所建立的動畫名稱 */
  -webkit-animation-duration: 5s;  /* 動畫執行期間 */
  -webkit-animation-timing-function: ease-in-out;  /* 動畫調速 */
  -webkit-animation-delay: 5s;  /* 延遲時間 */
}

 

animation-iteration-count:播放次數

.showcase li:first-child{
  -webkit-animation-iteration-count: infinite;  /*無限次數播放,也可指定特定次數*/
}

 

animation-direction

當動畫循環回開始處時,影像會突然跳至不透明狀態,這樣的視覺效果相當突兀。而使用animation-direction(動畫方向)屬性,便能在一段動畫到達結尾時將之倒轉播放。

.showcase li:first-child{
  -webkit-animation-direction: alternate;  /* alternate代表交替 */
}
  • normal(正常,為初始值):動畫每次都依規定順向播放。
  • reverse(反轉):動畫每次都依原設定的反轉方向播放。
  • alternate(交替):動畫循環至奇數次時以順向播放,循環至偶數次時則會倒過來播放。
  • alternate-reverse(交替反轉):動畫循環至奇數次時以反轉播放,循環至偶數次時則順向播放。

reverse和alternate-reverse關鍵字目前只獲得了IE10+、Firefox 16+和Chrome 19+等瀏覽器支援。

注意:當某段動畫被反轉,其調速方式也會反轉。因此反轉播放時,原本採取ease-in調速的動畫效果就會變成ease-out。

 

animation-fill-mode

此屬性定義的是在動畫執行以外時間所應套用的值。

.showcase li:first-child{
  -webkit-animation-fill-mode: forwards;  /* 當一段動畫結束時,仍應繼續沿用套用於該動畫元素上的最後樣式。反之為backwards */
}

 

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of