Splash screen with logo image and CSS3 animation


#1

I’m trying to create Splash screen for Ionic2 app by this example

in config.xml file I’ve added "SplashScreenDelay" and "ShowSplashScreen":

...
 <preference name="SplashScreen" value="screen" />
<!-->    <preference name="SplashScreenDelay" value="3000" /> -->

<preference name="SplashScreenDelay" value="0"/>
<preference name="ShowSplashScreen" value="false"/>

in home.ts:

  ionViewDidLoad(){
      setTimeout(() => this.splash = false, 4000);
  }

in home.html with logo.png located in project directory assets/logo.png:

  <div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
    <div class="flb">
      <div class="Aligner-item Aligner-item--top"></div>
      <img src="assets/logo.png">
      <div class="Aligner-item Aligner-item--bottom"></div>
    </div>
  </div>

<ion-header>
  <ion-navbar>
    <ion-title>Home Page</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
...

in home.css also with CSS3 powered animation code from Bounce.js :

 #custom-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100000;
        width:100%;
        background-color: #002a3e;
      }
      
      .flb {
        background-color: #ea4e4e;
        height:100%;
        width:100%;
        animation: pulse 1s linear forwards;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .Aligner-item {
        max-width: 50%;
      }
      .Aligner-item--top {
        align-self: flex-start;
      }
      .Aligner-item--bottom {
        align-self: flex-end;
      }
      #custom-overlay img {
        display: block;
        margin: 0 auto;
        width: 50%;
        height: auto;
        animation: animation 3100ms linear infinite both;
        animation-delay: 1s;
      }

    /// Here CSS3  powered animation code 
     ...

Splash screen loads background color with transparency fade:

@keyframes pulse {
        0% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
      }

but in this project $ionic start pro1 flash screen does not loads logo.png over the Splash screen background color, same code with tabs layout project $ionic start pro2 tabs, works properly, loads image and animation.

Not sure what is wrong here, advice would be helpful


White screen after splash image before home page loads