transition
-
需要一個事件來觸發，比如hover，所以沒法在網頁加載時自動觸發。
-
是一次性的，不能重複發生，除非一再觸發。
-
只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style>
#transition{
width:100px;
height:100px;
background:blue;
cursor: pointer;
transition:width 2s;
}
#transition:hover{
width:500px;
}
</style>
</head>
<body>
<div id="transition"></div>
</body>
</html>
通過transition屬性監聽div元素width屬性的變化，動畫在兩秒內完成。當鼠標懸浮於div之上的時候，設置width的寬度500px，寬度的變化此時被transition監聽到。於是開始動畫效果，寬度會進行平滑的過渡。
animation
animation可以通過keyframes顯式控制當前幀的屬性值，而transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言animation的功能更加靈活。
<!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:move 4s infinite alternate;
}
@keyframes move{
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>
一次完整的動畫時長是4秒。通過@keyframes屬性將動畫整個時長分爲4份，在各自的時間段對動畫進行控制。也就是說animation動畫可以具有多個狀態，但是transtion動畫只有兩個狀態，起始狀態與結束狀態。
transition和animation的區別
- 動畫狀態的區別
animation動畫可以通過@keyframes屬性對動畫進行更爲精細的控制，設置多個狀態。但是transition屬性則只有兩個狀態，起始狀態與結束狀態。 - 觸發條件不同
transitiontransition需要觸發一個事件才能改變屬性，而animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果。