animate.css

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用

引入

animate.css的最新版本是3.5.2,引入animate.css很容易,有以下几种方法

1、从官网下载

https://raw.github.com/daneden/animate.css/master/animate.css

2、通过npm安装

$ npm install animate.css

3、使用在线cdn

https://unpkg.com/animate.css@3.5.2/animate.min.css

效果演示

animate.css的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就行了

下面来详细介绍animate.css里面的类,主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类

【Attention(晃动效果)】

bounceflashpulserubberBandshakeheadShakeswingtadawobblejello

以在div上使用bounce为例

【bounce(弹性缓冲效果)】

bounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUp

【fade(透明度变化效果)】

fadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBig

【flip(翻转效果)】

flipflipInXflipInYflipOutXflipOutY

【rotate(旋转效果)】

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight

【slide(滑动效果)】

slideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp

【zoom(变焦效果)】

zoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUp

【special(特殊效果)】

hingerollInrollOutlightSpeedInlightSpeedOut

实际应用

在一般的使用中,直接在元素上添加animated和对应的类名即可

Document

.box{height:100px;width:100px;background-color:lightblue}

通过给JS添加或删除class,可以实现动态效果

Document

.box{height:100px;width:100px;background-color:lightblue}添加移除

varoBtn1=document.getElementById('btn1');varoBtn2=document.getElementById('btn2');varoBox=document.getElementById('box');oBtn1.onclick=function(){ oBox.classList.add('animated'); oBox.classList.add('flash');}oBtn2.onclick=function(){ oBox.classList.remove('flash');}

至于动画的配置参数,比如动画持续时间,动画的执行次数等等,可以在元素上自行定义,覆盖掉animate.css里面所定义的就行了

Document

.box{height:100px;width:100px;background-color:lightblue}.infinite{animation-iteration-count:infinite;}添加循环的动画效果移除

varoBtn1=document.getElementById('btn1');varoBtn2=document.getElementById('btn2');varoBox=document.getElementById('box');oBtn1.onclick=function(){ oBox.classList.add('animated'); oBox.classList.add('flash'); oBox.classList.add('infinite');}oBtn2.onclick=function(){ oBox.classList.remove('flash');}

好的代码像粥一样,都是用时间熬出来的

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180704A04TPH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券