鸡西网站建设制作优化设计[SEO]
本页定位
在线咨询

Animate.css动画库使用详解 V3.7

假装绅士🎩3个月前245去下载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);
});

资源下载

恭喜,此资源为免费资源,请先

文件版本:V3.7

文件大小:60KB

文件语言:CSS代码

更新日期:2019-03-31

系统要求:无

技术交流:QQ群 7717114

全部评论: 0
登录没有账号 切换注册

忘记密码 ?

注册已有账号 切换登录