30+🔥 超棒的 CSS 动画资源

2025-05-25

30+🔥 超棒的 CSS 动画资源

这里列出了一些很棒的 CSS 动画资源，可以帮助你快速轻松地为组件添加动画效果。部分链接来自我之前的文章，我刚刚更新了一些新资源，删除了一些失效的链接，并整理了仅与动画相关的资源。希望对您有所帮助。

生成动画的 CSS 代码

以下网站将帮助您生成动画的 CSS 代码，可将其直接复制粘贴到您的项目中。

1. Bounce.js

替代文本

2. Animista

替代文本

3.应用大师

替代文本

4. CSS动画

替代文本

5.关键帧

替代文本

6.动画

替代文本

动画 npm 包

以下链接包含预置的动画类，可在您的项目中使用。它们以包的形式提供，您可以使用 npm 或 bower 安装。有些还提供通过 CDN 链接的选项。您可以通过更改各种参数来实现所需的动画效果，更多详情请访问相应的网站。

1. Animo.JS

替代文本
Animo 是一款功能强大的小工具，用于使用 JavaScript 管理过渡和动画，安装方式如下：yarn add animo-core

2. Hover.CSS

替代文本
Hover.css 有多种使用方式；您可以从 hover.css 中复制粘贴您喜欢的效果，也可以引用样式表。将效果的类名应用于您想要应用的元素。您也可以使用 npm: 进行安装npm install hover.css --save。如果您计划使用多种 Hover.css 效果，建议您引用整个 Hover.css 样式表：

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

3. Animate.CSS

替代文本
Animate.css 是一个跨浏览器的即用型动画库，可用于你的网页项目。非常适合用于强调、主页、滑块和引导提示。
使用 npm 安装：$ npm install animate.css --save
或使用 CDN 直接将其添加到你的网页：

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

4.阿尼马特洛

替代文本
Animatelo 是 Animate.css 的 Web Animations API 移植版。使用 :npm install animatelo --save或 CDN 安装

<!-- Include the polyfill -->
<script src="https://cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="https://cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

5.CSShake​

替代文本
使用 npm 安装：npm i csshake或者

<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
Enter fullscreen mode Exit fullscreen mode

6.魔术

替代文本
使用 安装npm i magic.css。

7.美光公司

替代文本
Micron.JS 是一个微交互库，可用于为不同的 DOM 元素添加交互。Micron.JS 利用 CSS 为元素添加动画效果，并由 JavaScript 控制交互行为。Micron.JS 易于适应，可以使用 HTML5 数据属性或 JavaScript 方法链来实现交互。

使用 CDN 安装 Micron

<link href="https://unpkg.com/webkul-micron@1.1.6/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.6/dist/script/micron.min.js" type="text/javascript"></script>
Enter fullscreen mode Exit fullscreen mode

您还可以使用 npm：npm install webkul-micron

8.动态用户界面

替代文本
Motion UI 是一个用于快速创建 CSS 过渡和动画的 Sass 库。使用 npm 安装 Motion UInpm install motion-ui --save

9. VHS录像带

替代文本

您可以通过 npmnpm install vhs或使用 cdn安装

<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">
Enter fullscreen mode Exit fullscreen mode

10. Tachyons Animate

使用 npm 安装：npm i tachyons-animate

预构建动画 CSS 文件

以下网站提供包含预置动画代码的 CSS 文件，您可以修改各种值来获得所需的动画效果。要将动画添加到您的项目中，只需前往上述网站，下载 CSS 文件并将其链接到您的项目即可。

1.活力

替代文本
只需将 vivify css 文件包含到文档的头部即可

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
Enter fullscreen mode Exit fullscreen mode

2.所有动画 CSS3

替代文本
下载后链接所有动画 css 文件，

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
Enter fullscreen mode Exit fullscreen mode

3.今天是星期二

替代文本
下载发布的 ZIP 文件或克隆代码库。将编译后的 CSS 文件添加到 HTML 文件的头部。

<link rel="stylesheet" type="text/css" href="css/tuesday.min.css" />
Enter fullscreen mode Exit fullscreen mode

或者，如果您不想托管文件，则可以使用 CDN 链接。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css" />
Enter fullscreen mode Exit fullscreen mode

4.令人讨厌

替代文本
要使用，请将 obnoxious.css 样式表添加到文档的头部

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

5.火箭

替代文本
Rocket 会在项目移动到另一个元素时创建动画。要使用 Rocket 的动画，请在项目中引入 rocket.css 或 rocket.min.css 文件，并引入 JS 文件 rocket.js 或 rocket.min.js。

<link rel="stylesheet" href="rocket.min.css">
<script src="rocket.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

6. Wicked CSS

替代文本
要使用 wicked css 动画，请将 wickedcss.min.css 包含到您的项目中。

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

7. AniJS

替代文本
包含带有脚本标签的 AniJS 文件。

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

工具

一些有助于创建精美动画的工具。

1.凯撒

替代文本

2.等待动画

替代文本
等待！Animate 会根据等待时间计算更新的关键帧百分比，这意味着您可以使用纯 CSS 在每个动画迭代之间插入延迟，而无需 JavaScript。

3. SVGator

替代文本
为 SVG 制作动画的最简单方法，无需编写一行代码即可将您的 SVG 提升到一个全新的水平，为图标、徽标、背景和其他插图制作动画。

4. Stylie

替代文本

您还可以查看以下资源

  1. CSS动画集合
  2. 动画旋转器
  3. 点击复制 CSS 效果
  4. 动画 SVG 图标
  5. 沃夫
  6. 哇哦
基兰拉杰夫德

35+个简单的基于CSS的预加载器

Kiran Raj R ・ 21年5月28日

#css #生产力 #beginners #webdev
基兰拉杰夫德

30+ 面向 Web 开发人员的插图资源

Kiran Raj R ・ 21年5月29日

#webdev #beginners #html #codenewbie
基兰拉杰夫德

12 个简单的 CSS 悬停效果

Kiran Raj R ・ 2021年4月26日

#css #beginners #codenewbie #webdev
基兰拉杰夫德

19个使用CSS的简单悬停动画

Kiran Raj R ・ 21年5月4日

#css #beginners #webdev #生产力
文章来源：https://dev.to/kiranrajvjd/30-awesome-css-animation-resources-h9c
Devto 翻译
PREV
35+个简单的基于CSS的预加载器
NEXT
10+ 适用于 Web 项目的超棒 SVG 形状生成器