Animate.css简单使用

最新推荐文章于 2025-10-25 01:53:49 发布

转载最新推荐文章于 2025-10-25 01:53:49 发布 · 1.1k 阅读

文章标签：

#Animate.css

css 专栏收录该内容

10 篇文章

订阅专栏

引入animate.css文件

1.网络引用

2.下载css

https://daneden.github.io/animate.css/，下载并保存为css文件

使用方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/animate.css">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
            * {
            margin: 0;
            padding: 0;
        }

        .modal_content {
            width: 500px;
            height: 500px;
            margin-left: 650px;
            background-color: rgba(44, 55, 84, 0.8);
            margin-top: 150px;
            border-radius: 25px;
            /*设置动画属性*/
			/*动画持续时间*/
            -webkit-animation-duration: 3s;
           /*动画延迟时间*/
            -webkit-animation-delay: 1s;
           /*动画执行次数*/
            animation-iteration-count: 1;  
        }

        @media screen and (max-width:1000px) {
            .modal_content {
                width: 300px;
                height: 500px;
                margin-left: -150px;
            }
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //给div增加类型添加动画
			var modal_animate= $('.modal_content');
            // infinite 无限重复动画  animated 规定是一个动画  tada动画名称
           modal_animate.addClass('animated tada');
		   //动画完后执行的函数
           modal_animate.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                    console.log('hello world'); //动画完毕后才打印
		    //移除动画
                    modal_animate.removeClass('animated tada');
                    //添加动画
		    modal_animate.addClass('animated rotateIn');
                });
        });
    </script>
</head>

<body>
    <div class="modal_content">
        <h1 align="center">文字部分</h1>
    </div>
</body>

</html>