html中flash的简单动画效果,使用Animate.css实现页面动画效果

很多网站产品页面都有一个动态效果，当页面向下滚动的时候，页面中的各个元素会加载一些细微的动画。这样做可以让页面载入看起来更具有视觉冲击，并且更好的将用户的视觉焦点引导至页面对应的位置。想要实现这类效果需要利用CSS3中提供的animation属性，让页面元素发生位移变化。当然相对于自己写，有一种更简便的办法，利用现成的样式文件类库就可以轻松实现，并且美观高效；

因为觉得有必要将内容详细整理一下，就将文章内容分成了两篇，分别介绍Animate和wow的使用；这一篇先来整理Animate。

Animate.css是一款利用CSS3中animation创建的，为动画而生的样式库；其中内置了几十种动画效果。通过调用Animate可以非常简单快速的创建页面动画。

Animate.css的使用：

1、从Animate.css官网直接下载样式文件，网站同时还提供了相应的样式效果预览；

2、将样式文件引入页面；

3、直接在页面样式中调用类名，其中animated这个类名是必须添加的，后面则是具体的样式效果类名；

动画类名称如下：

Class Name bounce flash pulse rubberBand

shake headShake swing tada

wobble jello bounceIn bounceInDown

bounceInLeft bounceInRight bounceInUp bounceOut

bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

fadeIn fadeInDown fadeInDownBig fadeInLeft

fadeInLeftBig fadeInRight fadeInRightBig fadeInUp

fadeInUpBig fadeOut fadeOutDown fadeOutDownBig

fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig

fadeOutUp fadeOutUpBig flipInX flipInY

flipOutX flipOutY lightSpeedIn lightSpeedOut

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft

rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight

rotateOutUpLeft rotateOutUpRight hinge jackInTheBox

rollIn rollOut zoomIn zoomInDown

zoomInLeft zoomInRight zoomInUp zoomOut

zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

slideInDown slideInLeft slideInRight slideInUp

slideOutDown slideOutLeft slideOutRight slideOutUp

heartBeat

除了使用默认的效果外，如果觉得不满意，还可以对效果进行自定义，比如设置效果延迟和速度；使用方法同样是在样式中添加对应的Delay Class 和Slow, Slower, Fast, and Faster Class。

Example

/* delay-2s 2s; delay-3s 3s; delay-4s 4s; delay-5s 5s */

Example

/* slow 2s; slower 3s; fast 800ms; faster 500ms */

除了基本的调用方法外，还可以使用动态调用，通过给JS添加或删除class，可以实现动态效果： 添加

移除

var oBtn1 = document.getElementById('btn1');

var oBtn2 = document.getElementById('btn2');

var oBox = document.getElementById('box');

oBtn1.onclick = function(){

oBox.classList.add('animated');

oBox.classList.add('flash');

}

oBtn2.onclick = function(){

oBox.classList.remove('flash');

}

如果动画是无限播放的，可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如： $(function(){

$('#dowebok').addClass('animated bounce');

});

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

$('#dowebok').addClass('animated bounce');

setTimeout(function(){

$('#dowebok').removeClass('bounce');

}, 1000);

});

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

animate-duration: 2s; //动画持续时间

animate-delay: 1s; //动画延迟时间

animate-iteration-count: 2; //动画执行次数

}

注意添加浏览器前缀。