Time-delay appearance of buttons on cover page

Hi guys,

I currently have a cover page for my site that displays a video. I want to be able to time delay the text/buttons that appears on the cover page. Does anyone have an idea on how I can do that?

Thanks!

The following css should be added to the Advanced tab of your cover page settings. 

<style>
.sqs-slice-buttons {
  animation: fade-me-in 3s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}
<style>

There are 2 sections to the code. 

In the first section you set the total length of the fade in, from invisible to fully visible. It is set to 3 seconds above but you can change it. 

In the second section you can define how long the buttons stay invisible before they start to fade in. In the example it is set so that the buttons remain invisible for 80% of the3s animation duration (2.4s invisible) and then fades in over the remaining 0.6s.

Hi colin.irwin, thanks so much for your answer. For some reason the whole screen is going white? Do you know what can be causing this to happen? I wanted the buttons to fade in after 15seconds so I modified the code you gave me originally but everything goes blank.

Also is there a way to do the same for the title and description?

Thanks 🙂 

Can you share your modified code?

Here it is, I just changed the seconds...?

It looks like the syntax highlighting on this forum also strips the / from tags. 

 I have tweaked the code above, please try again. 

It does the same thing... 😕

On 10/27/2019 at 1:48 PM, codefordummies said:

It does the same thing... 😕

Hey codefordummies

I face the same issue. Did you find a solution so far?
Best regards,

Friederike

Hey! 

I was just wondering if this type of code can be applied to the custom CSS page and not just for cover pages. I only want the code to work for one page. 

Cheers, 

Isak

On 11/4/2020 at 5:15 PM, isak said:

Hey! 

I was just wondering if this type of code can be applied to the custom CSS page and not just for cover pages. I only want the code to work for one page. 

Cheers, 

Isak

You can add to Page Header