糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

十款顶级CSS动画库

十款顶级CSS动画库

原创 新闻资讯

于 2023-09-05 08:54:09 发布

15155 浏览

技术讨论

在过去的很多年时间里，开发人员想要在网页上显示动画，只能借助于Flash播放器和GIF图片。


然而，随着CSS3引入关键帧、过渡和动画属性，创建燃爆人眼球的抽象动画变得容易起来。CSS3更新不但允许创建动画，甚至可以呈现各种伪状态（即悬停、聚焦等）。这些都是划时代的进步。


使用这些属性创建动画非常简单。首先，定义包含首选动画序列的keyframes规则：

@keyframes float {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

我们在上面定义了一个命名为float的关键帧，该关键帧在动画流的0%处将元素translate属性设置为平移0%，50%处沿y轴向上平移15px，100%处平移回0%。


然后，我们可以通过animation属性将此关键帧流应用于元素：

.element {
  animation: floating 3s ease-in-out infinite;
}

/* 或者 */

.element:hover {
  animation: floating 3s ease-in-out infinite;
}

我们发现，创建简单的浮动动画就需要大量代码，要是处理更复杂的动画，代码就更长了。动画库本质上解决了这个问题，有了动画库，我们向网页添加动画的过程如同向元素添加类名一样简单。


这篇文章将介绍用于各种动画类型，例如简单运动、元素/页面过渡、灯箱动画、加载器、滚动时动画页面等等的10个常见的CSS动画库和平台。一起来看看吧。

Animate.css


1.png

Animate.css是最受欢迎的CSS动画库之一，截至撰写本文为止，GitHub上的星星超过76k。只需在想要设置动画的元素中包含类名，我们就可以通过Animate.css毫不费力地将多个动画范围添加到web应用程序中。对于显示页面动画、滑块动画以及整体引人注目的动画，使用Animate.css非常方便。


这个库包括的实用程序类还允许你直接从标记调整动画持续时间、速度和重复动画。你还可以将此库提供的动画与本地CSS关键帧属性集成，并直接从CSS代码进行调用。


如何使用

Animate.css可作为npm包提供，也可通过CDN使用：

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

在标记头部分包含CDN URL后，你可以从可用动画列表中调用，如下所示：

<div class="animate__animated animate__pulse">A pulse animated element</div>
<!-- using utility class  -->
<div class="animate__animated animate__pulse animate__infinite">A pulse animated element</div>

在第一个示例中，我们创建了一个脉冲动画的div，默认情况下动画1秒钟，在第二个示例中，我们将脉冲动画配置为使用animate__infinite实用程序类（相当于CSSanimation-iteration-count: infinite;）。

文档地址：https://animate.style/

Github地址：https://github.com/animate-css/animate.css


Animista

Animista与其说是一个库，不如说是一个CSS动画平台，因为它按需提供动画，即你在平台可以选择想要的动画类型，然后为你生成动画CSS关键帧代码。


2.png

从表面上看，Animista上可用的动画类型与animate.css上提供的动画类型非常相似，但是，如果深入研究，你会发现Animista提供了更多有用的动画类别，特别是在动画文字和背景元素方面。而且，在你准备导出动画代码时，还可以选择标准下载或压缩代码。


如何使用

无需下载任何软件包，也无需在网站中包含任何CDN链接，即可使用Animista：只需访问主页，选择喜欢的动画，根据需要自定义动画序列，就会立即产生代码。

整个过程如下所示：


3.gif


文档地址：https://docs.google.com/document/d/1jktijADrL3dmwF_td73HJrAD7-x_MY3i6VMtvqKwa1o/edit#

官方地址：https://animista.net/


Animation library


4.png

你可以把Animation library当作是Animate.css的替代方案，因为它们提供类似的动画类别。但是，与Animate.css不同点在于，Animation library不提供允许设置首选动画持续时间、速度和计时的其他自定义选项。


此外，Animation library源文件被划分为不同的类 — 例如，淡入淡出动画的所有变体都位于单个源文件中，其他动画类也是如此。


如何使用

下载包含所有动画类别的ZIP文件后，选择链接到其中的文件，并在标记中调用关联的类名。下面是链接rotate.css并使用rotateUpRight样式的一个示例：

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

<body>
  <div class="rotateUpRight">
    This div will rotate up right.
  </div>
</body>

文档地址：https://animation.kaustubhmenon.com/

Github地址：https://github.com/kaustubhmenon/animation-library


Magic CSS


5.png

Magic CSS也是一个很有趣的动画库，与之前介绍的动画库相比，它提供的的动画更具吸引力。软件包提供的动画对于页面过渡非常方便。但是，magic CSS的一个缺点是它不支持Opera迷你浏览器。


如何使用

Magic CSS的用法非常简单。既可以通过npm下载库，也可以直接下载CSS源文件，并写到网页标记中，然后调用即可：

<head>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/miniMAC/magic/master/dist/magic.min.css">
</head>

<body>
  <div class="magictime puffIn">
  </div>
</body>

文档地址：https://www.minimamente.com/project/magic/

Github地址：

https://github.com/miniMAC/magic


lightGallery


6.gif


lightGallery与我们之前提到的其他动画库不同，它是专门为制作焦点图动画而设计的。焦点图动画（如上图所示）是单击时以模态形式覆盖当前网站的图像。


lightGallery是一个多功能库，因为它支持视频文件，允许你以轮播格式渲染媒体资源，允许你创建自定义插件来扩展或修改功能。同样值得注意的是，lightGallery并不完全是一个纯粹的CSS动画库，它的功能依赖于JavaScript。


如何使用

lightGallery可通过npm/yarn、bower获得，也可通过CDN提供服务。要使用传统网页，首先在网页中包含CSS和JavaScript CDN链接，如下所示：

<head>
  <link rel="stylesheet" href="/path/to/lightgallery-bundle.css" />
</head>

<body>
  <!-- . . .  -->
  <script src="/path/to/lightgallery.min.js"></script>
</body>

然后，创建元素，该元素将充当要转换为焦点图的所有图像的容器：

<div id="lightbox-container">
  <a data-lg-size="1600-2400">
    <img src="path/to/img" />
  </a>
  <a data-lg-size="1024-800">
    <img src="path/to/img" />
  </a>
</div>

最后，通过之前创建的容器初始化lightGallery，脚本如下：

lightGallery(document.getElementById("lightbox-container"), {
  speed: 500
  //   ...
});

lightGallery还可与其他JavaScript框架（如React、Angular和Vue）集成，使得通过组件和props来使用库更加方便容易。


文档地址：https://www.lightgalleryjs.com/

Github地址：

https://github.com/sachinchoolur/lightGallery


Loading.io

Loading.io是一个平台，允许你自定义丰富的加载动画集合，并将创作导出为CSS关键帧动画、GIF、SVG或PNG文件。这些动画对于构建预加载器或描述异步活动的加载状态特别方便。


7.png

Loading.io提供的不仅仅是预加载器，该平台还允许你对文本甚至背景图案进行动画处理。还有一个loadBar.js库，可用于直接和交互式地将预加载器包含在网页上。


如何使用

Loading.io用法与Animista相似，不需要额外的软件包。只需访问网站，选择喜欢的加载程序，根据需要进行自定义，然后导出即可。


文档地址：https://loading.io/

Github地址：https://github.com/loadingio/


Skeleton elements


8.png

Skeleton loaders也可以归类为预装载器。但是，与典型的加载器不同，Skeleton loaders在灰色块中模拟加载内容的结构和外观，并指示每个块中加载的内容类型，例如图像、文本等。


Skeleton elements是一个流行的库，不但提供上述这类功能，也可以作为JavaScript框架的组件使用。


如何使用

Skeleton elements库可通过npm获得，也可通过CDN提供服务。如下所示，如果是简单的网页，你可以在标记头部分包含CDN：

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skeleton-elements@3.4.0/skeleton-elements.css" />
</head>

然后，通过skeleton-text和skeleton-block类创建Skeleton loaders：

<body>
  <h3 class="skeleton-text">Placeholder Header</h3>
  <p class="skeleton-text">
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
  <div class="skeleton-block" style="width:30%; height:50px"></div>
</body>

你还可以通过skeleton-effect-EFFECT_NAME类添加加载效果。下面是使用波浪效果的示例：

<body>
  <h3 class="skeleton-text skeleton-effect-wave">Placeholder Header</h3>
  <p class="skeleton-text skeleton-effect-wave">
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
  <div class="skeleton-block skeleton-effect-wave" style="width:30%; height:50px"></div>
</body>

文档地址：https://skeleton-elements.nolimits4web.com/

Github地址：https://github.com/nolimits4web/skeleton-elements


Micron

9.png

Micron是一个使用CSS动画创建且JavaScript控制的微交互库。简而言之，Micron允许你在单击元素时轻松地将多个动画附加到元素上。并且还有其他设置选项可帮助管理动画流。


此外，你可以绑定并从其他元素触发动画 - 例如，你可以让按钮元素激活要附加到另一div的动画。


如何使用

可以通过在标记中包含CSS和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>

然后，通过向元素添加data-micron属性来使用该库。下面是如何包含bounce交互的示例：

<div data-micron="bounce">Click to bounce</div>

文档地址：https://webkul.github.io/micron/docs.html#getting-started

Github地址：https://github.com/webkul/micron


Animxyz


10.png

Animxyz是一个易于使用的CSS交互动画库，允许通过属性进行自定义。你可以从各种动画选项中进行选择，并轻松与其他JavaScript框架，包括React和Vue集成。


该库也是使用SCSS创建的，用法多变，可以根据自己的喜好轻松自定义库源。


如何使用

可以使用npm安装此库，导入核心SASS mixins，并根据需要进行自定义。也可以直接将CDN链接到HTM文件的head部分中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">

可以使用xyz属性添加动画：

<div class="xyz-in" xyz="fade up big">I will animate in!</div>

文档地址：https://animxyz.com/docs

Github地址：https://github.com/ingram-projects/animxyz


AOS

Animate on scroll（AOS）是一个很有意思的库，允许你在滚动标记元素时对其进行动画处理。该库提供预定义动画，如淡入淡出、翻转、缩放等，并允许你在用户滚动自定义元素时将预定义动画附加到自定义元素。AOS还提供其他配置选项，允许你设置首选动画持续时间、延迟和运行次数。


11.gif


并且这个库不限制于提供的动画，你还可以附加通过keyframe属性创建的自定义动画。


如何使用

首先在网页中包含AOS CSS和JavaScript CDN链接，然后初始化库，如下所示：

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

现在，你可以使用data-aos属性在滚动时对标记元素进行动画处理：

<div data-aos="fade-up">
  This div will fade up when scrolled to
</div>

文档地址：https://michalsnik.github.io/aos/

Github地址：https://github.com/michalsnik/aos#1-initialize-aos

CSS

网站开发

小程序开发

HTML

上一篇：PHP8数组详解 - PHP8知识点解析 下一篇：百度搜索算法再次更新，旨在解决违规落地页带来的不良体验

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式，其通过简单易懂的界面设计，让用户在游戏中体验到乐趣，同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情

  • 2. 微信支付商户申请接入流程

    微信支付，是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案，包括多种支付方式，如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情

  • 3. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料，包含：房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书（由于我们公司其中一区域已有注册另外一公司，所以必须需要承诺书）

    查看详情

  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》，国家对非经营性互联网信息服务实行备案制度，对经营性互联网信息服务实行许可制度。

    查看详情

  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似，同时微信小程序支持通过已认证的微信公众号进行注册申请，无需进行单独认证即可使用，同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情