lottie android 卡顿,说说动画卡顿的解决方案

CSS3 动画卡顿解决方案

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

首页加载动画

.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{

-web