css工具Animate.css实现动画效果-css教程-PHP中文网

css工具Animate.css实现动画效果

P粉602998670

发布： 2025-10-14 17:29:01

原创

607人浏览过

Animate.css 是一个基于 CSS3 的动画库，通过添加类名实现元素的淡入、抖动、弹跳等效果，支持 CDN 引入或 npm 安装，结合 JavaScript 可动态控制动画触发，适用于提示反馈与页面动效，需注意合理使用避免影响性能。

css工具animate.css实现动画效果

Animate.css 是一个流行的 CSS 动画库，使用它无需编写复杂的动画代码，只需为元素添加对应的类名，就能快速实现流畅的动画效果。它基于 CSS3 的 @keyframes 实现，兼容现代浏览器，非常适合用于网页中的提示、按钮反馈、页面进入出场等场景。

引入 Animate.css

使用 Animate.css 有多种方式，最常见的是通过 CDN 引入：

也可以通过 npm 安装：

npm install animate.css

安装后在项目中导入：

立即学习“前端免费学习笔记（深入）”；

@import 'animate.css';

基本使用方法

要让一个元素应用动画，只需要给它加上 animate__animated 和对应的动画类名。例如实现一个淡入效果：

<h1 class="animate__animated animate__fadeIn">欢迎来到我的网站</h1>

常用动画类包括：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

animate__bounce - 跳跃效果
animate__flash - 闪烁效果
animate__pulse - 脉冲放大
animate__rubberBand - 橡皮筋拉伸
animate__shakeX / animate__shakeY - 水平或垂直抖动
animate__swing - 摇摆效果
animate__tada - 类似弹出强调
animate__wobble - 扭动效果

控制动画行为

可以通过添加额外类来调整动画的执行方式：

animate__delay-2s：延迟 2 秒开始动画
animate__slow、animate__slower：降低动画速度
animate__repeat-2：重复 2 次（最多支持 repeat-3）
animate__infinite：无限循环动画

示例：一个无限抖动且延迟 1 秒出现的按钮：

结合 JavaScript 控制动画

可以通过 JS 动态添加或移除类来触发动画。由于 animate.css 动画默认只播放一次，重新触发需要先移除类再添加：

const element = document.querySelector('#myElement');
element.classList.add('animate__animated', 'animate__bounce');
// 动画结束后可选择移除类以再次触发
element.addEventListener('animationend', () => {
element.classList.remove('animate__animated', 'animate__bounce');
});

这样可以实现用户点击时再次播放动画的效果。

基本上就这些，Animate.css 简单易用，适合快速提升页面交互感。关键是熟悉常用类名并合理控制动画节奏，避免过度使用影响用户体验。

以上就是css 工具Animate.css实现动画效果的详细内容，更多请关注php中文网其它相关文章！