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

最新推荐文章于 2024-08-12 11:00:42 发布

sensus森森

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量5.7k

点赞数 5

分类专栏： CSS2/CSS3 文章标签： css3 动画 animate.css库

本文链接：https://blog.csdn.net/qq_27682041/article/details/77568787

版权

CSS2/CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

截图如下：