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

时间 2019-11-08

标签 animate.css animate css 一款有意思 css3 动画栏目 CSS 繁體版

原文原文链接

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

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

使用方式：github

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

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

例子：动画

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

当你将 animate.css 与 jQuery 一块儿使用或者添加你本身的 CSS 规则时，你能够用 animate.css 作一大堆其余的事，使用 jQuery 动态添加动画：spa

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

你也能够检测一个动画是否结束了：code

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

注意： jQuery.one() 用在你但愿只执行事件一次的时候。blog

你能够改变更画的持续时间，添加延迟或改变它执行的次数：token

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

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