在开发鸡西企业的网站时需要用到动画效果(
查看演示),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);
});