h5页面动画技巧:使用animation.css让你的页面动起来

animation.css是一个开源项目,其中包含许多元素动画效果。通过简单的引用,即可实现非常多的动画效果。

首先在页面引入css,



引入jquery.js

jquery插件

$.fn.extend({ animateCss: function (animationName) {
var animationEnd = ‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’;
$(this).addClass(‘animated ‘ + animationName).one(animationEnd, function() {
$(this).removeClass(‘animated ‘ + animationName);

    });
}

});

使用

$(‘#yourElement’).animateCss(‘bounce’);

github地址 https://github.com/daneden/animate.css

动画演示页面:http://daneden.github.io/animate.css/

0%