欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中的@keyframes關(guān)鍵幀動(dòng)畫(huà)的選擇器綁定

segmentfault   發(fā)布時(shí)間：2016-06-13 11:12:49   作者： trigkit4   我要評(píng)論
@keyframes可以幫助我們進(jìn)行類似Flash中的關(guān)鍵幀動(dòng)畫(huà)制作,這里我們來(lái)簡(jiǎn)單討論一下CSS3中的@keyframes關(guān)鍵幀動(dòng)畫(huà)的選擇器綁定,需要的朋友可以參考下

在css3中，我們可以通過(guò)@keyframes創(chuàng)建關(guān)鍵幀動(dòng)畫(huà)效果。我們需要將@keyframes綁定到選擇器中，否則不會(huì)有效果出現(xiàn)。同時(shí)，我們還需定義動(dòng)畫(huà)時(shí)長(zhǎng)和動(dòng)畫(huà)名稱

語(yǔ)法

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes animationname {keyframes-selector {css-styles;}}  

值 描述
animationname 必需。定義動(dòng)畫(huà)的名稱。
keyframes-selector 必需。動(dòng)畫(huà)時(shí)長(zhǎng)的百分比。

在css3中，我們以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。其中，0% 是動(dòng)畫(huà)的開(kāi)始時(shí)間，100% 動(dòng)畫(huà)的結(jié)束時(shí)間。

Keyframe選擇器
讓我們?cè)贎keyframes中添加一些動(dòng)畫(huà)規(guī)則：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes sunrise {   
  2.    0% {   
  3.       bottombottom: 0;   
  4.       left: 340px;   
  5.       background: #f00;   
  6.    }   
  7.   
  8.    33% {   
  9.       bottombottom: 340px;   
  10.       left: 340px;   
  11.       background: #ffd630;   
  12.    }   
  13.   
  14.    66% {   
  15.       bottombottom: 340px;   
  16.       left: 40px;   
  17.       background: #ffd630;   
  18.    }   
  19.   
  20.    100% {   
  21.       bottombottom: 0;   
  22.       left: 40px;   
  23.       background: #f00;   
  24.    }   
  25. }  

通過(guò)添加這些新的動(dòng)畫(huà)規(guī)則，我們引入了keyframe選擇器。在上述示例代碼中，0%, 33%, 66%, 以及100%即為keyframe選擇器。其中，0%和100%可以使用”from”和”to”來(lái)代替。
示例中的四套動(dòng)畫(huà)規(guī)則表達(dá)的是這個(gè)動(dòng)畫(huà)元素的四種狀態(tài)(四個(gè)關(guān)鍵幀)，以及處于這四種狀態(tài)中時(shí)的樣式。那些沒(méi)有定義的狀態(tài)(比如，從34%到65%)則組成了這些已定義的狀態(tài)間的過(guò)渡狀態(tài)。
盡管規(guī)范還在修改中，有一些規(guī)則用戶還是應(yīng)該遵守。例如，keyframes的書(shū)寫(xiě)順序并不重要，它們會(huì)按百分?jǐn)?shù)的升序播放。因此，如果你把”to”關(guān)鍵幀放在”from”關(guān)鍵幀之前，動(dòng)畫(huà)的播放并不會(huì)有改變。除此以外，如果你沒(méi)有指定to或者from或者對(duì)應(yīng)的百分?jǐn)?shù)，瀏覽器會(huì)自動(dòng)加上。所以，@keyframes的語(yǔ)法并不符合一般CSS語(yǔ)法的層疊覆蓋規(guī)則。

相關(guān)文章

最新評(píng)論