css3动画性能优化

项目里运用的css动画，几片白云来回飘动，起初都用的定位，发现在安卓手机上展示，会有些掉帧似的抖动，很不流畅

.cloud_2{
    position: absolute;
    top: 150px;
    /*left: 20px;*/
    width: 32px;
    -webkit-animation:movingTwo 3s linear infinite;  
    animation:movingTwo 3s linear infinite;  
  }
  @keyframes movingTwo{
    0%{
      left: 16px;
    }
    50%{
      left: 24px;
    }
    100%{
      left: 16px;
    }
  }

以上是起初的实现代码

因为大致了解过css3的性能优化之类的东西，这里贴一张记忆最深刻的对比图

可以发现运用定位来实现是很消耗性能的，所以改成了transform:translateX，通过偏移来实现

.cloud_2{
    position: absolute;
    top: 150px;
    left: 20px;
    width: 32px;
    -webkit-animation:movingTwo 5s linear infinite;  
    animation:movingTwo 5s linear infinite;  
  }
  @keyframes movingTwo{
    0%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(10px);
    }
    100%{
      transform: translateX(0);
    }
  }

然后确实不再出现动画掉帧的情况

猜你喜欢