CSS Animations not firing on page load

Ionic Framework
1

I’ve got an Ionic 4.5.0 app running on Angular and Capacitor, with a few very resource-intensive pages. I’ve tried to implement a few fade-in animations on these pages, and they only fire intermittently, often staying stuck at opacity:0. This seems to happen more frequently on older, slower devices, and with animations that fire on page load. I’ve tried implementing these animations both as pure CSS and within the angular animation library, and both get similar results.

Has anyone dealt with a similar problem? Info and sample code below.

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.1.0
   @capacitor/core : 1.1.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1

div {
	animation: fadein .2s ease-in;
	animation-fill-mode: both;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@Component({
	selector: 'app-home',
	templateUrl: 'home.page.html',
	styleUrls: ['home.page.scss'],
	animations: [
		trigger('fadeInOutDelay', [
			transition(':enter', [   // :enter is alias to 'void => *'
			  style({opacity:0}),
			  animate('200ms 300ms ease-out', style({opacity:1})) 
			]),
			transition(':leave', [   // :leave is alias to '* => void'
			  style({opacity:1}),
			  animate('200ms ease-out', style({opacity:0})) 
			])
		  ])
	]	  
})

	<div [@fadeInOut] *ngIf="!fade">Fade this in and out</div>
2

Hey, I’ve got the same problem. Did you solve it?
Best regards.

3

Nope. It seems to be a problem at the webkit/browser level, where animations don’t always fire reliably on resource-heavy pages. Ionic+Angular adds a lot of overhead, and on some complex pages, you just can’t rely on css animations to fire. Which blows up pretty much every solution, from angular animations to straight css.

My issues definitely occurred more on slower, older devices and were intermittent, which pointed to the problem being with basic renderer processing.

I just ended up going easier on the animations, and not firing things automatically, on load or attached to bindings.

1 Like