CSS3的过度
CSS3过渡是一种用于在元素状态变化时平滑过渡的效果。通过CSS3过渡，你可以定义元素在状态改变时的动画效果，如颜色、大小、位置等的平滑过渡。
属性
- transition-property：
指定要过渡的CSS属性的名称，可以是单个属性或多个属性的列表。你可以同时过渡多个属性，如
transition-property: width, height, opacity;。
- transition-duration：
指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。你可以为不同的属性指定不同的过渡时间，如
transition-duration: 1s;。
- transition-timing-function：
定义过渡的时间函数，用于控制过渡的速度曲线，默认值为
ease。常见的时间函数还包括linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）等。
- transition-delay：
指定过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。你可以为不同的属性指定不同的延迟时间，如
transition-delay: 1s;。
- transition:
用于简写上述过渡属性的缩写形式，可以一次性指定过渡的多个属性值，如
transition: width 1s linear, height 0.5s ease-in;。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.panel {
width: 300px;
height: 300px;
background-color: blue;
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.panel:hover {
transform: scale(1.8);
}
</style>
</head>
<body>
<div class="panel"></div>
</body>
</html>
在上述示例中，我们创建了一个名为.panel的元素，给定了初始的宽度、高度和背景颜色。通过使用CSS3过渡属性为该元素创建了一个放大的过渡效果。通过transition-property属性，我们指定了要过渡的属性为transform，表示在变换发生时将进行过渡效果。在鼠标悬停时，我们使用:hover伪类选择器为元素添加了一个transform变换属性，并将元素的缩放比例通过scale函数设置为1.8，即放大到原来的1.8倍。由于我们在.panel的CSS规则中定义了过渡属性，因此缩放效果将以1秒的持续时间进行平滑的过渡，并采用了ease-in-out的时间函数，使得放大效果在过渡的开始和结束时都比较缓慢。当鼠标悬停在元素上时，你将看到元素平滑地放大到原来的1.8倍。