transition是CSS3中用来设置场景过渡的效果的，完整的语法是：
transition: [property] [duration] [timing-function] [delay];
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始
如果我们设置：transition: 2s;表示它的过渡场景执行时长为2秒。一般要配合hover之类的伪类来操作。比如下面的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transition动画</title>
</head>
<body>
<style type="text/css" media="screen" id="test">
.d1{ width: 200px; height:10px; background-color: #ccc; border-radius: 5px; overflow: hidden;}
.d2{ width: 10px; height: 10px; background-color: #f80; transition: 3s;}
.d2:hover{ width: 200px; }
</style>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>
鼠标移动到d2上时，d2会在3秒内宽度变成200px。当鼠标移走，它又会花3s将宽度重置为10px。
关于CSS使用transition属性来做动画，本文就介绍这么多，希望对您有所帮助。