Delay block appearance after x seconds when page loads

Hello, I'm trying to set a time delay for a single block so it appears after a certain amount of time from when the page loads. Specifically, I have text block that has a highlight transition (line running along the bottom). I would like to either delay the whole text appearance, or delay the line highlight animation (whichever is easier). It seems so simple, but I'm having a hard time finding the right code. Thanks!

Can you share link to page where you use block?

On 12/21/2023 at 5:14 AM, tuanphan said:

Can you share link to page where you use block?

@tuanphan sorry, I never got a notification that you replied. Here's the page (right on the home page): https://www.920adci.com/

On 1/2/2024 at 9:09 AM, elliottholt said:

@tuanphan sorry, I never got a notification that you replied. Here's the page (right on the home page): https://www.920adci.com/

Which block are you referring to? I think we can use some JS code to achieve this. However if you need to make this work on Scroll, it will be more complex

16 hours ago, tuanphan said:

Which block are you referring to? I think we can use some JS code to achieve this. However if you need to make this work on Scroll, it will be more complex

@tuanphan #block-0c64b2c26c80ede916e7

(The "Simplified" text block). When the page loads, the line transition starts too early as you can probably see. I want this delayed slightly, so it looks better. Sometimes the line starts for a bit, then restarts after the first second. Kinda glitches sometimes, it's weird.. 

On 1/4/2024 at 9:31 AM, elliottholt said:

@tuanphan #block-0c64b2c26c80ede916e7

(The "Simplified" text block). When the page loads, the line transition starts too early as you can probably see. I want this delayed slightly, so it looks better. Sometimes the line starts for a bit, then restarts after the first second. Kinda glitches sometimes, it's weird.. 

Add this to Website Tools (under Not Linked) > Custom CSS

div#block-0c64b2c26c80ede916e7 {
  animation: showa 4s backwards;
  opacity: 0;
}

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

9 hours ago, tuanphan said:

Add this to Website Tools (under Not Linked) > Custom CSS

div#block-0c64b2c26c80ede916e7 {
  animation: showa 4s backwards;
  opacity: 0;
}

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

 

@tuanphan unfortunately, that didn't quite help. That just made the text fade in slightly and then disappear (see screen recording).

Afterwards though, I did modify the 3rd line (opacity: 0) to instead opacity: 1.  This made the text not disappear, however, it still fades and the line running on the bottom is not delayed.. So again, what I am hoping to do is delay the whole appearance of the text block (not fade in). Or delay just the line that runs along the bottom. Basically, the highlight line starts way too early, and it doesn't look professional. Is it possible to make it be delayed? Thanks for your suggestions so far.

@tuanphan do you have any other solutions?

On 1/13/2024 at 6:46 AM, elliottholt said:

@tuanphan do you have any other solutions?

You can remove the code, I will test new code again

On 1/14/2024 at 8:51 PM, tuanphan said:

You can remove the code, I will test new code again

@tuanphan any other ideas yet?