CSS @keyframes

admin發表於2020-02-19
CSS

當前CSS主要通過如下兩種屬性實現動畫效果：

（1）.transition屬性。

（2）.animation屬性。

transition翻譯成漢語是"過渡"的意思，它能夠設定元素指定屬性從一個屬性值過渡到另一個屬性值。

由此在視覺上產生動畫效果，下面看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
  transition:width 4s;
}
#ant:hover{
  width:500px;
  height:100px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

上面程式碼中，當滑鼠懸浮於div之上，div寬度會以動畫效果改變。

此時可能會有朋友提出類似問題，既然transition屬性可以實現動畫效果，為什麼還需要animation。

因為transition是一個不懂得浪漫的屬性，動畫效果比較單調直白，無法更加精細的控制中間過程，而animation利用@keyframes屬性可以更加精準的控制中間過程，讓動畫過程更加豐富多樣。

一.@keyframes屬性：

keyframes是key與frame的合成詞，是關鍵幀的意思。

由此可以猜想到，animation動畫過程是以"關鍵幀"進行控制的。

語法結構：

[CSS] 純文字檢視 複製程式碼
@keyframes animationname {keyframes-selector {css-styles;}}

引數解析：

（1）.animationname：用來規定animation動畫的名稱。

（2）.keyframes-selector：用來對動畫時長進行分段，有兩種方式：         

         百分比方式，百分之百表示整個動畫過程時長，那麼百分之10%就是總時長的十分之一，以此類推。

         "from" 和 "to"方式，等價於 0% 和 100%

         特別說明：推薦使用百分比方式。

二.程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>  
<style>
div{
  width: 100px;
  height: 100px;
  background-color: red;
  position:relative; 
  animation:animaition-ant 5s infinite alternate;
} 
@keyframes animaition-ant{ 
  from {left:0px} 
  to {left:400px;} 
}  
</style>  
</head> 
<body> 
<div></div> 
</body> 
</html>

上面程式碼實現以動畫效果設定div元素的left屬性值。

程式碼分析如下：

（1）.animation屬性規定了動畫的一些列特性，這裡要特別注意的是動畫名稱"animaition-ant"。

（2）.@keyframes屬性規定了動畫具體過程，它後面緊跟的就是animation屬性規定的動畫名稱。

（3）.採用from to方式規定動畫過程，也就是在5秒時間將left屬性值從0px設定為400px。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<style>
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative;
  animation:animaition-ant 4s infinite alternate;
}
@keyframes animaition-ant{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
}   
</style>  
</head>
<body>
<div></div>
</body>
</html>

上一個程式碼對於@keyframes屬性的演示過於簡單，讓人感覺和transition屬性沒有多大區別。

其實利用關鍵幀@keyframes屬性可以實現對動畫過程更為精細複雜的控制，上面的程式碼僅是一個演示。程式碼規定動畫的總時長為4s，那麼0%-25%這段時間就是1秒，在這一秒內實現了left從0到100px的過渡，背景顏色也由紅色動畫方式變為藍色，其他過渡細節也是同樣的道理，不再多介紹。

相關文章