Animate.css 用于复杂入场动画，transition 适用于轻量状态过渡。通过类名控制动效，结合 IntersectionObserver 和 animationend 事件精准触发与清理，实现高性能、流畅的交互体验。
在现代前端开发中，CSS工具类与动画的结合能显著提升页面交互体验。通过简洁的类名控制样式与动效，既能加快开发速度，又能保持代码清晰。Animate.css 和 CSS transition 是两种常用方案，前者适合复杂预设动画，后者适用于轻量状态过渡。合理搭配使用，可以让界面更生动且不失性能。
使用 Animate.css 快速添加入场动画
Animate.css 是一个即插即用的 CSS 动画库，内置数十种交互动画，如淡入、滑动、弹跳等。只需引入库文件，并为元素添加对应类名即可触发动画。
常见用法：- 给需要动画的元素添加 animate__animated 基础类
- 再添加具体动画类，如 animate__fadeInUp、animate__bounceIn
- 可通过 JavaScript 动态添加类实现触发，避免页面加载时自动播放
示例：让一个卡片元素滚动到视口时从下方滑入
<div class="card animate__animated">内容</div>
JavaScript 控制出现时机：
立即学习“前端免费学习笔记（深入）”；
const card = document.querySelector('.card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate__slideInUp');
}
});
});
observer.observe(card);
用 transition 实现按钮悬停等状态过渡
对于颜色、位置、尺寸等属性的变化，transition 更加轻量高效。它适合处理用户交互中的微动效，比如按钮 hover、菜单展开等。
关键技巧：
- 设置 transition 属性定义过渡的属性、时间与缓动函数
- 配合工具类使用，如 hover:scale-105（Tailwind）或自定义类
- 避免对 height 或 margin 等引发重排的属性频繁过渡
自定义工具类示例：
.transition-fast {
transition: all 0.2s ease-out;
}
.opacity-hover:hover {
opacity: 0.8;
transform: translateY(-2px);
}
点击或悬停时视觉反馈更自然，提升可用性。
结合 Animate.css 与 transition 实现场景动效
实际项目中，可将两者结合：用 Animate.css 处理初次渲染或显隐切换的大动画，transition 负责日常交互细节。
典型场景：- 模态框打开时使用 animate__zoomIn，关闭时用 animate__fadeOut
- 框内按钮使用 transition 实现 hover 缩放或阴影变化
- 动画结束后移除 Animate.css 类，防止重复播放
JavaScript 中可监听 animationend 事件清理类名：
modal.addEventListener('animationend', function handler() {
if (!modal.isOpen) {
modal.classList.remove('animate__zoomIn', 'animate__animated');
modal.style.display = 'none';
}
modal.removeEventListener('animationend', handler);
});
基本上就这些。Animate.css 让复杂动画信手拈来，transition 则默默提升交互质感。合理组合，既不影响性能，又能打造流畅的视觉节奏。不复杂但容易忽略。
