需要一个事件来触发，比如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可以通过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动画只有两个状态，起始状态与结束状态。
