animation與transition 區別

admin發表於2019-02-04

標題中的兩個屬性都可以實現動畫效果，某些場景下兩者表現幾乎一樣。

可以肯定的一點是，兩個屬性肯定各有特點，下面將詳細分析一下兩者的主要不同點。

關於兩個屬性的具體用法可以參閱如下兩篇文章：

（1）.animation屬性參閱CSS3 animation 動畫一章節。

（2）.transition屬性參閱CSS3 transition 過渡一章節。

我們知道屬性的命名與其功能密切相關，先從兩者的名稱入手。

（1）.animation：具有"動畫"和"動畫片"的意思，名副其實此屬性的確可以定義動畫效果。

（2）.transition：具有"過渡"的意思，規定屬性從一個值過渡的另一個值，雖然也具有動畫效果，但是和真正的動畫效果效果比太遜色了，因為它只有初始和結束兩個狀態，所以"過渡"是對其更為恰當的描述。

一.動畫狀態的區別：

animation動畫可以通過@keyframes屬性對動畫進行更為精細的控制，設定多個狀態。

但是transition屬性則只有兩個狀態，起始狀態與結束狀態。

程式碼例項如下：

[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;
  top:100px;
  animation:theanimation 4s infinite alternate;
}
@keyframes theanimation{
  0%{left:0px;background:red;}
  25%{left:30px;background:blue;}
  50%{left:60px;background:yellow;}
  75%{left:120px;background:green;}
  100%{left:240px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

程式碼分析如下：

（1）.一次完整的動畫時長是4秒。

（2）.通過@keyframes屬性將動畫整個時長分為4份，在各自的時間段對動畫進行控制。

（3）.也就是說animation動畫可以具有多個狀態，但是transtion動畫只有兩個狀態，起始狀態與結束狀態。

二.子屬性的數量不同：

兩個屬性都是複合屬性，包含有若干個子屬性，但是數目不相同。

當然子屬性數量不同會對效果有影響，很容易區分，本文不做更多介紹。

三.觸發時機不同：

兩個屬性的觸發時機有很大的不同，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;
  cursor: pointer;
  transition:width 2s;
}
#ant:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

程式碼分析如下：

（1）.通過transition屬性監聽div元素width屬性的變化，動畫在兩秒內完成。

（2）.當滑鼠懸浮於div之上的時候，設定width的寬度為500px，寬度的變化此時被transition堅挺到。

（3）.於是開始動畫效果，寬度會進行平滑的過渡。

但是animation屬性並不具有上述監聽效果，一旦定義，動畫效果立馬生效，與width或者height等屬性一個道理。

可能有朋友對上述結論有所懷疑，認為下面這種效果也是監聽行為，其實只是一種錯覺而已，程式碼例項如下：

[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:blue;
  cursor: pointer;
}
@keyframes theanimation{
  from {width: 100px;}
  to {width: 500px;}
}
div:hover{  
  animation:theanimation 2s forwards;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

上述程式碼中，當滑鼠懸浮的時候，能夠以動畫方式設定div的寬度。

貌似與前面的程式碼功能是一樣的，也監聽了"某些東西"一樣，然而事實並非如此。

首先，它並沒有監聽屬性的變化，第二個滑鼠懸浮div的時候，是為div元素定義animation動畫。

本文對兩個屬性的主要區別進行了大致的介紹，如果朋友感覺需要有補充的地方，可以在文章底部留言。

相關文章