Animate.css动画库使用详解
⚠️ © 软件著作权归作者所有；本站所有软件均来源于网络，仅供学习使用，请支持正版！
在开发鸡西企业的网站时需要用到动画效果(查看演示)，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);
});
