HTML过渡与动画是提升网页交互体验的核心技术，主要通过CSS实现动态效果。

过渡

CSS过渡（Transition）介绍

适用于元素属性变化时的平滑渐变效果，如悬停变色、尺寸调整。通过定义transition-property（过渡属性）、duration（持续时间）、timing-function（缓动函数）触发条件（如:hover）。仅需两段状态（开始/结束），适合简单交互。

---

 过渡属性

• transition-property：指定要过渡的CSS属性（如width、opacity等），默认all。

• transition-duration：过渡持续时间（如2s），必需属性。

• transition-timing-function：速度曲线（如ease、linear）。

• transition-delay：延迟开始时间（如0.5s）。

---

基本示例

悬停改变宽度:

.box {width: 100px;transition: width 2s ease-in-out;
}
.box:hover {width: 200px;
}

此代码的作用为：鼠标悬停时，元素宽度在2秒内以缓入缓出效果从100px过渡到200px。

---

多属性过渡

同时过渡背景色和字体大小：

.button {background: blue;font-size: 16px;transition: background 0.5s ease-out, font-size 0.3s linear;
}
.button:hover {background: red;font-size: 20px;
}

---

时间函数（Timing Functions）

• 内置曲线：ease（默认）、linear、ease-inease-out、ease-in-out。

• 自定义：cubic-bezier(0.25, 0.1, 0.25, 1)。

.transition {transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

---

延迟与触发

延迟0.5秒后开始过渡：

.element {transition: opacity 1s ease 0.5s;
}
.element:hover {opacity: 0.5;
}

---

过渡总结

CSS过渡是一种实现元素属性平滑变化的动画技术，通过自动补间动画增强用户交互体验。其核心是让CSS属性值的变化（如颜色、尺寸等）从初始状态逐步过渡到终止状态，而非瞬间切换。

工作原理：过渡需触发条件（如:hover、:active或JavaScript修改属性），通过四个属性控制效果：

transition-property：指定应用过渡的CSS属性（如width，all表示全部属性）。

transition-duration：定义动画时长（如2s）。

transition-timing-function：控制速度曲线，如匀速（linear）、缓入（ease-in）。

transition-delay：设置动画延迟启动时间。

适用场景：适合简单状态变换，如按钮悬停效果、菜单展开等。需注意：

避免对width/height等影响布局的属性过渡，优先使用transform（如缩放）以提升性能。

非继承属性需明确指定过渡对象。

过渡相比CSS动画更轻量，但缺乏多关键帧控制，复杂动画建议使用animation属性。合理使用过渡能显著提升界面流畅性与交互友好度。

---

动画

CSS动画（Animation）介绍

通过@keyframes定义复杂动画序列，支持多阶段状态控制，可实现无限循环、反向播放等特性。需绑定动画名称、时长、缓动曲线及animation-iteration-count（执行次数）。适合加载动画、连续特效等场景。

---

 定义关键帧：

@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0);}
}/* 或使用百分比 */
@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}

---

动画属性

• animation-name: 关键帧名称（如slide-in）。

• animation-duration: 动画时长（如2s）。

• animation-timing-function: 速度曲线（同过渡）。

• animation-delay: 延迟时间。

• animation-iteration-count: 播放次数（infinite表示无限循环）。

• animation-direction: 播放方向（normal, reverse, alternate）。

• animation-fill-mode: 动画结束后样式（forwards保持最后一帧）。

• animation-play-state: 控制播放/暂停（paused, running）。

---

常见动画效果示例

淡入淡出：

@keyframes fade {from { opacity: 0; }to { opacity: 1; }
}
.element {animation: fade 0.8s ease-in;
}

旋转加载：

@keyframes spin {to { transform: rotate(360deg); }
}
.loader {animation: spin 1s linear infinite;
}

滑动菜单：

.menu {transform: translateX(-100%);transition: transform 0.3s ease-out;
}
.menu.active {transform: translateX(0);
}

---

动画总结

CSS动画（@keyframes）是创建复杂动态效果的核心技术，通过定义动画序列实现元素状态逐帧变化。使用@keyframes 动画名声明动画，通过百分比（0%-100%）或from/to定义多个关键帧状态。每个帧内编写CSS属性变化（如transform、opacity等），浏览器自动补间生成中间帧。

动画属性控制通过animation复合属性绑定动画：
animation-name: 关联@keyframes名称
duration: 动画周期（必需）
timing-function: 速度曲线（ease/in-out/cubic-bezier）
delay: 启动延迟
iteration-count: 播放次数（infinite无限循环）
direction: 播放方向（alternate反向交替）
fill-mode: 结束状态保持（forwards保留最后一帧）
play-state: 暂停/运行控制

优势：硬件加速优化（使用transform/opacity）、响应式适配、代码简洁。适用于加载动画、交互反馈、页面过渡等场景，是增强用户体验的重要工具。

总结

     CSS过渡和关键帧动画是实现网页动态效果的两种核心技术。CSS过渡通过平滑改变元素属性值实现动画，适用于简单的状态切换场景。

     其核心属性包括transition-property指定过渡属性，transition-duration设定持续时间，transition-timing-function控制速度曲线（如ease-in-out），以及transition-delay定义延迟时间。过渡需要触发条件，常见方式包括:hover伪类或JavaScript修改样式。例如按钮悬停时颜色渐变，通过设置transition: background-color 0.3s即可实现。

     动画则通过@keyframes规则创建更复杂的动画序列，允许在动画周期内定义多个中间状态。开发者需先声明关键帧名称及其在不同百分比点的样式，再通过animation属性将动画绑定到元素。关键属性包含animation-name关联关键帧，animation-duration设置总时长，animation-iteration-count控制循环次数，animation-direction定义播放方向。与过渡不同，关键帧动画可自动播放或通过事件触发，适合实现加载旋转、轮播图等需要多阶段控制的场景。