components / animate.css
简单添加水的CSS动画
This package is not auto-updated.
Last update: 2016-04-05 17:35:37 UTC
README
简单添加水的CSS动画
animate.css 是一组供您在项目中使用的酷炫、有趣且跨浏览器的动画。非常适合强调、主页、滑块和一般的“加水即得”酷炫效果。
基本用法
在文档的
<head>中包含样式表<head> <link rel="stylesheet" href="animate.min.css"> </head>
将
animated类添加到您想要动画化的元素。您还可以添加infinite类以实现无限循环。最后，您需要添加以下其中一个类
bounceflashpulserubberBandshakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
完整示例
<h1 class="animated infinite bounce">Example</h1>
用法
要在您的网站上使用 animate.css，只需将样式表添加到文档的 <head> 中，并将 animated 类添加到元素中，并添加任何动画名称。就这样！您已经有一个CSS动画元素了。太棒了！
<head> <link rel="stylesheet" href="animate.min.css"> </head>
当与jQuery结合使用或添加自己的CSS规则时，您可以使用 animate.css 做很多事情。轻松使用jQuery动态添加动画
$('#yourElement').addClass('animated bounceOutLeft');
您还可以检测动画何时结束
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
在此处观看如何使用 Animate.css 与 jQuery 的视频教程。
注意： 当您只想执行事件处理器一次时，请使用 jQuery.one()。更多信息 在此处。
您可以更改动画的持续时间，添加延迟或更改播放次数
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
注意：请确保在CSS中将“vendor”替换为相应的供应商前缀（webkit，moz等）
自定义构建
animate.css 由 Grunt 支持，您可以轻松创建自定义构建。首先，您需要 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,
"jello":true
}
许可
Animate.css 采用 MIT 许可协议。（https://open-source.org.cn/licenses/MIT）
贡献
这里推荐使用拉取请求。对于拉取请求和问题的缓慢处理，我提前表示歉意。提交拉取请求时，我只遵守两条规则：匹配命名约定（驼峰式命名法，分类 [淡入、弹跳等]）并在 pen 中展示提交动画的演示。最后一点非常重要。