mindmap
    id1[CSS 动画基础概念]
        id1-1[动画原理与优势]
        id1-2[关键帧动画原理]
        id1-3[过渡动画原理]
        id1-4[CSS动画与传统JavaScript动画对比]
        id1-5[硬件加速与性能优化]
        id1-6[浏览器支持与兼容性]
        id1-7[各浏览器前缀使用]
        id1-8[渐进增强策略]
        id1-9[降级方案设计]
        id1-10[特性检测方法]

mindmap
    id2[CSS 过渡动画]
        id2-1[transition 属性详解]
        id2-2[transition-property 指定过渡属性]
        id2-3[transition-duration 设置持续时间]
        id2-4[transition-timing-function 缓动函数]
        id2-5[transition-delay 延迟时间设置]
        id2-6[过渡效果应用]
        id2-7[颜色过渡效果]
        id2-8[尺寸变化过渡]
        id2-9[位置移动过渡]
        id2-10[透明度变化过渡]
        id2-11[变形过渡效果]
        id2-12[高级过渡技巧]
        id2-13[多属性同时过渡]
        id2-14[链式过渡效果]
        id2-15[状态机过渡设计]
        id2-16[交互反馈过渡]

mindmap
    id3[CSS 关键帧动画]
        id3-1[@keyframes 规则]
        id3-2[关键帧定义语法]
        id3-3[百分比关键帧设置]
        id3-4[from/to 关键字使用]
        id3-5[多关键帧动画设计]
        id3-6[animation 属性详解]
        id3-7[animation-name 动画名称]
        id3-8[animation-duration 动画时长]
        id3-9[animation-timing-function 时间函数]
        id3-10[animation-delay 延迟时间]
        id3-11[animation-iteration-count 重复次数]
        id3-12[animation-direction 播放方向]
        id3-13[animation-fill-mode 填充模式]
        id3-14[animation-play-state 播放状态]
        id3-15[复杂动画设计]
        id3-16[多动画同时运行]
        id3-17[动画序列编排]
        id3-18[循环动画设计]
        id3-19[响应式动画适配]

mindmap
    id4[变换效果]
        id4-1[D 变换]
        id4-2[translate   平移变换]
        id4-3[rotate   旋转变换]
        id4-4[scale   缩放变换]
        id4-5[skew   倾斜变换]
        id4-6[matrix   矩阵变换]
        id4-7[D 变换]
        id4-8[translate3d   3D平移]
        id4-9[rotate3d   3D旋转]
        id4-10[scale3d   3D缩放]
        id4-11[perspective 透视设置]
        id4-12[transform-style 3D空间]
        id4-13[变换原点与顺序]
        id4-14[transform-origin 变换原点]
        id4-15[变换顺序影响]
        id4-16[复合变换技巧]
        id4-17[变换性能优化]

mindmap
    id5[缓动函数与时间函数]
        id5-1[预定义缓动函数]
        id5-2[linear 线性运动]
        id5-3[ease 标准缓动]
        id5-4[ease-in 加速进入]
        id5-5[ease-out 减速退出]
        id5-6[ease-in-out 加速减速]
        id5-7[贝塞尔曲线函数]
        id5-8[cubic-bezier   函数语法]
        id5-9[常见贝塞尔曲线值]
        id5-10[自定义缓动曲线]
        id5-11[在线工具使用]
        id5-12[steps   函数]
        id5-13[steps   步进函数语法]
        id5-14[帧动画实现]
        id5-15[打字机效果]
        id5-16[加载动画设计]

mindmap
    id6[动画性能优化]
        id6-1[性能影响因素]
        id6-2[重排与重绘]
        id6-3[图层创建与管理]
        id6-4[硬件加速原理]
        id6-5[内存占用控制]
        id6-6[优化策略]
        id6-7[使用transform和opacity]
        id6-8[will-change属性应用]
        id6-9[减少动画元素数量]
        id6-10[合理设置动画时长]
        id6-11[性能检测工具]
        id6-12[浏览器开发者工具]
        id6-13[帧率监测方法]
        id6-14[性能分析技巧]
        id6-15[移动端性能考虑]

mindmap
    id7[响应式动画设计]
        id7-1[媒体查询与动画]
        id7-2[断点动画适配]
        id7-3[设备性能检测]
        id7-4[移动端动画优化]
        id7-5[触摸交互动画]
        id7-6[视口单位应用]
        id7-7[vw/vh 单位使用]
        id7-8[vmin/vmax 单位应用]
        id7-9[响应式缩放动画]
        id7-10[全屏动画设计]

mindmap
    id8[交互式动画]
        id8-1[伪类触发动画]
        id8-2[:hover 悬停动画]
        id8-3[:focus 焦点动画]
        id8-4[:active 激活动画]
        id8-5[:checked 状态动画]
        id8-6[JavaScript 控制]
        id8-7[classList 切换控制]
        id8-8[自定义属性控制]
        id8-9[事件驱动动画]
        id8-10[动画回调函数]
        id8-11[滚动触发动画]
        id8-12[Intersection Observer API]
        id8-13[视差滚动效果]
        id8-14[滚动进度动画]
        id8-15[页面滚动指示器]

mindmap
    id9[高级动画效果]
        id9-1[文字动画]
        id9-2[打字机效果]
        id9-3[文字渐现动画]
        id9-4[文字路径动画]
        id9-5[文字变形效果]
        id9-6[加载动画]
        id9-7[旋转加载器]
        id9-8[进度条动画]
        id9-9[骨架屏动画]
        id9-10[无限循环动画]
        id9-11[背景动画]
        id9-12[渐变背景动画]
        id9-13[粒子背景效果]
        id9-14[视差背景动画]
        id9-15[动态纹理效果]

mindmap
    id10[动画库与工具]
        id10-1[常用动画库]
        id10-2[Animate.css 使用]
        id10-3[Hover.css 特效]
        id10-4[Magic Animations]
        id10-5[AOS 滚动动画]
        id10-6[开发工具]
        id10-7[CSS 动画生成器]
        id10-8[贝塞尔曲线编辑器]
        id10-9[关键帧动画工具]
        id10-10[性能测试工具]
        id10-11[最佳实践]
        id10-12[动画设计原则]
        id10-13[用户体验考虑]
        id10-14[可访问性设计]
        id10-15[跨平台兼容方案]