How to display a hidden element after n seconds with CSS

Let’s say you want to add a certain section, or popup that is notifying the user of something, or just giving some action buttons to click on, but you don’t want that section/popup to appear right away, but after a certain amount of seconds or minutes.

First we will take a look how would this be done with javascript and CSS. If you want to jump directly to the only CSS part, just scroll down towards the end of the article.

The javascript way would be the following:

• you hide that section with CSS, using display: none

.target {
     display: none;
}

• Then you use just a small amount of javascript code to count to that amount of seconds or minutes and after that just add a class on that .target element

setTimeout(() => { 
   document.querySelector('.target').classList.add('displayed');
}, 600);

• After this we go back to CSS and define some rule for the displayed class:

.displayed {
     display: block;
}

Basically that’s it, now let’s see how would that look like in a Squarespace website:

First of all, it would be helpful to have a plugin that displays the section ids and block ids, because we will make reference to them while using CSS and JS

For this we will use the Squarespace ID finder extension for Chrome:

After this we create a new section in Squarespace and click on the ID Finder’s icon on the top to have the id’s displayed. I’ve added a donation section and ID Finder made my job easy, so I will just click on the section id with the blue outline, this will copy that text into the clipboard.

Now we locate the Custom CSS menu item on top left and write LESSCSS code, since Squarespace supports LESS, therefore it supports nesting of code. We paste the section id from the clipboard, and initially we hide the element, but also we specify if this element will have a displayed class, then just show it:

Now comes the Javascript part. In the Injections > Footer section we add the javascript code:

Could we do this without Javascript?

Sometimes for the sake of performance or just for the idea of using one technology instead of 2, we would like to have a pure CSS solution. Ok, but how can we reproduce the waiting of 10 minutes(600 seconds) and then displaying something with CSS?

CSS animations could simulate a delay by using it with a not animatable property. This way the animation will start and jump to the end value of the animation when the duration has ended.

@keyframes display {
  from { 
    width: 0;
    height: 0;
  }
  to { 
    width: auto;
    height: auto;
  }
}
.target {
  overflow: hidden;
  animation-name: display;
  animation-duration: 10s;
}

You can’t animate a number to an auto keyword, because it won’t work. But this is our advantage actually, because then the animation-duration of 10 seconds will serve us in delaying the width and height getting auto value till 10 seconds pass.

In case you also have paddings inside then this solution won’t work, so the approach will be different:

@keyframes display {
  0% { 
    width: 0;
    height: 0;
    padding: 0
  }
  99.9999% { 
    width: 0;
    height: 0;
    padding: 0
  }
  100% {
    width: auto;
    height: auto;
    padding: 10px
  }
}
.target {
  overflow: hidden;
  animation-name: display;
  animation-duration: 10s;
}

From 0% to 99.9999% the width and height and padding will stay at 0 value. Right at the end will instantly change the value to auto and a numeric value for the padding.

This CSS code will be added to the Custom CSS panel as I mentioned above and no Javascript is needed in the Injections > Footer section.

Conclusion: You can show a hidden element with a delay also with javascript and CSS combination or just with CSS animation, that is your choice.

0