Animate.css动画库使用详解

臭保安👮2年前 (2019-03-31)1565去下载A+A-

⚠️ © 软件著作权归作者所有；本站所有软件均来源于网络，仅供学习使用，请支持正版！

在开发鸡西企业的网站时需要用到动画效果(查看演示)，animation动画属性是Css3的核心属性之一，它把之前必须Flash或者Js才能做出来的效果通过Css3做出来。animation动画属性学好了可以延伸很多很特别的效果，让你的网站从此脱颖而出，下面由鸡西网站设计总结出所有Animate.css的动画例子分享给大家，希望给正在CSS3学习路上的前端工作者给予帮助：

1、下载Animate.css文件

前往本站分享的下载通道获取Animate.css

2、调用Animate.css文件

首先将下载到的animate.min.css文件放到文档的head中，然后为页面中的元素添加Animate.css的类名。调用animate.min.css文件

<head>
    <link rel="stylesheet" href="animate.min.css">
</head>

3、实现animation动画

如果要给元素添加动画效果，先要给元素添加animated类。若需要循环播放动画效果，再添加infinite类。最后，需要给元素添加以下动画效果中的一个。 Animate.css为我们提供了14个动画类型，共计77个动画效果，请根据实际需求调用相应的类名，以下类名可进行点击，观察顶部LOGO的动画变化。

[01]Attention Seekers

bounce flash pulse rubberBand shake swing tada wobble jello heartBeat

[02]Bouncing Entrances

bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp

[03]Bouncing Exits

bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

[04]Fading Entrances

fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig

[05]Fading Exits

fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig

[06]Flippers

flip flipInX flipInY flipOutX flipOutY

[07]Lightspeed

lightSpeedIn lightSpeedOut

[08]Rotating Entrances

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

[09]Rotating Exits

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

[10]Sliding Entrances

slideInUp slideInDown slideInLeft slideInRight

[11]Sliding Exits

slideOutUp slideOutDown slideOutLeft slideOutRight

[12]Zoom Entrances

zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp

[13]Zoom Exits

zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

[14]Specials

hinge jackInTheBox rollIn rollOut

4、设置元素动画的延迟和速度

延迟类

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

<div class="animated bounce delay-2s">鸡西网站开发</div>

类名	延迟时间
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

注默认延迟从1秒到5秒不等。如果您需要自定义延迟，直接将其添加到您自己的CSS代码中。

速度类

可以通过添加这些类来控制动画的速度，如下所示： <div class=”animated bounce faster”>鸡西网站开发</div>

类名	速度时间
slow	2s
slower	3s
fast	800ms
faster	500ms

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

一个完整的使用案例

<h1 class="animated infinite bounce delay-2s">七网科技</h1>

可以任意更改动画的持续时间、延迟时间、播放次数

.logo{
    animation-duration: 3s;//动画持续时间
    animation-delay: 2s;//动画延迟时间
    animation-iteration-count: infinite;//动画执行次数
}

与ES6结合使用

当你将Animate.css动画和Javascript结合起来的时候，你可以实现更加完美的动画效果。

[01]一个简单的例子：

const element = document.querySelector('.my-element');
element.classList.add('animated', 'bounceOutLeft');

[02]当动画效果执行完成后还可以通过以下代码添加事件：

const element = document.querySelector('.my-element');
element.classList.add('animated', 'bounceOutLeft');
element.addEventListener('animationend', function() { doSomething() });

[03]可以使用这个简单的函数来添加和删除动画：

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

注const声明是ES6的方法，不支持比较老的浏览器。可以根据实际使用情况自有切换var声明。

与Javascript或Jquery结合使用

[01]如果想给某个元素动态添加动画样式，可以通过jquery来实现：

$('#yourElement').addClass('animated bounceOutLeft');

[02]当动画效果执行完成后还可以通过以下代码添加事件：

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

[03]你也可以通过JavaScript或jQuery给元素添加这些class，比如：

$(function(){
    $('#logo').addClass('animated bounce');
});

[04]有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将class删除，比如：

$(function(){
    $('#logo').addClass('animated bounce');
    setTimeout(function(){
        $('#logo').removeClass('bounce');
    }, 1000);
});

资源下载此资源仅限注册用户下载，请先

技术交流QQ群 7717114

喜欢(1)