animate.css下载与使用方法

发布时间:2019-06-24 22:22:00 来源:github 作者:青锋建网站
  animate.css动画是一堆很酷、有趣和跨浏览器的动画,供您在项目中使用。很好的强调,主页,滑块,和一般只是加水印效果。在网站设计中,经常用来增加交互效果和增加页面吸引力,以下是青锋建站给大家分享的animate.css动画的引入、使用、如何使用js操作animate.css动画增强可操作性。

animate.css动画引入

  animate.css下载网址:https://github.com/daneden/animate.css
  要在网站中使用动画.css,只需将样式表放到文档的<head>中,并将动画类与任何动画名称一起添加到元素中。就这样!你有一个CSS动画元素。超棒!
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>
  也可以使用CDN来引入
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

animate.css动画使用

若要动画元素,请将动画类添加到元素中。您可以包含无限循环的类。
<h1 class="animated infinite bounce delay-2s">Example</h1>
可以更改动画的持续时间、添加延迟或更改播放的次数:
.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

animate.css支持的动画类型


animate.css支持的动画类型
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      

使用js配合使用animate.css动画

  在此之前为大家发布一个好消息:为此青锋建站专业开发了JS调用animate.css动画库的万能调用代码,使用非常方便,不需要JS开发能力也可以方便使用,但是只适用于鼠标滑过时,内部执行动画,大家可以去免费下载。
1、当你将动画和Javascript结合起来的时候,你可以用动画做很多其他的事情。一个简单的例子:
const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
2、还可以检测animate.css动画何时结束:
const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })
3、您可以使用这个简单的JS函数来添加和删除animate.css动画:
function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)
    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)
        if (typeof callback === 'function') callback()
    }
    node.addEventListener('animationend', handleAnimationEnd)
}
  以上就是青锋建站给大家分享的animate.css动画引入与使用方法,青锋建站为大家开发了万能调用CSS3动画的JS代码,可去去相关页面下载。青锋建站,提供专业的高品质网站制作服务,包括网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。

 

分享到:

Copyright © 2016-2026 青锋建站 版权所有