微信浏览器、内部浏览器(公司客户端自带) css3动画 滑动时动画不动了

先把代码扔下边。没什么奇怪的东西。当手指去滑动页面的时候,动画会停止。这是为什么?有什么解决办法?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        @keyframes ani{

          0%{top:0;transform: translate(0px);}

          10%{transform: translate(30px);}

          20%{transform: translate(0px);}

          30%{transform: translate(30px);}

          40%{transform: translate(0px);}

          50%{transform: translate(30px);}

          60%{transform: translate(0px);}

          70%{transform: translate(30px);}

          80%{transform: translate(0px);}

          90%{transform: translate(30px);}

          100%{   top:100%; transform: translate(0px);  }

        }

        .animate{

            top:0;

            animation:ani 10s ease-out;

            animation-fill-mode:both;

        }

        div{width:100px;height:100px;border-radius:50%;position: fixed;top:0;left:300px;background-color: #00cced}

    </style>

</head>

<body>

    <div class="animate"></div>

</body>

</html>


尚方宝剑之说
浏览 680回答 1
1回答

LEATH

拖动时候需要重新计算页面与重新绘制可视部分,会暂时停用浏览器内部的重绘(就是动画顶住);为了节省终端性能资源的行为...
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript