Animate.css - 轻松实现网页动画效果

作者：qife

2025-08-03
福建
本文字数：1281 字
阅读完需：约 4 分钟

Animate.css

项目标题与描述

Animate.css 是一个"即插即用"的 CSS 动画库，为网页开发者提供丰富的预设动画效果。通过简单的类名添加，即可实现元素淡入、弹跳、滑动等 60+种动画效果。项目遵循 Hippocratic License 2.1 许可，核心目标是让网页动画实现变得简单高效。

功能特性

即用型动画：通过添加 CSS 类名即可应用动画效果
丰富动画类型：包含淡入淡出(fades)、弹跳(bounces)、滑动(slides)等分类动画
响应式支持：自动适配prefers-reduced-motion媒体查询，尊重用户运动敏感设置
轻量高效：纯 CSS 实现，无 JavaScript 依赖
设计规范：所有动画遵循自然物理运动原则，保持视觉一致性
跨平台兼容：支持所有主流浏览器和操作系统

安装指南

npm 安装

npm install animate.css --save

复制代码

yarn 安装

yarn add animate.css

复制代码

CDN 引入

<head>  <link    rel="stylesheet"    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  /></head>

复制代码

使用说明

基础用法

<h1 class="animate__animated animate__bounce">弹跳标题</h1>

复制代码

动画持续时间控制

<div class="animate__animated animate__bounce animate__faster">快速弹跳</div>

复制代码

延迟动画

<div class="animate__animated animate__bounce animate__delay-2s">2秒后弹跳</div>

复制代码

JavaScript 控制

const element = document.querySelector('.my-element');element.classList.add('animate__animated', 'animate__bounceOutLeft');

复制代码

核心代码

构建配置 (postcss.config.js)

module.exports = (ctx) => {  const prefix = ctx.env === 'compat' ? '' : animateConfig.prefix;    return {    plugins: {      'postcss-import': {root: ctx.file.dirname},      'postcss-prefixer': {        prefix,        ignore: [/\[class\*=.*\]/],      },      'postcss-preset-env': {        autoprefixer: { cascade: false },        features: { 'custom-properties': true }      },      cssnano: ctx.env === 'production' ? {} : false,      'postcss-header': { header }    }  };}

复制代码

文件头部注释生成

const header = `/*! * animate.css - ${homepage} * Version - ${version} * Licensed under the Hippocratic License 2.1 * * Copyright (c) ${new Date().getFullYear()} ${author.name} */`;

复制代码

动画类示例 (以 bounce 为例)

@keyframes bounce {  from, 20%, 53%, 80%, to {    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);    transform: translate3d(0, 0, 0);  }  40%, 43% {    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);    transform: translate3d(0, -30px, 0);  }  70% {    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);    transform: translate3d(0, -15px, 0);  }  90% {    transform: translate3d(0, -4px, 0);  }}
.animate__bounce {  animation-name: bounce;  transform-origin: center bottom;}

复制代码

更多精彩内容请关注我的个人公众号公众号（办公 AI 智能小助手）公众号二维码

办公AI智能小助手

发布于: 刚刚阅读数: 2

qife

关注

还未添加个人签名 2021-05-19 加入

还未添加个人简介

发布

暂无评论

创作场景

Animate.css - 轻松实现网页动画效果

Animate.css

项目标题与描述

功能特性

安装指南

npm 安装

yarn 安装

CDN 引入

使用说明

基础用法

动画持续时间控制

延迟动画

JavaScript 控制

核心代码

构建配置 (postcss.config.js)

文件头部注释生成

动画类示例 (以 bounce 为例)

qife

评论