正在加载中,请稍后
author 首页 关于 笔记

按回车搜索更多

Animate.css 超强CSS3动画库,三行代码搞定H5页面动画特效!
2019-01-24 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}

一、基本用法


引入CSS依赖

  1. <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">


在元素的Class中加以下内容

  1. animated (必选)
  2. infinite (可选) 无限重复
  3. bounce (必选) 动画样式 参考下方表格
  4. delay-2s (可选) 延迟出现
  1. <div class="animated infinite bounce delay-2s"><h1>Example</h1></div>
Class Name
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 flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

效果演示


#bounce

Animate.css - bounce


#heartBeat

Animate.css - heartBeat


headShake

Animate.css - headShake



大功告成,刷新页面即可查看动画效果。
基本用法就是这些
官方还给出了一些进阶用法如下


二、进阶用法


动态调用动画的Javascript例子,来自官方demo,可在任意时间调用动画

  1. function animateCss(element, animationName, callback) {
  2. const node = document.querySelector(element)
  3. node.classList.add('animated', animationName)
  4. function handleAnimationEnd() {
  5. node.classList.remove('animated', animationName)
  6. node.removeEventListener('animationend', handleAnimationEnd)
  7. if (typeof callback === 'function') callback()
  8. }
  9. node.addEventListener('animationend', handleAnimationEnd)
  10. }

三、在官方例子基础上,稍加修改以后


由于官方例子用的是querySelector,故只会选中第一个符合要求的元素。
并且持续时间只有slow(2s)、slower(3s)、fast(800ms)、faster(500ms)
故我稍加修改,依然用的原生JS语法(部分ES6)
其中选择器element改为选中所有符合要求的元素
新增times参数,可以是2000ms或者2s

  1. /**
  2. * element: 选择器 例如 #id | .class | div
  3. * animationName: 动画名称 参考animate.css官网 例如fadeIn
  4. * times: 持续时间 例如 200ms | 2s
  5. * callback: 回调函数
  6. */
  7. function animateCss(element, animationName,times, callback) {
  8. const nodes = document.querySelectorAll(element)
  9. nodes.forEach((node => {
  10. if(times) node.style.setProperty('animation-duration', times, 'important');
  11. node.classList.add('animated', animationName)
  12. function handleAnimationEnd() {
  13. node.classList.remove('animated', animationName)
  14. node.removeEventListener('animationend', handleAnimationEnd)
  15. if (typeof callback === 'function') callback()
  16. }
  17. node.addEventListener('animationend', handleAnimationEnd)
  18. }))
  19. }

例子

  1. animateCss('.post', 'pulse');
  2. animateCss('.post', 'pulse','200ms');
  3. animateCss('.post', 'pulse','200ms',function(){//do something});

最终效果演示




Animate.css



官网

https://daneden.github.io/animate.css/
https://github.com/daneden/animate.css

提交
评论区空空如也,赶紧添加一条评论吧 评论 {{counts.commentCount}}
{{comment.name}} {{comment.os}} {{comment.browser}}
{{dateFormatter(comment.createTime)}}

{{comment.message}}

{{comment.reply.name}} {{comment.reply.os}} {{comment.reply.browser}}
{{dateFormatter(comment.reply.createTime)}}

{{comment.reply.message}}

zzzmh
关于我 留言板

网址导航

{{alert.message}}
留言板 * 站长不经常查看信箱 若有重要事宜联系邮箱 admin@zzzmh.cn 取消 发送