animate.css 兼容ie,animate.css一个跨浏览器的CSS动画库

animate.css一个跨浏览器的CSS动画库。简单易用。虽然已Star，但每次使用使用时都要在stars里查找。。。当然啦，更多动画库可以参考这里。

如何使用

要在网站中使用animate.css，只需将样式表放到文档的

中，然后将动画类与任何动画名称一起添加到元素中就可以了。

动画

要设置元素的动画，请将该类添加animated到元素中。您可以包含infinite无限循环的类。最后，您需要向元素添加以下类之一：Class NamebounceflashpulserubberBand

shakeheadShakeswingtada

wobblejellobounceInbounceInDown

bounceInLeftbounceInRightbounceInUpbounceOut

bounceOutDownbounceOutLeftbounceOutRightbounceOutUp

fadeInfadeInDownfadeInDownBigfadeInLeft

fadeInLeftBigfadeInRightfadeInRightBigfadeInUp

fadeInUpBigfadeOutfadeOutDownfadeOutDownBig

fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig

fadeOutUpfadeOutUpBigflipInXflipInY

flipOutXflipOutYlightSpeedInlightSpeedOut

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft

rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight

rotateOutUpLeftrotateOutUpRighthingejackInTheBox

rollInrollOutzoomInzoomInDown

zoomInLeftzoomInRightzoomInUpzoomOut

zoomOutDownzoomOutLeftzoomOutRightzoomOutUp

slideInDownslideInLeftslideInRightslideInUp

slideOutDownslideOutLeftslideOutRightslideOutUp

heartBeat

完整的例子：

Example

可以更改动画的持续时间、添加延迟或更改播放次数：.yourElement {

animation-duration: 3s;

animation-delay: 2s;

animation-iteration-count: infinite;

}

与javascript一起使用

当你把animate.css和javascript结合在一起时，你可以用它做很多其他的事情。一个简单的例子：const element = document.querySelector('.my-element')

element.classList.add('animated', 'bounceOutLeft')

您还可以检测动画何时结束：const element =  document.querySelector('.my-element')

element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

您可以使用此简单函数添加和删除动画：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)

}

像这样使用：animateCSS('.my-element', 'bounce')

// or

animateCSS('.my-element', 'bounce', function() {

// Do something after animation

})

注意，这些示例使用了ES6的const声明，放弃了对IE10和一些老化浏览器的支持。如果您愿意，将const转换为var声明，IE10和一些旧的浏览器将得到支持(它们仍然需要提供classList支持)。

设置延迟和速度

延迟类

可以直接在元素的class属性上添加延迟，如下所示：

Example

Class NameDelay Timedelay-2s2s

delay-3s3s

delay-4s4s

delay-5s5s

注意：默认延迟仅为1秒到5秒。如果需要自定义延迟，请直接将其添加到您自己的CSS代码中。

Slow, Slower, Fast, and Faster 类

可以通过添加这些类来控制动画的速度，示例如下：

Example

Class NameSpeed Timeslow2s

slower3s

fast800ms

faster500ms

注意：动画类的默认速度为1。如果需要自定义持续时间，请直接将其添加到您自己的CSS代码中。

更多细节查看这里。