代码拉取完成,页面将自动刷新
同步操作将从 ltpower/Animate.css 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
#Animate.css
Animate.css 一款强大的预设css3动画库
IE9及以上
1 首先在head中引入下载的animate.css文件
<link rel="stylesheet" href="css/animate.css">
2 然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。
<div class="animated bounce"></div>
这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3 如果说想给某个元素动态添加动画样式,可以通过jquery来实现:
$("#yourElement").on("click",function(){
$("this").addClass('animated bounce');
})
4 当动画效果执行完成后添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$("body").css("background","black")
});
5 有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
setTimeout(function(){
$('#yourElement').removeClass('bounce');
}, 1000);
6 至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。
#yourElement{
-webkit-animation-duration: 3s; /* 动画持续时间*/
-webkit-animation-delay: 1s; /* 动画延迟时间*/
-webkit-animation-iteration-count: 2; /*动画执行次数*/
animation-duration: 3s;
animation-delay: 1s;
animation-iteration-count: 2;
width: 100px;
height: 100px;
background: red;
}
注意这些属性还要记得加上各浏览器的前缀。
可以根据实际项目查看各种动画demo参考
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。