1.transition 动画过程改变某个css属性的效果 （比如宽高 颜色）
语法
transition: all 所有元素 + 执行时间 （如2S ） + 速度效果 +过渡效果开始时间
none 不执行transition动画效果
transition: transition-property transition-duration transition-timing-function transition-delay
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
实例 这里transition 做出的动画效果是基于某个元素的css属性 ，同时响应做出效果 要有事件发生 如hover 。下例中改变的是宽度 那hover就要把宽度改变 。
transition主要做的是 声明css的属性 后面跟着动画时间
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
#a1{
transition:width 2s;
-webkit-transiton:width 2s;
width: 100px;
height: 100px;
background: #ccc;
}
#a1:hover{
width: 300px;
}
</style>
<div id="a1">transiton改变宽度</div>
</body>
</html>
原文：http://www.cnblogs.com/xxx91hx/p/4775137.html