這篇文章主要介紹“CSS3中如何將@keyframes綁定到選擇器中”，在日常操作中，相信很多人在CSS3中如何將@keyframes綁定到選擇器中問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3中如何將@keyframes綁定到選擇器中”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)公司，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站開發(fā)、展示型成都網(wǎng)站建設(shè)、成都做網(wǎng)站等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。
在css3中，我們可以通過@keyframes創(chuàng)建關(guān)鍵幀動畫效果。我們需要將@keyframes綁定到選擇器中，否則不會有效果出現(xiàn)。同時，我們還需定義動畫時長和動畫名稱
語法
CSS Code復(fù)制內(nèi)容到剪貼板
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定義動畫的名稱。 |
| keyframes-selector | 必需。動畫時長的百分比。 |
在css3中，我們以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。其中，0% 是動畫的開始時間，100% 動畫的結(jié)束時間。
Keyframe選擇器
讓我們在@keyframes中添加一些動畫規(guī)則：
CSS Code復(fù)制內(nèi)容到剪貼板
@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;
}
}
通過添加這些新的動畫規(guī)則，我們引入了keyframe選擇器。在上述示例代碼中，0%, 33%, 66%, 以及100%即為keyframe選擇器。其中，0%和100%可以使用”from”和”to”來代替。
示例中的四套動畫規(guī)則表達(dá)的是這個動畫元素的四種狀態(tài)(四個關(guān)鍵幀)，以及處于這四種狀態(tài)中時的樣式。那些沒有定義的狀態(tài)(比如，從34%到65%)則組成了這些已定義的狀態(tài)間的過渡狀態(tài)。
盡管規(guī)范還在修改中，有一些規(guī)則用戶還是應(yīng)該遵守。例如，keyframes的書寫順序并不重要，它們會按百分?jǐn)?shù)的升序播放。因此，如果你把”to”關(guān)鍵幀放在”from”關(guān)鍵幀之前，動畫的播放并不會有改變。除此以外，如果你沒有指定to或者from或者對應(yīng)的百分?jǐn)?shù)，瀏覽器會自動加上。所以，@keyframes的語法并不符合一般CSS語法的層疊覆蓋規(guī)則。
到此，關(guān)于“CSS3中如何將@keyframes綁定到選擇器中”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享標(biāo)題：CSS3中如何將@keyframes綁定到選擇器中
本文來源：http://weahome.cn/article/jcssss.html
重慶分公司
重慶分公司
