How to Delay the Appearance of Elements in Websites

In this article we will show you how to delay the appearance of elements in websites. This is useful to add a bit of flair to your designs.

What You Will Need:

• A basic understanding of CSS

Step 1

Add this code as Custom CSS.

#row-7680 {
   opacity: 0;
   animation: fadeIn 1s;
   animation-delay: 1s;
   animation-fill-mode: forwards;
   pointer-events: none;
}

@keyframes fadeIn {
   from { opacity: 0; pointer-events: none; }
   to { opacity: 1; pointer-events: auto; }
}

@keyframes fadeIn {
   from { opacity: 0; pointer-events: none; } 
   to { opacity: 1; pointer-events: auto; }
}

Step 2

Select your element (1) > Click on Advanced (2) > Copy the CSS Selector (3)

Step 3

Replace "#row-7680" with the selector you just copied (1) > Click on "Yes, Save"