首页 > > 网页制作 > css >

Animate.css(一款有意思的CSS3动画库)

2018-06-24 02:04:18来源：未知阅读 ()

官网：https://daneden.github.io/animate.css/

animate.css 是一款跨浏览器的动画库。

使用方式：

在页面的 <head>中引入样式文件：

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

例子：

<h1 class="animated infinite bounce">Example</h1>

当你将 animate.css 与 jQuery 一起使用或者添加你自己的 CSS 规则时，你可以用 animate.css 做一大堆其他的事，使用 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;
}

注意：确保用供应商的前缀（webkit, moz, 等等）来替换上面CSS中的 vendor

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：absolute

热门词条

最新资讯

热门关注

热门标签