天天看點
傳回

web前端入門到實戰：CSS動畫@keyframes的用法

CSS動畫

CSS動畫允許大多數HTML元素的動畫，而無需使用JavaScript或Flash！

動畫浏覽器支援

IE10+支援該屬性的。其他低浏覽器版本數字後跟-ms-， -webkit-，-moz-或-o-指定使用字首的第一個版本。

什麼是CSS動畫？

動畫允許元素從一種樣式逐漸變為另一種樣式。您可以根據需要多次更改所需的CSS屬性。要使用CSS動畫，必須首先為動畫指定一些關鍵幀。關鍵幀保持元素在特定時間具有的樣式。

@keyframes規則

在@keyframes規則中指定CSS樣式時，動畫将在特定時間逐漸從目前樣式更改為新樣式。要使動畫生效，必須将動畫綁定到元素。以下示例将“example”動畫綁定到

元素。動畫将持續4秒，并且會逐漸将 元素的背景顔色從“紅色”更改為“×××”：

web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視訊）

/* 動畫代碼 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 要将動畫應用到的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

注意：該animation-duration屬性定義動畫完成所需的時間。如果animation-duration未指定該屬性，則不會發生動畫，因為預設值為0（0秒）。 在上面的示例中，我們通過使用關鍵字“from”和“to”（表示0％（開始）和100％（完成））指定樣式何時更改。也可以使用百分比。通過使用百分比，您可以根據需要添加任意數量的樣式更改。當動畫完成25％，完成50％時，以及動畫100％完成時，以下示例将更改

元素的背景顔色：

web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視訊）
/* 動畫代碼 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 将動畫應用到元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

以下示例将在動畫完成25％，完成50％時再次更改背景顔色和

元素的位置，并在動畫完成100％時再次更改：

/* 動畫代碼 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* 将動畫應用到元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

##延遲動畫

animation-delay屬性指定動畫開始的延遲。以下示例在開始動畫之前有2秒的延遲：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

也允許負值。如果使用負值，動畫将像已經播放N秒一樣開始。在以下示例中，動畫将像已經播放2秒一樣開始：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

設定動畫應運作多少次

animation-iteration-count屬性指定動畫應運作的次數。以下示例将在停止之前運作動畫3次：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

以下示例使用值“infinite”使動畫永遠繼續：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

以反向或備用循環運作動畫

animation-direction屬性指定動畫是應該向前，向後還是以交替周期播放。 animation-direction屬性可以具有以下值：

normal - 動畫正常播放（前進）。這是預設的

reverse - 動畫以反向播放（向後）

alternate - 動畫首先向前播放，然後向後播放

alternate-reverse - 首先向後播放動畫，然後向前播放動畫

以下示例将以反向（向後）運作動畫：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

以下示例使用值“alternate”使動畫首先向前運作，然後向後運作：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

以下示例使用值“alternate-reverse”使動畫首先向後運作，然後向前運作：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

指定動畫的速度曲線

animation-timing-function屬性指定動畫的速度曲線。 animation-timing-function屬性可以具有以下值：

ease - 指定慢啟動的動畫，然後快速，然後緩慢結束（這是預設設定）

linear - 指定從開始到結束具有相同速度的動畫

ease-in - 指定啟動慢的動畫

ease-out - 指定慢速結束的動畫

ease-in-out - 指定開始和結束較慢的動畫

cubic-bezier(n,n,n,n) - 允許您在cubic-bezier函數中定義自己的值

以下示例顯示了可以使用的一些不同速度曲線：

web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視訊）

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

為動畫指定填充模式

CSS動畫在播放第一個關鍵幀之前或播放最後一個關鍵幀之後不會影響元素。animation-fill-mode屬性可以覆寫此行為 animation-fill-mode動畫未播放時（在開始之前，結束之後或兩者都有），該屬性指定目标元素的樣式。 animation-fill-mode屬性可以具有以下值：

none- 預設值。動畫在執行之前或之後不會對元素應用任何樣式

forwards - 元素将保留由最後一個關鍵幀設定的樣式值（取決于animation-direction和animation-iteration-count）

backwards - 元素将擷取由第一個關鍵幀設定的樣式值（取決于動畫方向），并在動畫延遲期間保留此值

both - 動畫将遵循向前和向後的規則，在兩個方向上擴充動畫屬性

以下示例允許

元素在動畫結束時保留最後一個關鍵幀的樣式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

以下示例允許

元素擷取動畫開始前（動畫延遲期間）第一個關鍵幀設定的樣式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

以下示例允許

元素在動畫開始之前擷取由第一個關鍵幀設定的樣式值，并在動畫結束時保留最後一個關鍵幀的樣式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

動畫簡寫屬性

下面的示例使用了六個動畫屬性：

div {
  animation: example 5s linear 2s infinite alternate;
}

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，工作第六個年頭了，與大家分享一些學習方法，實戰開發需要注意的細節。767-273-102 秋裙。從零基礎開始怎麼樣學好前端。都是一群有夢想的人，我們可能在不同的城市，但我們會一起結伴同行前端前端前端

CSS動畫屬性

下表列出了@keyframes規則和所有CSS動畫屬性：

屬性 描述
@keyframes 指定動畫代碼
animation 設定所有動畫屬性的簡寫屬性
animation-delay 指定動畫開始的延遲
animation-direction 指定動畫是向前播放、向後播放還是交替播放
animation-duration 指定動畫完成一個循環需要多長時間
animation-fill-mode 指定動畫不播放時元素的樣式(在動畫開始前、結束後或同時播放)
animation-iteration-count 指定動畫播放的次數
animation-name 指定@keyframes動畫的名稱
animation-play-state 指定動畫是運作還是暫停
animation-timing-function 指定動畫的速度曲線
css css動畫 web前端 前端 前端就業
上一篇: 一.稻*問答-登陸功能
下一篇: JavaScript封裝緩動動畫函數

繼續閱讀