CSS3 Transition 是一种非常有用的动画效果，它可以让元素在一定的时间间隔内平滑地过渡到另一个状态，通过使用 CSS3 Transition，我们可以轻松地为网页元素添加动画效果，提高用户体验。
要使用 CSS3 Transition，我们需要指定两个关键的属性：`transition-property` 和 `transition-duration`，`transition-property` 属性指定要应用动画效果的 CSS 属性，而 `transition-duration` 属性则指定动画效果持续的时间。
下面是一个简单的例子，演示如何使用 CSS3 Transition 为一个元素添加动画效果：
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
div:hover {
width: 200px;
}
在上面的例子中，我们为一个 `div` 元素添加了一个动画效果，使其宽度在 2 秒钟内平滑过渡到 200px，当鼠标悬停在该元素上时，宽度会逐渐增加，而不是立即改变。
除了 `transition-property` 和 `transition-duration` 属性之外，CSS3 Transition 还支持其他一些属性，例如 `transition-timing-function`、`transition-delay` 和 `transition-timing-function`，这些属性可以进一步控制动画效果的行为和速度。
需要注意的是，CSS3 Transition 在一些较旧的浏览器中可能不受支持，在使用 CSS3 Transition 时，最好先检查浏览器兼容性，以确保动画效果在所有目标浏览器中都能正常工作。
