CSS3 动画卡顿解决方案

原创 2016年10月08日 15:21:36

前端时间用 animation 实现 H5 页面中首页动画过渡,很简单的一个效果,首页加载一个客服头像,先放大,停留 700ms 后再缩小至顶部。代码如下

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" >
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>首页加载动画</title>
    <head>
        <style>
            .welcome-main{
                display: none;                
                padding-bottom: 40px;            
            }
            .top-info{                
                width: 100%;                
                position: absolute;                
                left: 0;                
                top: 93px;            
            }
            .wec-img{
                width: 175px;                
                height: 175px;                
                position: relative;                
                padding: 23px;                
                box-sizing: border-box;                
                margin: 0 auto;            
             }
            .wec-img:before{                
                content: '';                
                position: absolute;                
                left: 0;                
                top: 0;                
                width: 100%;                
                height: 100%;                
                background: url("./images/kf-welcome-loading.png");                
                background-size: 100%;            
             }
            .wec-img .img-con{
                width: 100%;                
                height: 100%;                
                border-radius: 50%;                
                /*box-sizing: border-box;*/
                background: url("./images/kf_1.jpg");                
                background-size: 100%;                
                padding: 1px;            
            }
            .wec-img .img-con img{
                width: 100%;                
                height: 100%;                
                border-radius: 50%;            
            }
            .loaded .wec-img{
                -webkit-transform-origin: center top;            
            }               
            .loading.welcome-main{
                display: block;
            }
            .loading .wec-img{
                -webkit-animation:fadeIn .3s  ease both;
            }
            .loading .wec-img:before{
                -webkit-animation:rotate .6s .2s linear both;            
            }
            .loaded .top-info{
                -webkit-animation:mainpadding 1s 0s ease both;            
            }
            .loaded .wec-img{
                -webkit-animation:imgSmall 1s 0s ease both;            }
            @-webkit-keyframes mainpadding{
                0%{-webkit-transform:translateY(0)    
            }
                100%{-webkit-transform:translateY(-87px)     
                }
            }            
            @-webkit-keyframes imgSmall{
                0%{
                    width: 175px;                    
                    height: 175px;                    
                    padding: 23px;                
                }
                100%{                    
                    width: 60px;                    
                    height: 60px;                    
                    padding: 0;                
                }
            }            
            @-webkit-keyframes fadeIn{
                0%{opacity:0;-webkit-transform:scale(.3)}
                100%{opacity:1;-webkit-transform:scale(1)}
            }            
            @-webkit-keyframes rotate{
                0%{opacity:0;-webkit-transform:rotate(0deg);}
                50%{opacity:1;-webkit-transform:rotate(180deg);}
                100%{opacity:0;-webkit-transform:rotate(360deg);}
            }          
            </style>
        <body>
            <div class="welcome-main">
                <div class="top-info">
                    <div class="wec-img"><p class="img-con"><img src="" alt=""></p></div>
                </div>
            </div>
            <script>
                $('.welcome-main').addClass('loading');
                setTimeout(function(){
                    $('.hi.fst').removeClass('loading');
                    $('.welcome-main').addClass('loaded');
                },700);
            </script>
        </body>
    </html>

在 chrome 上测试 ok,但在提测给 QA 的时候发现部分机型,如华为(系统4.2),oppo(系统5.1)的出现卡顿情况。

百思不得其解,后来参考文章深入浏览器理解 CSS animations 和 transitions 的性能问题一文,将图片缩放中动画元素改成 transform,如下

@-webkit-keyframes imgSmall{
  0%{
      -webkit-transform:scale(1);
  }
  100%{
      -webkit-transform:scale(.465);
  }
}

果然啊,卡顿问题解决了。

文章深入浏览器理解 CSS animations 和 transitions 的性能问题是这么解释的,现代的浏览器通常会有两个重要的执行线程,这 2 个线程协同工作来渲染一个网页:主线程和合成线程。

一般情况下,主线程负责:运行 JavaScript;计算 HTML 元素的 CSS 样式;页面的布局;将元素绘制到一个或多个位图中;将这些位图交给合成线程。

相应地,合成线程负责:通过 GPU 将位图绘制到屏幕上;通知主线程更新页面中可见或即将变成可见的部分的位图;计算出页面中哪部分是可见的;计算出当你在滚动页面时哪部分是即将变成可见的;当你滚动页面时将相应位置的元素移动到可视区域。

假设我们要一个元素的 height 从 100 px 变成 200 px,就像这样:

div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}

主线程和合成线程将按照下面的流程图执行相应的操作。注意在橘黄色方框的操作可能会比较耗时,在蓝色框中的操作是比较快速的。


而使用 transform:scale 实现

div {
    transform: scale(0.5);
    transition: transform 1s linear;
}

div:hover {
    transform: scale(1.0);
}

此时流程如下:


也就是说,使用 transform,浏览器只需要一次生成这个元素的位图,并在动画开始的时候将它提交给 GPU 去处理 。之后,浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而,浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。

为了从数量级上去证实这个理论,我打开 chrome 的 Timeline 查看页面 FPS


其中,当用 height 做动画元素时,在切换过程的 FPS 只有 44,我们知道每秒 60 帧是最适合人眼的交互,小于 60,人眼能明显感觉到,这就是为什么卡顿的原因。


rendering 和 painting 所花的时间如下:


再来看看用 transform:scale


FPS 达到 66,且 rendering 和 painting 时间减少了 3 倍。

到此为止问题是解决了,隔了几天,看到一篇解决 Chrome 动画”卡顿”的办法,发现还能通过开启硬件加速的方式优化动画,于是又试了一遍。

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

惊人的事情发生了,FPS 达到 72:



总结解决 CSS3 动画卡顿方案

  1. 尽量使用 transform 当成动画熟悉,避免使用 height,width,margin,padding 等;

  2. 要求较高时,可以开启浏览器开启 GPU 硬件加速。

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3 动画在安卓机上爆卡解决方法

公司有个H5项目,采用 的CSS3动画制作。IOS播放流畅。 但是 安卓卡成翔; 下面附上解决办法: 开启硬件加速。。。 在webkit中有神奇效果: opacity: 1; 或者 -webkit-b...
  • msxiehui
  • msxiehui
  • 2016年12月23日 19:37
  • 2844

JQuery animate 动画效果出现抖动的解决办法

起因:在做购物车按钮弹出动画效果时,出现了动画闪烁的问题,后来发现是animate重复执行了。 解决办法:在animate方法前面加入stop()清空 防止重复执行。 例子: $(" btn1")...
  • yglt77
  • yglt77
  • 2016年05月28日 11:26
  • 3922

jQuery在使用each及animate等方法出现卡顿

问题场景 jQuery 在使用选择器对页面上多个html元素进行动画操作的时候,如果元素数量较多则会出现卡顿。因此在页面特效的设计上需要考虑这一类情况。 解决方案 实际上我们在对for循环...
  • MrEmotion
  • MrEmotion
  • 2017年02月20日 16:38
  • 2144

深入浏览器理解CSS animations 和 transitions的性能问题

原文链接: CSS animations and transitions performance: looking inside the browser 你可能已经在一些项目中使用过CS...
  • leer168
  • leer168
  • 2014年05月15日 21:33
  • 8138

13.(初级)CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法

一、变形transform 1、倾斜skew() skew(水平倾角,垂直倾角) 例如: skew(20deg,30deg)   2、移动变形原点transform-origin transform-...
  • majun0007
  • majun0007
  • 2017年02月07日 14:53
  • 1663

移动端transition闪烁问题的解决方案

1、在目标元素中加入下面任意一条CSS代码-webkit-transform: translate3d(0,0,0); /*开启硬件加速*/ -webkit-backface-visibility: ...
  • g805905132
  • g805905132
  • 2016年07月28日 22:25
  • 1614

CSS3 几步即可实现loading动画效果

参照网上的设计,本篇分享一下非常常见的Loading的效果。 例子1:菊花状的Loading效果 ------------------------------ 第一步画出静态的小菊花...
  • yeana1
  • yeana1
  • 2016年07月14日 16:06
  • 2794

解决animation循环中停止时卡顿一下的问题

  • cw2004100021124
  • cw2004100021124
  • 2016年01月26日 15:30
  • 2154

解决CSS3动画首次渲染或结束时会闪烁的问题

1.首次渲染CSS3动画时闪烁BUG 部分webkit内核手机浏览器在使用 transform:translate 属性时,会出现闪烁现象,解决方案大致有如下几种...
  • g805905132
  • g805905132
  • 2016年01月05日 10:42
  • 3675

解决移动端动画卡顿问题

1、开启translateZ或 translate3d webkit-transform: translateZ(0);  -moz-transform: translateZ(0);  -...
  • majun0007
  • majun0007
  • 2017年04月11日 11:10
  • 1315
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 动画卡顿解决方案
举报原因:
原因补充:

(最多只允许输入30个字)