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

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智能小助手）
公众号二维码

posted @ 2025-08-03 16:18  qife  阅读(6)  评论(0)    收藏  举报