CSS 过渡（transition）：触发式动效，状态平滑切换
过渡的核心是 “状态变化的平滑过渡”，仅在元素的样式属性发生变化且被触发时（如 hover、focus、active 或 JS 修改类名）生效，无法实现自动播放。
过渡的四大核心属性（缺一不可，可简写）：
transition-property：需要过渡的样式属性（如 all 所有属性、width 宽度、background-color 背景色，默认 all）。
transition-duration：过渡持续时间（如 0.3s、500ms，默认 0s，无过渡效果）。
transition-timing-function：过渡速度曲线（如 ease 慢 – 快 – 慢（默认）、linear 匀速、ease-in 慢进、ease-out 慢出、cubic-bezier(n,n,n,n) 自定义贝塞尔曲线）。
transition-delay：过渡延迟时间（如 0.2s，默认 0s，立即执行）。
实用技巧：transition: all 0.3s ease; 是日常开发的万能简写，覆盖 90% 的触发式动效场景，简洁高效。
CSS 动画（animation）：自动 / 可控式动效，支持复杂关键帧
动画的核心是 “自定义关键帧（@keyframes）”，可定义元素在不同时间段的样式状态，支持自动播放、重复播放、暂停 / 继续等可控操作，功能比过渡更强大。
动画的核心组成：
关键帧（@keyframes 动画名）：定义动画的起始（from/0%）、中间（50% 等）、结束（to/100%）状态，至少包含起始和结束状态。
动画属性：animation-name（关键帧名称）、animation-duration（动画持续时间）、animation-timing-function（速度曲线）、animation-delay（延迟时间）、animation-iteration-count（重复次数，infinite 无限重复）、animation-direction（播放方向，normal 正向（默认）、reverse 反向、alternate 正反向交替）、animation-fill-mode（动画结束后状态，forwards 保持结束状态、backwards 回到起始状态（默认））、animation-play-state（播放状态，running 运行（默认）、paused 暂停）。
实用技巧：animation: 动画名 1s ease infinite forwards; 是常用简写，可快速实现自动重复且保持结束状态的动效。
过渡与动画的核心区别
触发方式：过渡需外部触发（如 hover），动画可自动播放（无需触发）。
复杂度：过渡仅支持 “起始 – 结束” 两个状态的平滑切换，动画支持多关键帧、复杂状态变化。
可控性：过渡触发后无法暂停 / 中断，动画可通过 animation-play-state 控制暂停 / 继续，灵活性更高
<!-- 对应CSS示例的HTML结构，可直接运行查看效果 -->
<div class="container">
<!-- 场景1：CSS 过渡 -->
<button class="btn">悬浮查看过渡效果</button>
<div class="card">悬浮查看卡片抬起效果</div>
<input type="text" class="input" placeholder="聚焦查看过渡效果">
<!-- 场景2：CSS 动画 -->
<div class="loading"></div>
<div class="fade-animation">自动淡入淡出动画</div>
<div class="control-animation">悬浮暂停动画，离开继续</div>
</div>/* 重置样式，消除默认边距和盒模型问题（基础铺垫，非核心） */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 公共样式：居中布局，方便查看动效 */
.container {
width: 1200px;
margin: 50px auto;
display: flex;
gap: 50px;
flex-wrap: wrap;
justify-content: center;
}
/************************** 场景1：CSS 过渡（触发式动效，覆盖高频场景） **************************/
/* 示例1：按钮悬浮过渡（背景色、阴影、缩放同步变化） */
.btn {
padding: 12px 30px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
/* 过渡简写：所有属性，0.3秒，慢-快-慢 */
transition: all 0.3s ease;
}
/* 悬浮触发过渡 */
.btn:hover {
background-color: #2980b9;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transform: scale(1.05); /* 轻微缩放，提升视觉层次感 */
}
/* 示例2：卡片悬浮过渡（位移、阴影变化，实现“抬起”效果） */
.card {
width: 280px;
height: 200px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
/* 过渡简写：所有属性，0.5秒，匀速 */
transition: all 0.5s linear;
}
/* 悬浮触发过渡 */
.card:hover {
transform: translateY(-10px); /* 向上位移10px */
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
/* 示例3：输入框聚焦过渡（边框、阴影变化，提升交互反馈） */
.input {
width: 300px;
height: 45px;
padding: 0 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
/* 仅针对边框和阴影过渡，提升性能 */
transition: border 0.3s ease, box-shadow 0.3s ease;
}
/* 聚焦触发过渡 */
.input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
/************************** 场景2：CSS 动画（自动/可控式动效，覆盖高频场景） **************************/
/* 示例1：自动播放的加载动画（无限旋转） */
.loading {
width: 40px;
height: 40px;
border: 4px solid #f5f5f5;
border-top: 4px solid #3498db;
border-radius: 50%;
/* 动画简写：动画名、1秒、匀速、无限重复 */
animation: rotate 1s linear infinite;
}
/* 定义旋转关键帧 */
@keyframes rotate {
from {
transform: rotate(0deg); /* 起始状态：0度旋转 */
}
to {
transform: rotate(360deg); /* 结束状态：360度旋转 */
}
}
/* 示例2：自动播放的淡入淡出动画（交替显示） */
.fade-animation {
width: 280px;
height: 200px;
background-color: #e74c3c;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
/* 动画简写：动画名、2秒、慢-快-慢、无限交替、保持结束状态 */
animation: fade 2s ease infinite alternate forwards;
}
/* 定义淡入淡出关键帧 */
@keyframes fade {
0% {
opacity: 0.5; /* 起始状态：半透明 */
transform: scale(0.9); /* 起始状态：轻微缩小 */
}
100% {
opacity: 1; /* 结束状态：完全不透明 */
transform: scale(1); /* 结束状态：正常尺寸 */
}
}
/* 示例3：可控的暂停/继续动画（鼠标悬浮暂停） */
.control-animation {
width: 280px;
height: 200px;
background-color: #f39c12;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
/* 动画简写：动画名、1.5秒、匀速、无限重复 */
animation: move 1.5s linear infinite;
}
/* 鼠标悬浮暂停动画 */
.control-animation:hover {
animation-play-state: paused;
}
/* 定义左右移动关键帧 */
@keyframes move {
0% {
transform: translateX(-50px); /* 起始状态：向左偏移50px */
}
50% {
transform: translateX(50px); /* 中间状态：向右偏移50px */
}
100% {
transform: translateX(-50px); /* 结束状态：回到向左偏移50px */
}
}