animate.css一个跨浏览器的CSS动画库

2019-04-16243次阅读css3

animate.css一个跨浏览器的CSS动画库。简单易用。虽然已Star,但每次使用使用时都要在stars里查找。。。

如何使用

要在网站中使用animate.css,只需将样式表放到文档的<head>中,然后将动画类与任何动画名称一起添加到元素中就可以了。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

动画

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

Class Name   
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat  

完整的例子:

<h1 class="animated infinite bounce delay-2s">Example</h1>

看看这里所有的动画!

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

.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属性上添加延迟,如下所示:

<div class="animated bounce delay-2s">Example</div>
Class NameDelay Time
delay-2s2s
delay-3s3s
delay-4s4s
delay-5s5s

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

Slow, Slower, Fast, and Faster 类

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

<div class="animated bounce faster">Example</div>
Class NameSpeed Time
slow2s
slower3s
fast800ms
faster500ms

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

更多细节查看这里

 

上一篇: gulp4构建任务实例  下一篇: 你必须知道的10个Composer最佳实践 [转]  

animate.css一个跨浏览器的CSS动画库相关文章