【Animate.css】CSS 动画库

学习委员

关注

发布于: 2021 年 02 月 01 日

简介

官网：Animate.css

看看来自官方的介绍：Animate.css 就像嗑水那么简单的 CSS 动画。

Animate.css 是一个纯 CSS 动画库。

不兼容 IE10 以下的 IE 浏览器。

其他各大浏览器只要不是太旧的版本都能兼容。

所以说兼容性还是蛮强的。

官方给出了 70 多种动画特效。

这些动画其实大多数都不是很难，就是不愿意去写。所以这个 CSS 库真的很适合懒人（所有人）。

基础用法

首先下载（引入）Animate.css

可以到 github 上下载源码（在官网也能找到）~

<!-- 引入 --><head>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"></head>

复制代码

我用一个 div 简单举个小例子

<div id="box"></div>

复制代码

给这个 div 一点样式，让它能够显示出来。

/* CSS代码 */
#box {  width: 100px;  height: 100px;  background: paleturquoise;  margin: 100px auto;}

/* 样式是随便写的，只要能用肉眼看到这个div就行 */

复制代码

在这个基础上，直接给 id 为 box 的 div 加类就行了。

首先要有一个基础类 “animated” ，如果没这个类，其他都是无用功！

然后在后面再加一个动画类，就能实现动画效果了（这里我用那个了 bounce 这个动画）。

<div id="box" class="animated bounce"></div>

复制代码

这里加了 “bounce” 这个动画效果

官方还给出很多效果，详情可查看官网

除了动画效果，通常我们还有一些别的需求。比如动画循环执行、动画延时执行、动画执行时长。这些设置，Animate.css 都给我们实现了。同样也只需配置几个类名，完全不用 JS 控制。

需要延时执行，官方给出上面几个类让我们选择。

delay-2s：2 秒后再执行动画

delay-3s：3 秒后再执行动画

delay-4s：4 秒后再执行动画

delay-5s：5 秒后再执行动画

上面这几个类是设置动画的执行时长。

slow：用 2 秒执行完动画

slower：用 3 秒执行完动画

fast：用 0.8 秒执行完动画

faster：用 0.5 秒执行完动画

最后，如果要设置无限重复执行动画，可用下面这个类

infinite

以上就是基本的设置。

用 JS 控制

上面的例子，都是在页面加载后立即执行动画。

有时候需要触发某些事件后才给出相应的动画。比如点一下按钮才会出现动画。这时官方也给出一个简单的 JS 例子。

<div id="box"></div><button id="btn">btn</button>
<!-- 设置了一个div和一个按钮 -->

复制代码

/* CSS代码 */
#box {  width: 100px;  height: 100px;  background: paleturquoise;  margin: 100px auto;}

复制代码

/* JS代码 *//* 定义animateCss函数（传过来的元素，动画名，回调函数） */
function animateCss(element, animationName, callback) {
  /* 获取传过来的 */  const node = document.querySelector(element);    /* 给元素加上基础类animated，还有动画类 */  node.classList.add('animated', animationName);    function handleAnimationEnd() {      /* 移除基础类和动画类 */    node.classList.remove('animated', animationName);        /* 解除当前元素的事件监听 */    node.removeEventListener('animationend', handleAnimationEnd);    /* 如果有回调函数，就执行回调函数 */        if (typeof callback === 'function') callback();  }    /* 通过事件监听，当动画结束后，执行handleAnimationEnd函数 */  node.addEventListener('animationend', handleAnimationEnd);  }    /*点击按钮后触发animateCss函数*/btn.onclick = function() {  animateCss('#box', 'bounce')};

复制代码

这个例子用到了 JS 的事件监听：addEventListener

animationend：当 CSS3 动画结束后。

animationend 是一个事件，就类似于 onclick。

自定义动画

要修改或者添加一个动画类，或者添加一个参数类，可以参照 Animate.css 里的写法。在自己的 css 文件里写（不建议直接修改 Animate.css 文件）。

比如要修改动画默认执行时间

先找到 animated 这个类

我搜到在这里，然后把.animated 这个类复制出来，放到自己的 css 文件里面

这里我把默认执行时间改成 2 秒。

这样就会覆盖 Animate 里的默认 1 秒。

因为不是直接改 Animate.css 这个库，所以其他页面是不会受到影响的。

如果需要添加其他属性，可以抄 Animate.css 的写法。

比如我需要一个 300 毫秒延时执行。可以这样写

/* CSS代码 */
.animated.delay-03s {  -webkit-animation-delay: .3s;  animation-delay: .3s;}

复制代码

发布于: 2021 年 02 月 01 日阅读数: 49

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

发布

暂无评论

创作场景

【Animate.css】CSS 动画库

简介

基础用法

用 JS 控制

自定义动画

学习委员

评论