解决移动端UC和等浏览器不支持animate.css动画

xiaobo000000 2017-10-13 04:51:16

做移动端网页时，发现移动端UC、QQ等浏览器不支持animate.css动画效果，通过PC端或者移动端微信打开网页就可以看到动画，求大神帮忙解决一下，怎样使移动端的主流浏览器都支持animate.css动画呢？



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">

<meta name="format-detection" content="telephone=notelphone=no, email=no" />

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<title>康力优蓝</title>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

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

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

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

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

</head>

<body style="background: #f5f5f5">

<div class="footer">

    <!--<a href="tel:15207926531">拨打热线</a>-->

    <div class="threeSelects">

        <div class="threeSelect aboutUs">

            <p title1 = '0'>关于我们</p>

            <img class="arrows" src="images/arr01.png">

            <div class="visibleBlock" hidden>

                <hr/>

                <p class="visiblePro"> <span hidden>优品牌</span></p>

                <hr/>

                <p class="visiblePro"> <span hidden>优团队</span></p>

                <hr/>

                <p class="visiblePro visibleProTh"> <span hidden>公司地址</span></p>

            </div>

        </div>

        <hr/>

    </div>

    <div class="footerDel">

        <div class="companyDel">

            <p>400-638-1028</p>

            <P>（周一至周五 9：00~18:00） </P>

            <div class="callOnLine"><p><span><a href="tel:400-108-1028">拨打热线</a></span></p></div>

        </div>

        <div class="webInfo">

            <p><span>发生大发S大法撒旦</span></p>

            <p><span>粤ICP备22552250号-1</span></p>

        </div>

    </div>

</div>

<div>

    <!--回到顶部-->

    <div id='toTop'><img src='images/toTop.png'></div>

    <!--回到顶部-->

</div>

</body>

<script src="js/jquery-3.1.1.min.js"></script>

<script src="js/wySilder.js"></script>

<!--头部点击事件-->

<script>

    $(function () {

        /*footer各种事件与动画*/

        $('.aboutUs p:first-child').click(function () {

            if(parseInt($('.aboutShopping p:first-child').attr('title1')) == 1){

                $('.aboutShopping p:first-child').attr('title1','0');

                $('.aboutShopping .visiblePro').removeClass('animated bounceInRight').addClass('animated bounceOutRight');

                setTimeout(function () {

                    $('.aboutShopping .visiblePro span').hide();

                },300);

                setTimeout(function () {

                    $('.aboutShopping .visibleBlock').slideUp();

                    $('.aboutShopping p:first-child').css('color','#999');

                    $('.aboutShopping .arrows').attr('src','images/arr01.png');

                },300)

            }

            if(parseInt($('.aboutCompany p:first-child').attr('title1')) == 1){

                $('.aboutCompany p:first-child').attr('title1','0');

                $('.aboutCompany .visiblePro').removeClass('animated bounceInRight').addClass('animated bounceOutRight');

                setTimeout(function () {

                    $('.aboutCompany .visiblePro span').hide();

                },300);

                setTimeout(function () {

                    $('.aboutCompany .visibleBlock').slideUp();

                    $('.aboutCompany p:first-child').css('color','#999');

                    $('.aboutCompany .arrows').attr('src','images/arr01.png');

                },300)

            }

            if(parseInt($(this).attr('title1')) == 0){

                $(this).attr('title1','1').css('color','#fff');

                $('.aboutUs .arrows').attr('src','images/arr02.png');

                $('.aboutUs .visiblePro').removeClass('animated bounceOutRight')

                $('.aboutUs .visibleBlock').slideDown();

                $('.aboutUs .visiblePro span').eq(0).show();

                $('.aboutUs .visiblePro').eq(0).addClass('animated bounceInRight')

                setTimeout(function () {

                    $('.aboutUs .visiblePro span').eq(1).show();

                    $('.aboutUs .visiblePro').eq(1).addClass('animated bounceInRight')

                },50)

                setTimeout(function () {

                    $('.aboutUs .visiblePro span').eq(2).show();

                    $('.aboutUs .visiblePro').eq(2).addClass('animated bounceInRight')

                },150)

            }else{

                $(this).attr('title1','0');

                $('.aboutUs .visiblePro').removeClass('animated bounceInRight').addClass('animated bounceOutRight');

                setTimeout(function () {

                    $('.aboutUs .visiblePro span').hide();

                },300);

                setTimeout(function () {

                    $('.aboutUs .visibleBlock').slideUp();

                    $('.aboutUs p:first-child').css('color','#999');

                    $('.aboutUs .arrows').attr('src','images/arr01.png');

                },300)

            }

        });

        /*footer各种事件与动画*/

    })

</script>

</html>

...全文

1418 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-11-01

打赏
举报

说明你的浏览器内核版本太低，css要加-webkit- ，-o-等浏览器前缀，


@-webkit-keyframes  {
}
@-o-keyframes  {
}
@-moz-keyframes  {
}
@keyframes  {
}

xxx {
	-webkit-animation: xxxx;
	-o-animation: xxxx;
	-moz-animation: xxxx;
	animation: xxxx;
}
@-webkit-keyframes  {
}
@-o-keyframes  {
}
@-moz-keyframes  {
}
@keyframes  {
}

xxx {
	-webkit-animation: xxxx;
	-o-animation: xxxx;
	-moz-animation: xxxx;
	animation: xxxx;
}