這篇文章主要介紹“css3的@keyframes怎么用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css3的@keyframes怎么用”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)是專業(yè)的滄州網(wǎng)站建設(shè)公司，滄州接單;提供網(wǎng)站設(shè)計、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行滄州網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

CSS3@keyframes是什么？有什么用？

@keyframes是CSS3的一種規(guī)則，可以用來定義CSS動畫的一個周期的行為，可以創(chuàng)建簡單的動畫。

動畫與轉(zhuǎn)換類似，因為它們都是隨時間改變CSS屬性的表示值。主要區(qū)別在于，當(dāng)屬性值更改時（例如，當(dāng)懸停時屬性值發(fā)生改變時），轉(zhuǎn)換會隱式的觸發(fā)，但在應(yīng)用動畫屬性時會顯式執(zhí)行動畫。因此，動畫需要顯示動畫屬性的顯式值。這些值是在@keyframes規(guī)則中指定的動畫關(guān)鍵幀定義的。因此，@keyframes規(guī)則里是由一組封裝的CSS樣式規(guī)則組成的，這些規(guī)則描述了屬性值如何隨時間變化。

然后，使用不同的CSSanimation（動畫）屬性，可以控制動畫的許多不同方面，包括動畫迭代的次數(shù)，是否在開始和結(jié)束值之間交替，以及動畫是否應(yīng)該運行或暫停。動畫也可以延遲其開始時間。

@keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，后面接著是給出動畫名稱的標(biāo)識符（將使用animation-name引用），隨后是通過一組樣式規(guī)則（用大括號分隔）。然后，通過使用標(biāo)識符作為animation-name屬性的值，將動畫應(yīng)用于元素。例如：

/*定義動畫*/

@keyframes動畫名稱{

/*樣式規(guī)則*/

}

/*將它應(yīng)用于元素*/

.element{

animation-name:動畫名稱（在@keyframes中已經(jīng)聲明好的）;

/*或使用動畫簡寫屬性*/

animation:動畫名稱1s...

}

在@keyframes規(guī)則的大括號里有什么？

在大括號中，我們需要定義關(guān)鍵幀或航點，這些關(guān)鍵幀或航點指定在動畫期間的特定點處正在動畫化的屬性的值。這允許我們控制動畫序列中的中間步驟。例如，一個簡單動畫的@keyframe可以是這樣：

@keyframeschange-bg-color{

0%{

background-color:red;

}

50%{

background-color:blue;

}

100%{

background-color:red;

}

}

.demo{

-webkit-animation:change-bg-color5sinfinite;

animation:change-bg-color5sinfinite;

}

關(guān)于“css3的@keyframes怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。