你是否曾羡慕那些拥有流畅交互效果的网站？按钮 hover 时的渐变色彩、菜单展开时的优雅动画、图片放大时的平滑过渡...这一切的背后，都离不开CSS3的transition属性。今天，就让我们一起探索这个让网页"活"起来的秘密武器！
CSS过渡
CSS过渡（transition）是一种让CSS属性值在一定时间内平滑地从一个状态变化到另一个状态的机制。
transition属性语法
transition属性是包含四个子属性：
.element {
transition: property duration timing-function delay;
}
1. transition-property - 指定要过渡的CSS属性
transition-property: all; /* 所有属性都应用过渡 */
transition-property: opacity; /* 仅透明度 */
transition-property: transform, opacity; /* 多个属性 */
2. transition-duration - 指定过渡持续时间
transition-duration: 0.3s; /* 0.3秒 */
transition-duration: 500ms; /* 500毫秒 */
transition-duration: 1s, 0.5s; /* 多个属性不同时长 */
3. transition-timing-function - 指定过渡的速度曲线
transition-timing-function: ease; /* 默认，慢-快-慢 */
transition-timing-function: linear; /* 匀速 */
transition-timing-function: ease-in; /* 慢开始 */
transition-timing-function: ease-out; /* 慢结束 */
transition-timing-function: ease-in-out; /* 慢开始和结束 */
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* 贝塞尔曲线 */
4. transition-delay - 指定过渡开始前的延迟时间
transition-delay: 0s; /* 无延迟 */
transition-delay: 0.2s; /* 延迟0.2秒 */
transition-delay: 0.1s, 0.3s; /* 多个属性不同延迟 */
代码示例：悬停放大卡片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS过渡效果示例</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
margin: 0;
font-family: Arial, sans-serif;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.card:hover {
transform: scale(1.2);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="card">悬停查看过渡效果</div>
</body>
</html>
总结：
- 保持过渡时间在300-500ms之间，避免用户等待
- 使用合适的缓动函数让动画更自然
- 为多个属性设置不同的过渡时间和延迟，创造层次感
- 优先使用
transform和opacity以获得最佳性能
