相信很多人都了解过CSS3的动画效果,也曾写过CSS3的动画,那么也一定知道有一款封装了很多CSS3动画的插件:Animate.css。
如果不知道也没关系,先来简单的介绍一下:
首先在页面引入Animate.css样式表文件,里面定义了很多动画并提供了动画对应的类名,用户只需要将animated和动画对应的类名添加到元素上,即可使该元素具有相应的动画效果,如:
<div class="animated fadeIn"></div>
animated是固定必需的类名,fadeIn则是动画对应的类名,这里是渐现效果。
地址:https://daneden.github.io/animate.css/
相信不少人有这样一个需求:点击某个元素或者某个交互动作后,展示动画效果。那么仅仅通过添加样式类必然是无法实现的。
我们可以用Javascript和jQuery稍微封装一下:
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
//封装动画方法
function animate(selector, animateName, callback) {
$(selector).addClass('animated ' + animateName).on(animationEnd, function () {
//移除动画样式
$(selector).removeClass('animated ' + animateName);
//动画播放完毕后执行回调函数
if (typeof callback === 'function') {
callback.call(this);
}
});
}
参数说明:
selector:jQuery选择器
animateName:animate.css中动画对应的类名
callback:动画执行完毕后的回调函数
使用方法:
<div id="test">鼠标悬浮有动画效果</div>
$('#test').on('mouseover', function () {
animate(this, 'rubberBand');
});
效果展示:
晃动效果
bounce flash pulse rubberBand shake headShake swing tada wobble jello
弹性效果
bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
渐隐渐现
fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig
翻转效果
flip flipInX flipInY flipOutX flipOutY
旋转效果
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
滑动效果
slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp
变焦效果
zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
特殊效果
hinge rollIn rollOut lightSpeedIn lightSpeedOut
感谢翻阅拙作,敬请斧正。
版权声明:本文由不落阁原创出品,转载请注明出处!
2019-09-24 17:26回复