Animation.css super CSS3 animation library, three lines of code to do H5 page animation effects!

Time:2020-1-18

Animation.css super CSS3 animation library, three lines of code to do H5 page animation effects!

1、 Basic usage

Introduce CSS dependency

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

Add the following to the class of the element

  1. animated (Mandatory)
  2. Infinite (optional) infinite repetition
  3. bounce (MandatoryAnimation styleRefer to the table below
  4. Delay-2s (optional) delay appears
    <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

It’s finished. Refresh the page to see the animation effect.
That’s the basic usage
The official also gives some advanced usage as follows


2、 Advanced usage

JavaScript example of dynamic call animation

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)
}


3、 On the basis of the official example, after a little modification

Because the official example uses queryselector, only the first element that meets the requirements will be selected.
And the duration is only slow (2S), slow (3S), fast (800ms), fast (500ms)
So I slightly modified the original JS syntax (part ES6) that I still use
Where the selector element is changed to select all elements that meet the requirements
Add the times parameter, which can be 2000ms or 2S

/**
 *Element: selector such as id.class div
 *Animationname: refer to the official website of animation.css for animation name, for example, fadein
 *Times: duration such as 200ms | 2S
 *Callback: callback function
 */
function animateCss(element, animationName,times, callback) {
    const nodes = document.querySelectorAll(element)
    nodes.forEach((node => {
        if(times) node.style.setProperty('animation-duration', times, 'important');
        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)
    }))
}

Example

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


Official website of animate.css

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



In addition, this article has also been published on my homepage. Welcome to check it
https://zzzmh.cn/single?id=59

Recommended Today

[reading notes] calculation advertising (Part 3)

By logm This article was originally published at https://segmentfault.com/u/logm/articles and is not allowed to be reproduced~ If the mathematical formula in the article cannot be displayed correctly, please refer to: Tips for displaying the mathematical formula correctly This article isComputing advertising (Second Edition)Reading notes. This part introduces the key technology of online advertising, which is […]