css3的@keyframes怎么用

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

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

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

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

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

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

　　/*定義動畫*/

　　@keyframes動畫名稱{

　　/*樣式規則*/

　　}

　　/*將它應用于元素*/

　　.element{

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

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

　　animation:動畫名稱1s...

　　}

　　在@keyframes規則的大括號里有什么？

　　在大括號中，我們需要定義關鍵幀或航點，這些關鍵幀或航點指定在動畫期間的特定點處正在動畫化的屬性的值。這允許我們控制動畫序列中的中間步驟。例如，一個簡單動畫的@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;

　　}

關于“css3的@keyframes怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。