Animate.css的使用方法,一个前端动画库

浏览: 562次 日期:2017年12月19日 19:38:12 作者:青格勒

Animate.css是国外一个程序员《丹尼尔·伊登》所写的一个css动画库,这个css动画库包含了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果,这些效果能满足前端的日常需要,而且你也可以在上面进行改造。

 

因为Animate.css使用了CSS3的新属性,所以老版本的浏览器是不支持的,目前能被支持的浏览器有:IE10+、Firefox、Chrome、Opera、Safari。

 

加这个动画之后低版本的浏览器没有任何的bug,除了没有动画之外0.0

 

整个库压缩之前24KB,压缩之后最小能达到18kb,这个插件要是在移动端运行,是一个不错的选择,祝你们用的愉快。

 

Animate.css官网地址 ————-> 点击进入

Animate.css GitHub地址 ———> 点击进入

建议对GitHub不熟悉的可以直接进入官网下载。

下载之后就比较简单了

直接link引进去

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

然后在想要有动画的div上加两个class,一个是Animate.css的主要控制时间的animated,这个class是必须添加的,另一个是主要管理动画的比如(flipOutX、bounceIn、bounceOut等等)。

下面我简单的只做了一个例子,其实就是把所有的动画都在页面写了一遍,有兴趣的同学可以点击下方的运行看看。

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div id="cenggel"><a href="http://cenggel.com/">CGLweb前端</a></div>
<div id="btn_box">
    <div date-class="animated bounce">bounce</div>
    <div date-class="animated flash">flash</div>
    <div date-class="animated pulse">pulse</div>
    <div date-class="animated rubberBand">rubberBand</div>
    <div date-class="animated shake">shake</div>
    <div date-class="animated swing">swing</div>
    <div date-class="animated tada">tada</div>
    <div date-class="animated wobble">wobble</div>
    <div date-class="animated jello">jello</div>
    <div date-class="animated bounceIn">bounceIn</div>
    <div date-class="animated bounceInDown">bounceInDown</div>
    <div date-class="animated bounceInLeft">bounceInLeft</div>
    <div date-class="animated bounceInRight">bounceInRight</div>
    <div date-class="animated bounceInUp">bounceInUp</div>
    <div date-class="animated bounceOut">bounceOut</div>
    <div date-class="animated bounceOutDown">bounceOutDown</div>
    <div date-class="animated bounceOutLeft">bounceOutLeft</div>
    <div date-class="animated bounceOutRight">bounceOutRight</div>
    <div date-class="animated bounceOutUp">bounceOutUp</div>
    <div date-class="animated fadeIn">fadeIn</div>
    <div date-class="animated fadeInDown">fadeInDown</div>
    <div date-class="animated fadeInDownBig">fadeInDownBig</div>
    <div date-class="animated fadeInLeft">fadeInLeft</div>
    <div date-class="animated fadeInLeftBig">fadeInLeftBig</div>
    <div date-class="animated fadeInRight">fadeInRight</div>
    <div date-class="animated fadeInRightBig">fadeInRightBig</div>
    <div date-class="animated fadeInUp">fadeInUp</div>
    <div date-class="animated fadeInUpBig">fadeInUpBig</div>
    <div date-class="animated fadeOut">fadeOut</div>
    <div date-class="animated fadeOutDown">fadeOutDown</div>
    <div date-class="animated fadeOutDownBig">fadeOutDownBig</div>
    <div date-class="animated fadeOutLeft">fadeOutLeft</div>
    <div date-class="animated fadeOutLeftBig">fadeOutLeftBig</div>
    <div date-class="animated fadeOutRight">fadeOutRight</div>
    <div date-class="animated fadeOutRightBig">fadeOutRightBig</div>
    <div date-class="animated fadeOutUp">fadeOutUp</div>
    <div date-class="animated fadeOutUpBig">fadeOutUpBig</div>
    <div date-class="animated flip">flip</div>
    <div date-class="animated flipInX">flipInX</div>
    <div date-class="animated flipInY">flipInY</div>
    <div date-class="animated flipOutX">flipOutX</div>
    <div date-class="animated flipOutY">flipOutY</div>
    <div date-class="animated lightSpeedIn">lightSpeedIn</div>
    <div date-class="animated lightSpeedOut">lightSpeedOut</div>
    <div date-class="animated rotateIn">rotateIn</div>
    <div date-class="animated rotateInDownLeft">rotateInDownLeft</div>
    <div date-class="animated rotateInDownRight">rotateInDownRight</div>
    <div date-class="animated rotateInUpLeft">rotateInUpLeft</div>
    <div date-class="animated rotateInUpRight">rotateInUpRight</div>
    <div date-class="animated rotateOut">rotateOut</div>
    <div date-class="animated rotateOutDownLeft">rotateOutDownLeft</div>
    <div date-class="animated rotateOutDownRight">rotateOutDownRight</div>
    <div date-class="animated rotateOutUpLeft">rotateOutUpLeft</div>
    <div date-class="animated rotateOutUpRight">rotateOutUpRight</div>
    <div date-class="animated slideInUp">slideInUp</div>
    <div date-class="animated slideInDown">slideInDown</div>
    <div date-class="animated slideInLeft">slideInLeft</div>
    <div date-class="animated slideInRight">slideInRight</div>
    <div date-class="animated slideOutUp">slideOutUp</div>
    <div date-class="animated slideOutDown">slideOutDown</div>
    <div date-class="animated slideOutLeft">slideOutLeft</div>
    <div date-class="animated slideOutRight">slideOutRight</div>
    <div date-class="animated zoomIn">zoomIn</div>
    <div date-class="animated zoomInDown">zoomInDown</div>
    <div date-class="animated zoomInLeft">zoomInLeft</div>
    <div date-class="animated zoomInRight">zoomInRight</div>
    <div date-class="animated zoomInUp">zoomInUp</div>
    <div date-class="animated zoomOut">zoomOut</div>
    <div date-class="animated zoomOutDown">zoomOutDown</div>
    <div date-class="animated zoomOutLeft">zoomOutLeft</div>
    <div date-class="animated zoomOutRight">zoomOutRight</div>
    <div date-class="animated zoomOutUp">zoomOutUp</div>
    <div date-class="animated hinge">hinge</div>
    <div date-class="animated jackInTheBox">jackInTheBox</div>
    <div date-class="animated rollIn">rollIn</div>
    <div date-class="animated rollOut">rollOut</div>
</div>
<style type="text/css">
    *{ margin:0; padding:0;}
    #btn_box{ width:100%; overflow:hidden; height:1900px;}
    #btn_box div{ width:31%; margin:30px 1%; background:#409fb6; color:#fff; text-align:center; height:40px; line-height:40px; font-size:20px; font-weight:bold; float:left; cursor:pointer;}
    #cenggel{text-align:center; font-size:20px; line-height:40px;}
    #cenggel a{ color:#000;}
    .animated{ background:#409F81 !important; z-index:132;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var cgl_on_off = true;
        $('#btn_box div').click(function(){
            if (cgl_on_off){
                var class_get = $(this).attr('date-class');
                $(this).addClass(class_get);
                cgl_on_off = false;
                setTimeout(function(){
                    $('#btn_box div').attr('class','')
                    cgl_on_off = true;
                },1500)
            }
        });
    });
</script>

百度下载地址:

链接:https://pan.baidu.com/s/1gfhaPz1

密码:hpzi

 

文章链接:http://cenggel.com/qianduanku/24.html

版权声明:文章《Animate.css的使用方法,一个前端动画库》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

一条回应:“Animate.css的使用方法,一个前端动画库”

  1. 淼淼说道:

    这个动画效果可以节省我时间了,嘿嘿

发表评论

电子邮件地址不会被公开。 必填项已用*标注