实例详解css3动画库animate.css的各种动画效果

来源：互联网发布：淘宝手机端文字大小编辑：程序博客网时间：2024/05/29 18:06

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。它的老搭档wow.js，这俩好哥们，经常一起使用。

animate.css包括shake、flash、swing、bounce、tada、wobble、pulse
flip、flipInX、flipOutX、flipInY、flipOutY
fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight、fadeInUpBig、fadeInDownBig、fadeInLeftBig、fadeInRightBig
fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight、fadeOutUpBig、fadeOutDownBig、fadeOutLeftBig、fadeOutRightBig
slideInDown、slideInLeft、slideInRight、slideOutUp、slideOutLeft、slideOutRight
bounceIn、bounceInDown、bounceInUp、bounceInLeft、bounceInRight
bounceOut、bounceOutDown、bounceOutUp、bounceOutLeft、bounceOutRight
rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight
rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight
lightSpeedIn、lightSpeedOut、hinge、rollIn、rollOut等60几种动画，我们下面直接上代码，一一解释它的含义。

下面的所有效果，鼠标移到对应的效果名，就可以看到动画哦……

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>css3动画库animate.css的各种效果案例详解</title>    <link href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">    <style>    div,.animated{        font-size: 30px;            }    p,div,span,h1,.animated{        text-align: center;      }    span{        cursor: pointer;        color: #f377a0;        font-size: 20px;            font-family: Consolas,arial,"宋体";         margin: 5px;    }    span:hover{        color: #fff;        background-color: #f35626;        padding: 5px;        border-radius: 5px;    }    </style></head><body>    <h1 class="animated" id="do"><strong>animate.css的各种效果</strong></h1>    <div>----------------------------------------------关注者(Attention Seekers)----------------------------------------------</div>    <p>        <span data-remark="左右轻微摇晃效果" >shake</span>        <span data-remark="一闪一闪效果">flash</span>        <span data-remark="单摆效果">swing</span>        <span data-remark="上下反弹效果">bounce</span>        <span data-remark="时间-波幅范围分析效果">tada</span>        <span data-remark="左右大幅度抖动效果">wobble</span>        <span data-remark="脉冲效果">pulse</span>        <span data-remark="快速翻转效果">flip</span>    </p>        <div>----------------------------------------------弹进来(Bouncing Entrances)----------------------------------------------</div>    <p>        <span data-remark="直接弹进来效果">bounceIn</span>        <span data-remark="从上面弹进来效果">bounceInDown</span>        <span data-remark="从左边弹进来效果">bounceInLeft</span>        <span data-remark="从右边弹进来效果">bounceInRight</span>        <span data-remark="从下面弹进来效果">bounceInUp</span>    </p>        <div>----------------------------------------------弹出去(Bouncing Exits)----------------------------------------------</div>    <p>        <span data-remark="直接弹出去效果">bounceOut</span>        <span data-remark="从下面弹出去效果">bounceOutDown</span>        <span data-remark="从左边弹出去效果">bounceOutLeft</span>        <span data-remark="从右边弹出去效果">bounceOutRight</span>        <span data-remark="从上面弹出去效果">bounceOutUp</span>    </p>    <div>----------------------------------------------淡入(Fading Entrances)----------------------------------------------</div>    <p>        <span data-remark="直接淡入效果">fadeIn</span>        <span data-remark="从上面慢慢淡入效果">fadeInDown</span>        <span data-remark="从上面快速淡入效果">fadeInDownBig</span>        <span data-remark="从左边慢慢淡入效果">fadeInLeft</span>        <span data-remark="从左边快速淡入效果">fadeInLeftBig</span>        <span data-remark="从右边慢慢淡入效果">fadeInRight</span>        <span data-remark="从右边快速淡入效果">fadeInRightBig</span>        <span data-remark="从下面慢慢淡入效果">fadeInUp</span>        <span data-remark="从下面慢慢淡入效果">fadeInUpBig</span>     </p>    <div>----------------------------------------------淡出(Fading Exits)----------------------------------------------</div>    <p>        <span data-remark="直接淡出效果">fadeOut</span>        <span data-remark="从下面慢慢淡出效果">fadeOutDown</span>        <span data-remark="从下面快速淡出效果">fadeOutDownBig</span>        <span data-remark="从左边慢慢淡出效果">fadeOutLeft</span>        <span data-remark="从左边快速淡出效果">fadeOutLeftBig</span>        <span data-remark="从右边慢慢淡出效果">fadeOutRight</span>        <span data-remark="从右边快速淡出效果">fadeOutRightBig</span>        <span data-remark="从上面慢慢淡出效果">fadeOutUp</span>        <span data-remark="从上面慢慢淡出效果">fadeOutUpBig</span>    </p>        <div>----------------------------------------------鸭掌板(Flippers)----------------------------------------------</div>    <p>        <span data-remark="前后左右大翻转效果">flip</span>        <span data-remark="上下小旋转效果">flipInX</span>        <span data-remark="左右小旋转效果">flipInY</span>        <span data-remark="从下往上翻出效果">flipOutX</span>        <span data-remark="从左往右翻出效果">flipOutY</span>    </p>        <div>----------------------------------------------光速(Lightspeed)----------------------------------------------</div>    <p>        <span data-remark="从右光速飞进效果">lightSpeedIn</span>        <span data-remark="从右光速飞出效果">lightSpeedOut</span>    </p>        <div>----------------------------------------------旋转进来(Rotating Entrances)----------------------------------------------</div>    <p>        <span data-remark="顺时针旋转进来效果">rotateIn</span>        <span data-remark="从左上方旋转下来效果">rotateInDownLeft</span>        <span data-remark="从右上方旋转下来效果">rotateInDownRight</span>        <span data-remark="从左下方旋转上来效果">rotateInUpLeft</span>        <span data-remark="从右下方旋转上来效果">rotateInUpRight</span>    </p>        <div>----------------------------------------------旋转出去(Rotating Exits)----------------------------------------------</div>    <p>        <span data-remark="顺时针旋转出去效果">rotateOut</span>        <span data-remark="从左下方旋转下去效果">rotateOutDownLeft</span>        <span data-remark="从右下方旋转下去效果">rotateOutDownRight</span>        <span data-remark="从左上方旋转上去效果">rotateOutUpLeft</span>        <span data-remark="从右上方旋转上去效果">rotateOutUpRight</span>    </p>       <div>----------------------------------------------滑动条(Sliders)----------------------------------------------</div>    <p>        <span data-remark="从上滑进来效果">slideInDown</span>        <span data-remark="从左滑进来效果">slideInLeft</span>        <span data-remark="从右滑进来效果">slideInRight</span>        <span data-remark="从左滑出去效果">slideOutLeft</span>        <span data-remark="从右滑出去效果">slideOutRight</span>        <span data-remark="从下滑出去效果">slideOutUp</span>    </p>        <div>----------------------------------------------特殊效果(Specials)----------------------------------------------</div>    <p>        <span data-remark="铰链效果">hinge</span>        <span data-remark="从左滚进来效果">rollIn</span>        <span data-remark="从右滚出去效果">rollOut</span>    </p>        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <script>        var animated_name,remark;        $('span').hover(function() {            animated_name = $(this).html();            remark = $(this).data('remark');            $('strong').html(remark).css('color','rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')');            $('h1').addClass(animated_name);        }, function() {            animated_name = $(this).html();            $('h1').removeClass(animated_name);        });        $('#xttblog').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){            //动画执行完成了            // alert('动画结束后我才跳出来哦');        });    </script></body></html>

截图如下：

阅读全文

0 0