Appearance
CSS 动效资源推荐
收录实用的 CSS 动效库、在线生成工具、灵感来源及学习资源，帮助开发者快速实现精美的动画效果。
动效库
Animate.css
最流行的跨浏览器 CSS 动画库，开箱即用。只需为元素添加类名，即可实现淡入淡出、弹跳、翻转、闪烁等数十种预设动画效果。适合为页面元素添加进入/退出动效，支持与 JavaScript 配合控制播放时机。
适合场景：页面提示、模态框出现、元素进场动效。
Hover.css
专注于鼠标悬停交互的 CSS 动效集合，包含 2D 变换、背景过渡、图标效果、边框动画、阴影发光等多个分类，超过 100 种悬停效果，可单独引入或按需复制代码片段。
适合场景：按钮、卡片、导航菜单的悬停交互。
Magic CSS
提供一组视觉冲击力强的特殊 CSS 动画效果，包含爆炸、旋转消失、空间扭曲等夸张动效，适合需要强烈视觉反馈的场景，风格偏游戏化和趣味化。
适合场景：游戏界面、创意营销页面。
CSShake
专门提供各种震动抖动动画效果的轻量级库，内置多种震动方式：固定震动、随机震动、水平震动、疯狂抖动等，非常适合用于错误提示或引导用户注意的交互场景。
适合场景：表单验证失败、错误提示、吸引注意力。
Motion One
基于 Web Animations API 的现代动画库，体积极小（仅 3.8KB），语法简洁，支持时间线动画、弹簧物理效果、滚动触发动画等高级特性，性能优于纯 CSS 动画，适合复杂交互场景。
适合场景：复杂页面动效、滚动联动动画。
CSS 加载动画
CSS Loaders
收录了大量纯 CSS 实现的加载动画，按形状和风格分类清晰，每个效果均提供完整代码，可直接复制使用，无需依赖任何第三方库，非常适合需要轻量加载指示器的场景。
适合场景：页面加载、数据请求等待状态。
Whirl
专注于 CSS 加载动画的展示库，提供超过 100 种风格各异的加载效果，每种效果都附有完整的 HTML 和 CSS 代码，可直接复制使用，视觉效果丰富，覆盖旋转、脉冲、弹跳等多种风格。
适合场景：各类加载状态的视觉反馈。
SpinKit
设计精良的 CSS 加载动画集合，风格简洁现代，代码量极少，适合追求简约设计风格的项目，每种效果均可轻松自定义颜色和尺寸。
适合场景：简洁风格项目的加载状态。
在线生成工具
Animista
功能强大的在线 CSS 动画生成器，提供丰富的预设动画效果，支持对每个动画参数（时长、延迟、缓动函数、迭代次数等）进行可视化调整，实时预览结果并导出最小化的 CSS 代码，是快速生成自定义动画的利器。
适合场景：需要自定义参数的动画效果快速生成。
Keyframes.app
一站式 CSS 工具集，包含 @keyframes 动画编辑器、阴影生成器、颜色选择器等多个工具。动画编辑器提供类似 After Effects 的时间轴界面，以可视化方式编辑关键帧动画，对不熟悉 CSS 动画语法的开发者非常友好。
适合场景：可视化编辑复杂关键帧动画。
Cubic-bezier
专门用于调试 CSS cubic-bezier() 缓动函数的在线工具，通过拖拽控制点即可调整贝塞尔曲线，实时对比标准缓动效果（ease、ease-in、ease-out 等），生成对应的 CSS 函数值，彻底解决动画"缓入缓出"调参难题。
适合场景：精细调整动画的缓动节奏感。
Easing Functions Cheat Sheet
缓动函数可视化参考手册，展示了所有常用缓动类型（Sine、Quad、Cubic、Elastic、Bounce 等）的运动曲线图，并提供对应的 CSS 和 JavaScript 实现代码，是调整动画"手感"的必备参考。
适合场景：快速查找并复用标准缓动函数。
CSS Gradient Animator
渐变背景动画在线生成器，通过可视化界面配置颜色、动画速度和方向，自动生成流动渐变背景的完整 CSS 代码，适合制作炫彩动态背景效果。
适合场景：动态渐变背景、Hero 区域背景动效。
灵感与案例
Codrops
专注于创意前端开发的博客和案例展示平台，定期发布高质量的 UI 动效教程和 Demo，内容涵盖页面过渡、SVG 动画、WebGL 特效、滚动交互等前沿技术，每篇文章均附有完整源码，是学习高级动效的优质资源。
亮点：案例质量高，实用教程丰富，开源代码可直接学习。
CodePen
全球最大的前端代码分享和创意展示平台，拥有海量 CSS 动效示例，搜索关键词即可找到各类效果的实现代码。支持在线编辑和 Fork，是寻找灵感和学习他人实现思路的最佳社区。
亮点：社区活跃，案例类型多样，可在线调试修改。
CSS Tricks
专注于 CSS 技术的权威博客，收录了大量关于 CSS 动画的深度文章，覆盖 @keyframes、transition、transform、CSS 变量与动画结合等核心知识点，是系统学习 CSS 动效的重要参考站点。
亮点：内容权威，讲解深入，适合系统学习。
UI Verse
开源 UI 组件分享平台，专注于纯 CSS 或 CSS+少量 JS 实现的精美组件，包括按钮、开关、卡片、输入框等，大量带有精致的动效交互，代码完全开源，可直接复制使用。
亮点：组件质量高，带交互动效，开源免费。
动效设计参考 - Lottie Files
Lottie 动画格式的资源社区，提供大量由设计师制作的 JSON 格式动画，可通过轻量级的 Lottie 播放器在 Web 和移动端渲染，效果媲美视频但体积极小，平台提供免费和付费资源。
适合场景：空状态插画、成功/失败反馈、引导动画。
学习资源
CSS Animation Rocks
专注于 CSS 动画教学的网站，以实际案例为驱动讲解动画技术，文章质量高，循序渐进，适合希望系统掌握 CSS 动画的开发者。
web.dev 动画性能指南
谷歌官方 web.dev 平台提供的动画性能优化指南，详细讲解如何编写高性能动画（使用 transform 和 opacity、避免触发重排/重绘等），是提升动画流畅度的必读资料。