How to optimize CSS for Android for best performance?

Ionic Framework ionic-v3
1

Hi,

I have the below CSS code as a background in my Ionic project.
Unfortunately, the code (while tested on the phone) stutters quite badly, and the low fps makes other functions in my app unusable.

HTML Cide

<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 Code
//Please note, that the jpg used below, to have the swirling effect is a ~800x400 low res picture

	
.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;
    }
  }

Could someone help me optimizing the above code to mobile devices for maximum performance?
What causes the bad performance/what is taxing for the handheld devices in the above?

Kindly note if you have questions for this.

Thank you very much in advance.