CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
过渡属性
下表列出了所有的过渡属性:
| 属性 | 属性值 | 描述 |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | |
| transition-property | none all property |
没有属性会获得过渡效果 所有属性都将获得过渡效果； 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
| transition-duration | time | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) |
动画从头到尾的速度是相同的 默认。动画加速，减速 动画以低速开始 动画以低速结束 动画以低速开始、结束 在 cubic-bezier 函数中自己的值 |
| transition-delay | time | 规定过渡效果何时开始。默认是 0。 |
实例：
<style>
div {
width: 100px;
height: 100px;
background: rgb(123, 241, 12);
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>
<body>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
``
