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

CSS動畫

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

動畫瀏覽器支持

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

什麼是CSS動畫？

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

@keyframes規則

在@keyframes規則中指定CSS樣式時，動畫將在特定時間逐漸從當前樣式更改爲新樣式。要使動畫生效，必須將動畫綁定到元素。以下示例將“example”動畫綁定到<div>元素。動畫將持續4秒，並且會逐漸將<div>元素的背景顏色從“紅色”更改爲“×××”：

/* 動畫代碼 */
@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％完成時，以下示例將更改<div>元素的背景顏色：

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％時再次更改背景顏色和<div>元素的位置，並在動畫完成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函數中定義自己的值
以下示例顯示了可以使用的一些不同速度曲線：

#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>元素在動畫結束時保留最後一個關鍵幀的樣式值：

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

以下示例允許<div>元素獲取動畫開始前（動畫延遲期間）第一個關鍵幀設置的樣式值：

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

以下示例允許<div>元素在動畫開始之前獲取由第一個關鍵幀設置的樣式值，並在動畫結束時保留最後一個關鍵幀的樣式值：

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;
}

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	指定動畫的速度曲線

自己是一個6年的前端工程師,希望本文對你有幫助！

這裏推薦一下我的前端學習交流扣qun：731771211 ，裏面都是學習前端的，如果你想製作酷炫的網頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術

點擊：加入