詳解CSS3中的@keyframes關鍵影格動畫的選擇器綁定-css教學-PHP中文網

詳解CSS3中的@keyframes關鍵影格動畫的選擇器綁定

高洛峰

發布： 2017-03-09 10:10:24

原創

2866 人瀏覽過

在css3中，我們可以透過@keyframes創建關鍵影格動畫效果。我們需要將@keyframes綁定到選擇器中，否則不會有效果出現。同時，我們也需定義動畫時長和動畫名稱

語法

@keyframes animationname {keyframes-selector {css-styles;}}

登入後複製



值	描述

#animationname

##必要。定義動畫的名稱。

keyframes-selector

#必備。動畫時長的百分比。

在css3中，我們以百分比來規定改變發生的時間，或透過關鍵字"from" 和"to"，等價於0% 和100%。其中，0% 是動畫的開始時間，100% 動畫的結束時間。

######Keyframe選擇器######讓我們在@keyframes中加入一些動畫規則：######

@keyframes sunrise {   
   0% {   
      bottombottom: 0;   
      left: 340px;   
      background: #f00;   
   }   
  
   33% {   
      bottombottom: 340px;   
      left: 340px;   
      background: #ffd630;   
   }   
  
   66% {   
      bottombottom: 340px;   
      left: 40px;   
      background: #ffd630;   
   }   
  
   100% {   
      bottombottom: 0;   
      left: 40px;   
      background: #f00;   
   }   
}

登入後複製

#########透過新增這些新的動畫規則，我們引入了keyframe選擇器。在上述範例程式碼中，0%, 33%, 66%, 以及100%即為keyframe選擇器。其中，0%和100%可以使用”from”和”to”來代替。 ###範例中的四套動畫規則表達的是這個動畫元素的四種狀態(四個關鍵影格)，以及處於這四種狀態中時的樣式。那些沒有定義的狀態(例如，從34%到65%)則組成了這些已定義的狀態間的過渡狀態。 ###儘管規範還在修改中，有些規則使用者還是應該遵守。例如，keyframes的書寫順序並不重要，它們會以百分數的升序播放。因此，如果你把”to”關鍵影格放在”from”關鍵影格之前，動畫的播放並不會有改變。除此之外，如果你沒有指定to或from或對應的百分數，瀏覽器會自動加上。所以，@keyframes的語法並不符合一般CSS語法的層疊覆蓋規則。 ######

以上是詳解CSS3中的@keyframes關鍵影格動畫的選擇器綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！