【Web前端】Animate.css 一款强大的预设css3动画库

Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。

用法

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

<h1 class="animate__animated animate__bounce">An animated element</h1>

这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

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

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

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){
$('#jq22').addClass('animated bounce');
});

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){
$('#jq22').addClass('animated bounce');
setTimeout(function(){
$('#jq22').removeClass('bounce');
}, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

<h1>jq22{</h1>animate-duration: 2s;    //动画持续时间
animate-delay: 1s;    //动画延迟时间
animate-iteration-count: 2;    //动画执行次数</pre>
}

声明：

本站所有分享的资源，如无特殊说明或标注，均为网络收集整理。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。点击联系我们处理版权问题