首页 > 其他分享> > animate.css的使用

animate.css的使用

2021-10-24 14:30:36 作者：互联网

animate.css是一个CSS3动画库，它的里面预设了许多的常用动画。因为它把不同动画效果绑定到的是不同的类里面，所以我们想要使用的话，只需要先引用animate.css文件，再把你想要使用的那个类添加到元素上面就可以了。

第一步：引入animate.css文件：

（可使用：http://www.bootcdn.cn/animate.css/的服务）

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

第二步：在需要添加效果的元素上加上想要实现的动画样式名

（第一个animated是必须添加的样式名，第二个是指定的动画样式名。）

<div class="animate__animated animate__slideInLeft">

其他补充：（采用jquery可以不修改现有代码，动态添加动画）

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

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

2.当动画效果执行完成后还可以通过以下代码添加事件

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

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

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

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

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

5.animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#yourElement{
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

常用的动画：

Attention seekers（寻求关注者）
bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat

Back entrances（返回入口）
backInDown
backInLeft
backInRight
backInUp

Back exits（返回出口）
backOutDown
backOutLeft
backOutRight
backOutUp

Bouncing entrances（弹跳入口）
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp

Bouncing exits（弹跳出口）
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

Fading entrances（淡出的入口）
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight

Fading exits（退场出口）
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft

Flippers（脚蹼）
flip
flipInX
flipInY
flipOutX
flipOutY

Lightspeed（光速）
lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft

Rotating entrances（旋转入口）
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

Rotating exits（旋转出口）
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

Specials（特殊）
hinge
jackInTheBox
rollIn
rollOut

Zooming entrances（缩放入口）
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

Zooming exits（缩放出口）
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Sliding entrances（滑动入口）
slideInDown
slideInLeft
slideInRight
slideInUp

Sliding exits（滑动出口）
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

参考文章：animate中文网

标签：动画,entrances,exits,yourElement,使用,animate,css
来源： https://blog.csdn.net/m0_61685599/article/details/120933275