今天我要介绍的是一些很棒的CSS动画资源，可帮助你快速又轻松地对组件进行动画渲染。

CSS动画代码生成器

1. Bounce.js

Bounce.js是一个 JS 工具库，可让您创建漂亮的 CSS3 动画。

官方网站：http://bouncejs.com/

2. Animista

Animista是一个很不错的CSS动画代码生成工具，我们可以利用可视化的界面选择需要的动画效果，然后点击生成代码按钮即可生成对应动画的CSS代码。

官方网站：https://animista.net/play/basic

3. The App Guruz

它同样是一个可视化界面的CSS动画代码生成器，我们可以在侧边栏选择很多符合自己需要的动画效果，同样是点击生成按钮，即可获取CSS代码。

官方网站：https://www.theappguruz.com/tag-tools/web/CSSAnimations/

4. CSS animate

cssanimate同样是一个功能强大的CSS动画代码生成器，在编辑器上我们可以制作动画帧，然后可以预览效果，最后生成CSS代码。

官方网站：https://cssanimate.com/

5. Keyframes

和cssanimate一样，Keyframes也是定义动画帧，然后生成CSS动画代码，非常简单。

官方网站：https://keyframes.app/animate/

6. Animatopy

Animatopy可以让你在下拉框中选择相应的动画，并且会自动播放动画预览，同时自动生成相应的CSS动画代码。

官方网站：https://sarthology.github.io/Animatopy/

动画npm软件包

下面的这些链接包含很多预构建的动画类，它们以软件包的形式提供，你可以使用npm或bower安装。有些还具有通过CDN链接的选项。并且你可以通过更改各种参数来获取所需的动画。

1. Animo.JS

Animo是一款功能强大的小工具，用于通过JavaScript管理过渡和动画，通过yarn add animo-core进行安装。

官方网站：https://animo.js.org/

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">

官方网站：https://ianlunn.github.io/Hover/

3. Animate.CSS

Animate.css是一个可在web项目中使用的即用型跨浏览器动画库。非常适合强调、主页、滑块和attention-guiding提示。

使用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"/>

官方网站：https://animate.style/

4. Animatelo

Animatelo是对Animate.css的Web Animations API的移植。通过npm安装：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>

官方网站：https://gibbok.github.io/animatelo/

5. CSShake

使用npm安装：npm i csshake或引用链接

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

官方网站：https://elrumordelaluz.github.io/csshake/

6. Magic

使用npm i magic.css安装。

官方网站：https://www.minimamente.com/project/magic/

7. Micron

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>

你也可以使用npm：npm install webkul-micron

官方网站：https://webkul.github.io/micron/

8. Motion UI

Motion UI是一个Sass库，用于快速创建CSS过渡和动画。使用npm安装Motion UI：npm install motion-ui --save

官方网站：https://zurb.com/playground/motion-ui

9. vhs

你可以通过npm npm install vhs或使用CDN进行安装

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

官方网站：https://jxnblk.com/vhs/

预构建动画CSS文件

以下站点提供了包含预构建动画代码的css文件，你可以更改各种值以获取所需的动画。要想添加动画到项目中的话，只需转到相应的站点，下载css文件并将其链接到项目即可。

1. Vivify

只要将vivify css文件包含在文档的头部即可

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>

官方网站：http://vivify.mkcreative.cz/

2. All Animation CSS3

下载后链接all-animation css文件

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

官方网站：https://all-animation.github.io/

3. It’s Tuesday

下载发布的ZIP文件或克隆存储库。将已编译的CSS文件包括在HTML文件的头部中。

<link rel="stylesheet" type="text/css" href="css/tuesday.min.css" />

或者，如果你不想托管文件，请改用CDN链接。

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

官方网站：https://shakrmedia.github.io/tuesday/

4. Obnoxious

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

<link rel="stylesheet" href="/path/to/obnoxious.css">

官方网站：https://tholman.com/obnoxious/

5. Rocket

当一个项移动到另一个元素时，Rocket会创建动画。要使用Rocket的动画，请包含robot.css或rocket.min.css并在项目中包含JS文件：rocket.js或rocket.min.js。

<link rel="stylesheet" href="rocket.min.css">

<script src="rocket.min.js"></script>

官方网站：https://minimamente.com/example/rocket/

6. Wicked CSS

要使用wicked CSS动画，请在项目中包含wickedcss.min.css。

<link rel="stylesheet" href="css/wickedcss.min.css">

官方网站：https://kristofferandreasen.github.io/wickedCSS/#

7. AniJS

在script标签里包含AniJS文件。

<script src="anijs-min.js"></script>

官方网站：http://anijs.github.io/#welcome

一些实用工具

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

1. Ceaser

官方网站：https://matthewlein.com/tools/ceaser

2. Wait Animate

WAIT! Animate在给定等待时间的情况下，会计算更新的关键帧百分比，这意味着你可以使用纯CSS在每个动画迭代之间插入延迟，而无需使用JavaScript。

官方网站：https://waitanimate.wstone.io/

3. SVGator

制作SVG动画最简单方法是将SVG提升到一个全新的水平，而无需编写代码、动画图标、logo、背景和其他插图。

官方网站：https://svgator.com/

（文本完，感谢阅读）

• 本文分类：菜鸟教程
• 本文标签：
• 本文链接：https://www.58how.com/Reference/73251.html