CSS animation 動畫

admin發表於2019-12-11
CSS動畫

CSS3之前，製作動畫效果沒有太好的捷徑，基本要藉助JavaScript。

不但程式碼量較大，效能也不夠優良，CSS3的出現使得製作動畫效果更為簡單且效能更好。

當前，animation與transition屬性可以實現動畫效果，更為準確的說，transition屬性實現的是"過渡"。

兩個屬性的命名與其功能可以說恰如其分，關於兩者的區別可以參閱animation與transition 區別一章節。

下面將通過程式碼例項詳細介紹一下animation屬性的用法，本文包含如下幾方面內容：

（1）.animation基礎語法。

（2）.CSS動畫的實質。

（3）.animation與@keyframes動畫演示分析。

（4）.animation動畫的注意點。

一.animation基礎語法：

語法結構：

[CSS] 純文字檢視 複製程式碼
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

引數解析：

（1）.animation-name：規定動畫的名稱，利用它可以與@keyframes關聯起來。

（2）.animation-duration：規定動畫的時長，時間是秒，比如5s。

（3）.animation-timing-function：規定動畫的過渡型別，可以使用內建固定的關鍵字，也可以自定義資料。

（4）.animation-delay：規定動畫開始前的延遲時間。

（5）.animation-iteration-count：規定動畫的重複次數。

（6）.animation-direction：規定動畫迴圈中是否會反向運動。

（7）.animation-fill-mode：規定物件動畫時間之外的狀態。

（8）.animation-play-state：規定動畫是否正在執行或暫停。

有很多屬性值從字面上不容易理解，不用擔心，後面會有程式碼演示和對應屬性的相關文章。

如果animation提供了多組屬性值，那麼組與組之間使用逗號分隔。

animation與border等屬性一樣，都是複合屬性，可以使用複合寫法，也可以將屬性單獨列出。

二.CSS動畫的實質：

不要將動畫效果想象的太神奇，之所以能夠在視覺上呈現視覺效果，無非是元素屬性值的持續變化。

比如元素的width屬性，在10秒內，由10px持續變化到100px。

三.動畫演示：

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

程式碼分析如下：

（1）.theanimation是動畫名稱。

（2）.5s是完成一次動畫持續的時間。

（3）.infinite規定動畫可以無限次重複。

（4）.alternate規定動畫:正常方向與反方向交替運動。

（5）.@keyframes這是一個非常重要的屬性，它後面跟隨者與之關聯的動畫名稱，它可以對整個動畫過程的細節進行控制，比如一個時間段內設定背景顏色，另一個時間段設定元素尺寸等。

（6）.上述程式碼將元素的left屬性值在5秒內從0設定為200px，在視覺上產生動畫效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:theanimation 4s infinite alternate;
}
@keyframes theanimation{
  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屬性對動畫過程進行了更為精細的控制。

關於@keyframes屬性的更多內容參閱CSS3 @keyframes一章節。

前文已經提到，animation是一個複合屬性，包含眾多子屬性，考慮到文章的篇幅問題，本文不做過多介紹。

關於子屬性更多內容可以參閱如下幾篇相關文章：

（1）.animation-name參閱CSS3 animation-name一章節。

（2）.animation-duration參閱CSS3 animation-duration一章節。

（3）.animation-timing-function參閱CSS3 animation-timing-function一章節。

（4）.animation-delay參閱CSS3 animation-delay一章節。

（5）.animation-iteration-count參閱CSS3 animation-iteration-count一章節。

（6）.animation-direction參閱CSS3 animation-direction一章節。。

（7）.animation-play-state參閱CSS3 animation-play-state一章節。

（8）.animation-fill-mode參閱CSS3 animation-fill-mode一章節。

四.animation動畫的注意點：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width: 200px;
  height: 100px;
  background-color: blue;
  animation: theanimation 5s;
}
@keyframes theanimation{
  from {background-color: green;}
  to {background-color: blue;}
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

可以看到animation屬性設定後，不需要其他觸發條件，會自動生效。

有朋友可能會有這樣的疑問，div:hover {animation: theanimation 5s;}不就是設定觸發條件嗎，看起來好像是，但只是當滑鼠懸浮div的時候為div新增動animation動畫，這一點與transition動畫不同，兩者區別這裡不做介紹，可以參閱文章開頭推薦的文章。

相關文章