官网:https://daneden.github.io/animate.css/animate.css 是一款跨浏览器的动画库。使用方式:在页面的 <head>中引入样式文件:<head><link rel="stylesheet ...
官网:https://daneden.github.io/animate.css/
animate.css
是一款跨浏览器的动画库。
使用方式:
在页面的 <head>
中引入样式文件:
<head><link rel="stylesheet" href="animate.min.css"></head>
给你想要添加动画效果的元素加上 animated
样式,如果想要动画循环执行的话,你需要加上 infinite
样式。
- 具体样式在官网一一列举出来啦,而且可以直接查看效果,很炫酷啊!
例子:
<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
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:Animate.css(一款有意思的CSS3动画库)
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。