animate.css

最新推荐文章于 2024-05-29 09:35:06 发布

.NET跨平台

最新推荐文章于 2024-05-29 09:35:06 发布

阅读量720

点赞数

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.csdn.net/WuLex

版权

HTML5+CSS|CSS3 专栏收录该内容

153 篇文章 10 订阅

订阅专栏

Every feedback is welcome!

让添加CSS动画像喝水一样容易

animate.css是一系列酷炫，有趣，跨浏览器的动画，供您在项目中使用。

Installation

Install via npm:

$ npm install animate.css --save

or yarn:

$ yarn add animate.css

用法

在您的网站上使用animate.css，只要简单地把样式表插入到文档中的 <head>中，并为需要动画的元素添加一个CSS类名animate__animated即可，以及动画的名称。就是这样！你就有了一个CSS动画效果。超强！

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

使用CDN托管版本 by CDNJS

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

`Animations`

要为元素设置动画，请将“ animated”类添加到元素。您可以包含无限循环类“无限”。最后，您需要向元素添加以下类之一：

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`
`heartBeat`

Full example:

<h1 class="animated infinite bounce delay-2s">Example</h1>

Check out all the animations here!

可以更改动画的持续时间，添加延迟或更改动画播放的次数：

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Usage with Javascript

将animate.css与Javascript结合使用时，您可以使用animate.css进行大量其他工作。一个简单的例子：

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

您还可以检测动画何时结束：

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

您可以使用以下简单功能来添加和删除动画：

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

并像这样使用它：

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
  // Do something after animation
})

注意，这些示例使用的是ES6的const声明，放弃了对IE10和某些老化的浏览器的支持。如果愿意，可以将const更改为var声明，然后将IE10转换为某些旧浏览器。

Setting `_Delay_` and `_Speed_`

Delay Class

可以直接在元素的class属性上添加延迟，如下所示：

<div class="animated bounce delay-2s">Example</div>

Class Name	Delay Time
`delay-2s`	`2s`
`delay-3s`	`3s`
`delay-4s`	`4s`
`delay-5s`	`5s`

默认延迟仅为1秒至5秒。如果您需要自定义延迟，请将其直接添加到自己的CSS代码中。

Slow, Slower, Fast, and Faster Class

通过添加这些类，可以控制动画的速度，如下所示：

<div class="animated bounce faster">Example</div>

Class Name	Speed Time
`slow`	`2s`
`slower`	`3s`
`fast`	`800ms`
`faster`	`500ms`

animated 类的默认速度为1s.如果您需要自定义持续时间，请将其直接添加到自己的CSS代码中。

Custom Builds

Animate.css由gulp.js驱动，这意味着您可以轻松创建自定义版本。首先，您需要Gulp和所有其他依赖项：

$ cd path/to/animate.css/
$ npm install

接下来，运行npx gulp来编译您的自定义版本。例如，如果只需要一些“注意力吸引者”，则只需编辑“ animate-config.json”文件以仅选择要使用的动画。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "headShake": true,
  "swing": true,
  "tada": true,
  "wobble": true,
  "jello":true
}

Animate.css让添加CSS动画像喝水一样容易

animate.css是一堆很酷的，有趣的，跨浏览器的动画效果库，你可以随意在你的项目中使用。用在你想要突出的任何地方，如主页，滑块，这像喝水一样容易，迷死人了。

用法

在您的网站上使用animate.css，只要简单地把样式表插入到文档中的<HEAD>中，并为需要动画的元素添加一个CSS类名即可，以及动画的名称。就是这样！你就有了一个CSS动画效果。超强！

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

注* 示例

<h1 class="animated bounceOut">Animate.css</h1>

当与jQuery结合起来，你可以自己决定何时启用这些动画，通过jQuery动态添加使用动画，你可以做的事情更多：

$('#yourElement').addClass('animated bounceOutLeft');

你还可以检测动画结束事件：

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

注：jQuery.one（） 最多执行事件处理一次。点击此处了解详情。

您可以更改动画的持续时间，增加延迟或改变显示次数：

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意：一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”

自定义Build(构建)

Animate.css支持Grunt，您可以很容易地创建自定义Build流程。首先，你需要Grunt和其他依赖关系：

$ cd path/to/animate.css/
$ sudo npm install

接下来，运行grunt watch以更改和编译您的自定义生成文件。例如你只需要一部分动画效果，只需编辑 animate-config.json 文件，并选择你需要使用的动画。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}

.NET跨平台

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
animate.css

Every feedback is welcome!让添加CSS动画像喝水一样容易animate.css是一系列酷炫，有趣，跨浏览器的动画，供您在项目中使用。InstallationInstall via npm:$ npm install animate.css --saveor yarn:$ yarn add animate.css用法在您的网站上使用animate.cs...
复制链接

扫一扫