Question

我有一个测试Web应用程序，尝试使用不同的CSS解决方案。我在Ionic项目中将以下CSS代码用作背景动画。不幸的是，Android上的代码断断续续，并且fps低导致我的应用程序中的其他功能无法使用且不稳定。也请在下面找到原始代码链接。

原始代码： https://codepen.io/noahblon/pen/GKflw

我尝试按照以下方式优化代码以在应用程序中使用硬件加速。

HTML代码

<div class="scene">
    <div class="wrap">
        <div class="wall wall-right"></div>
        <div class="wall wall-left"></div>   
        <div class="wall wall-top"></div>
        <div class="wall wall-bottom"></div> 
        <div class="wall wall-back"></div>    
    </div>
    <div class="wrap">
        <div class="wall wall-right"></div>
        <div class="wall wall-left"></div>   
        <div class="wall wall-top"></div>
        <div class="wall wall-bottom"></div>   
        <div class="wall wall-back"></div>    
    </div>
  </div>

CSS代码：图片在本地存储为资产，大小为800x400，100KB。

.wall {
    background-image: url('../assets/imgs/4.jpg');
    background-size: cover;
    //pointer-events: none;
    position: absolute;
  }


  .scene {
    //  left: 50%; top: 50%;
    left: 50%; top: 50%;
    display: inline-block;
    vertical-align: middle;
    perspective: 5px;
   // perspective-origin: 50% 50%;
    position: absolute;
    z-index: -10;

  }

  .wrap {
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    transform-style: preserve-3d;
    -webkit-animation: move 350s infinite linear;
    -webkit-animation-fill-mode: forwards;
  }

  .wrap:nth-child(2){
    -webkit-animation: move 350s infinite linear;
    animation-delay: 6s;
  }

  .wall{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    opacity: 0;
    //animation: fade 350s infinite linear;
    -webkit-animation: fade 350s infinite linear;



    // -webkit-animation: fadeinout 4s linear forwards;
    // animation: fadeinout 4s linear forwards;


    animation-delay: 0;
  }

  .wrap:nth-child(2) .wall {
    animation-delay: 6s;
  }

  .wall-right {
    transform: rotate3d(0,1,0,90deg) translate3d(0,0,500px);
  }

  .wall-left {
    transform: rotate3d(0,1,0,-90deg) translate3d(0,0,500px);
  }

  .wall-top {
    transform: rotate3d(1,0,0,90deg) translate3d(0,0,500px);
  }

  .wall-bottom {
    transform: rotate3d(1,0,0,-90deg) translate3d(0,0,500px);
  }

  .wall-back {
    transform: rotate3d(1,0,0,180deg) translate3d(0,0,500px);
  }

  @-webkit-keyframes move {
    0%{
      -webkit-transform: translate3d(0,0,-500px) rotate(0deg);
    }
    100%{
      -webkit-transform: translate3d(0,0,500px) rotate(0deg);
    }
  }

  @keyframes move {
    0%{
      -webkit-transform: translate3d(0,0,-500px) rotate(0deg);
    }
    100%{
      -webkit-transform: translate3d(0,0,500px) rotate(0deg);
    }
  }


  @-webkit-keyframes fade {
    0%{
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }

  @keyframes fade {
    0%{
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }

我正在寻找一种解决方案，以优化提供的链接或进一步使用编辑后的代码。您将如何优化手机的动画？

如何为Android和IOS优化此CSS代码？

0 个答案: