如何在CSS中引入动画库_通过或@import加载Animate.css

首先通过标签或@import规则引入Animate.css,推荐使用在HTML的中接入CDN链接,引入后为元素添加animate__animated及具体动画类如animate__bounce即可生效;若使用@import则需在CSS文件首行导入URL,并注意其可能影响性能;项目中也可通过npm安装并导入,选择合适方式可快速应用动画效果。

或@import加载animate.css">

在CSS中引入动画库如 Animate.css,可以通过 标签或 @import 规则来实现。以下是具体使用方法。

使用 引入 Animate.css

这是最常见且推荐的方式,直接在 HTML 文件的 中引入 CDN 链接。

示例代码:

引入后,你可以在任意元素上使用 Animate.css 提供的动画类,例如:

欢迎使用动画

注意:Animate.css 4.0 以后版本需要加上 animate__ 前缀。

使用 @import 引入 Animate.css

如果你希望在自己的 CSS 文件中统一管理样式,可以使用 @import 导入 Animate.css。

在你的 CSS 文件顶部添加:

@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
之后在 HTML 中引入你的 CSS 文件即可使用动画类。

例如:

注意事项

使用 @import 会增加 CSS 文件加载时间,可能影响页面性能,建议优先使用 直接引入。 如果项目使用构建工具(如 Webpack、Vite),也可以通过 npm 安装并导入:
npm install animate.css
然后在入口 JS 或 CSS 文件中引入:
@import 'animate.css';

基本上就这些,选择合适的方式引入后,就可以在项目中轻松使用丰富的动画效果了。不复杂但容易忽略细节。