CSS Code for Delaying Text and Button on cover page

Hello friends!

I would like to delay the appearance of the Welcome text and Enter button on my cover page, and I would like to stagger them if possible. For example the Welcome text can appear after 3 seconds and the Button appears after 4 seconds, or something similar. 

Does anyone have a CSS code snippet that could work for this?

Here is the page https://www.payperplains.com

@payper-plains Here's an animation I just built with CSS based on what described. 

Add the code I wrote to the Custom CSS panel. You’ll find the Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

#collection-5661127ce4b0ae1476ab058b .sqs-slice-group .group-copy {
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

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

#collection-5661127ce4b0ae1476ab058b .sqs-slice-group .group-links {
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

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

Let me know how it goes. Thanks!

Thanks for the code! @Lesum I just realized that custom code does not work on cover pages. Which is stated on the CSS panel. Do you perhaps know a workaround? 

@tuanphan This worked wonderfully. Thank you for the solution 🙌

@tuanphan After adding the code, I noticed on safari and chrome when the cover page loads there is a very brief second where the paper plane animation starts higher on the page and the starts in the correct position. Is this caused by the code?

Here is the page again for reference www.payperplains.com

On 8/25/2023 at 6:07 AM, payper-plains said:

@tuanphan After adding the code, I noticed on safari and chrome when the cover page loads there is a very brief second where the paper plane animation starts higher on the page and the starts in the correct position. Is this caused by the code?

Here is the page again for reference www.payperplains.com

It looks fine on my Chrome. Can you take a screenshot or quick video on your end?

@tuanphan Yes, Attached is a screenshot and a quick recording of the glitch I am seeing. This was seen after applying the code, and I continue to see it on Safari and Chrome. Please advise if possible!

@tuanphan See above for examples of the glitch I referenced.

Maybe it's because the code hasn't loaded yet. The code inserted in the Page Header will usually load 1-2 seconds slower than the page content loads so I don't have any idea how to handle this, In addition to using standard page, using CSS code to remove header/footer, and the code above we can move to the Custom CSS box, instead of Page Header.

@tuanphan Ahhh I see. Okay I had a simple solution. I edited the animation so it wouldn't start until the page processed the code first. Before, my animation began immediately. So delaying the start fixed my issue. Thanks again for all the help!