通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
请把鼠标移到下面的绿色方块上：
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
实现以上绿色方块过渡效果步骤：
html代码中只定义了一个div，这里不给出代码
css代码：当鼠标置于元素上时开始展现动画效果，鼠标移除恢复原样
div{ ???width: 100px; ???height:100px; ???background: #24ff39; ???transition-duration:2s,2s ;//设置动画效果的执行时间，第一个参数是width变化的时间，第二个参数是height变化的时间}div:hover{ ???width: 200px; ???height: 200px; ???background: #ff1323; ???transform: rotate(360deg);}实现效果如下：
css3动画：过渡
原文地址：https://www.cnblogs.com/lyd447113735/p/8414553.html