CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。
语法：
transition 属性主要包含四个属性值：
transition-property -- 规定应用过渡的 CSS 属性的名称；
transition-duration -- 定义过渡效果花费的时间，默认是 0；
transition-timing-function -- 规定过渡效果的时间曲线。默认是 "ease"；
transition-delay -- 规定过渡效果何时开始，默认是 0。
transition -- 简写属性，用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡多项改变</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s ease, height 2s ease, -webkit-transform 2s ease;
transition: width 2s ease-in-out, height 2s ease-in-out, transform 2s ease-in-out;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>
时间： 2024-09-29 10:29:48