Animation opacity delay not working (likely my fault)

Hey,

I can provide more definitive advice if you could send me a link to the site either here or via our contact form. But for now I suggest the following CSS:

#img-home-hero-boxes {
opacity: 0;
}
#img-home-hero-boxes.mt-inview {
/* MT [ sub: 1 | group: animation | event: 1 ] */
animation-name: bounceInLeft;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-fill-mode: forwards;
opacity: 1;
}

I’ve removed your transition CSS, including the inView once event. I think that may have been confusing things by making opacity 1, only for the animation to set if to zero when it starts. I also added:

animation-fill-mode: forwards;

This should ensure the opacity:0 setting above gets overridden by the animation’s opacity 1 setting once the animation completes (I think opacity:1 is applied by the bounce animations).

If I haven’t quite got to the bottom of this, please send over a link to the page.

Thanks!
Sebastian

You did! I’m sorry I missed it. I thought I had replied requesting more information. I will reply to your email now if you prefer to continue offline.

Cheers,
Sebastian

Hey,

Thanks for providing access. Please check on the test page and let me know if I’ve understood your intention correctly. Here is the CSS Microthemer generated to achieve the affect. I explain how it works below.

/** Animation >> .test-divs **/
.test-divs {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.test-divs.mt-inview_once {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/** Animation >> #div_block-72-610 **/
#div_block-72-610 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

/** Animation >> #div_block-73-610 **/
#div_block-73-610 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}

/** Animation >> #section-14-610 **/
#section-14-610 {
	position: relative;
}

1. The initial transform: translate3d rules position the three .test-divs out of view by default. Because MT doesn’t have UI fields for transform yet, I added this code manually. I copied it from MT’s stylesheet which shows the @keyframes for the fadeInUp animation near the top.
2. I set the animation event to inView once so the animation rules are inside the following selector: .test-divs.mt-inview_once. This means the animation only runs when MT adds the mt-inview_once class to the divs, which is does when they come into view.
3. fadeInUp is set as the animation to run for 0.5 seconds. The animation-fill-mode is set to forwards so that the CSS styles in the final frame of the animation persist after the animation completes. The final frame styles reset the transform: translate3d, so the divs remain in view (overriding our first transform: translate3d rules that position the three .test-divs out of view)
4. We didn’t specify a delay with our selector that targets all three divs, so this defaults to zero.
5. But we create selectors for the 2nd and 3rd divs, which we use to set 1 and 2 second delays, so the divs animate in sequence – one second between each.
6. Finally, I set position:relative on the teal section so that its z-index setting of 10 would actually take effect, and it would stack in front of the animated divs. This allowed the divs to appear from behind the section.

I hope that makes sense, and you can now apply the same technique elsewhere on the site.

Cheers,
Sebastian

You’re welcome 🙂