5 Useful and Interesting Web Animation Libraries Introduction Anime.js Hover.css Velocity Three Dots Last Note

2025-06-07

5 个实用又有趣的 Web 动画库

介绍

Anime.js

悬停.css

速度

三个点

最后说明

介绍

库通过其预定义的类来实现不同的功能，帮助我们更快地编写代码。将你的项目构想与库相结合，添加功能，就能成就一个伟大的项目。

今天，我们将研究 CSS 动画库，以帮助您为网页添加漂亮的可自定义动画。

那么让我们开始吧。

动画.css

Animate.css 是一个跨浏览器的即用型动画库，可用于你的 Web 项目。非常适合用于强调、主页、滑块和引导提示。

动画.css

安装

新公共管理（NPM）：

$ npm install animate.css --save
Enter fullscreen mode Exit fullscreen mode

脚本：

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

用法

您可以将预定义动画类添加到任何想要添加动画的元素。

<h1 class="animate__animated animate__bounce">An animated element</h1>
Enter fullscreen mode Exit fullscreen mode

CodePen 示例

重新运行以再次查看动画

Anime.js

Anime.js 是一个轻量级的 JavaScript 动画库，拥有简单但强大的 API。
它兼容 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

Anime.js

安装

新公共管理（NPM）：

$ npm install animejs --save
Enter fullscreen mode Exit fullscreen mode

脚本：

您可以下载该脚本并将其添加到项目下载中。将其作为普通脚本进行链接。

在此处下载脚本或访问其GitHub页面进行下载。

  <script src="anime.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

用法

Anime.js 是我最喜欢用来为项目添加动画的工具之一。你只需要使用该anime函数并添加所有动画参数即可。你可以在文档中找到更多关于参数和值的信息。

anime({
    targets:'.box',
    translateY: 250,
    scale: 2,
    duration: 2000,
    background: '#4C0070',
    borderRadius:50,
    rotate: '1turn',
    easing: 'easeInOutExpo',
    loop:true
})
Enter fullscreen mode Exit fullscreen mode

CodePen 示例

悬停.css

一组 CSS3 支持的悬停效果，可应用于链接、按钮、徽标、SVG、精选图片等。您可以轻松应用于您自己的元素、进行修改或仅用于激发灵感。支持 CSS、Sass 和 LESS。

悬停.css

安装

新公共管理（NPM）：

$ npm install hover.css --save
Enter fullscreen mode Exit fullscreen mode

文件：
您可以下载 CSS 文件并将其链接到 HTML 的 head 标签之间。点击此处下载，或访问hover.css 的GitHub页面。

<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>
Enter fullscreen mode Exit fullscreen mode

用法

它是一组预定义的类，您可以将其用作元素的类名。

<button class="hvr-underline-from-center">
  Click Me!
</button>
Enter fullscreen mode Exit fullscreen mode

CodePen 示例

速度

加速 JavaScript 动画。它速度惊人，并具有彩色动画、变换、循环、缓动、SVG 支持和滚动等功能。

速度

安装

新公共管理（NPM）：

$ npm install --save velocity-react
Enter fullscreen mode Exit fullscreen mode

脚本：

<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

用法

速度函数接受两个对象：第一个是属性，第二个是选项。你可以在属性对象中定义所有想要动画的属性。选项对象包含与动画相关的各种选项，例如持续时间、循环、缓动等。

element.velocity(
  {
    marginTop:200,
  },
  {
    duration:1500,
    loop:true,
    easing:'swing'
  }
)
Enter fullscreen mode Exit fullscreen mode

CodePen 示例

三个点

这个项目是一组用三个点创建的 CSS 加载动画，这些点仅由一个元素构成。我认为这个项目不仅可以提升你的 CSS 技能，还能提升你的想象力。

三个点

安装

新公共管理（NPM）：

$ npm install three-dots --save
Enter fullscreen mode Exit fullscreen mode

文件：
将 CSS 包含在文件中

<link href="/path/to/three-dots.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

用法

您只需将类名添加到元素即可。

<div class="dot-pulse"/>
Enter fullscreen mode Exit fullscreen mode

CodePen 示例

最后说明

这些实用又有趣的动画库，能为网页元素注入活力。希望你在下一个项目中能用上以上某个库。

感谢您阅读这篇博文。

文章来源：https://dev.to/surajondev/5-useful-and-interesting-web-animation-libraries-4d6m
Devto 翻译
PREV
5 个免费托管网站的网站介绍最后说明
NEXT
5 本面向开发人员的免费电子书简介 SurajOnDev 的每周简报 线框图指南 像领导者一样说话：有效的沟通技巧 从 5 名员工到 50 名员工 - 初创公司招聘指南 最后说明