How do I delay an element?

Question

I have this CSS code but the botton completely dissapears. How do I get it to appear after 5 seconds?

div#button-y4sCSuA9ms {
     background-image: linear-gradient(170deg, #ffe259, #ffa751) !important;
     box-shadow: 0 16px 32px 0 rgb(128 99 66 / 25%)  !important;
     color: rgba(0, 0, 0, 0.95)  !important;
     opacity: 0;
     animation: fadeIn 1s;
     animation-delay: 5s;
     animation-fill-mode: forwards;
     pointer-events: none;
}

What does the `fadeIn` animation do? (Presumably it affects opacity, but it would be worth including it) — DBS, Jul 12 '23 at 15:33

score 0 · Accepted Answer · answered Jul 12 '23 at 15:39

Maybe you simply forgot to add keyframes for fadeIn.
See snippet below, which will fade the button in after 2 seconds (to remove some wait time for you, just kick it back up to 5s):

div#button-y4sCSuA9ms {
     background-image: linear-gradient(170deg, #ffe259, #ffa751) !important;
     box-shadow: 0 16px 32px 0 rgb(128 99 66 / 25%)  !important;
     color: rgba(0, 0, 0, 0.95)  !important;
     opacity: 0;
     animation: fadeIn 1s;
     animation-delay: 2s;
     animation-fill-mode: forwards;
     pointer-events: none;
}

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

<div id="button-y4sCSuA9ms">Button text</div>

See this StackOverflow answer about CSS transitions and browser compatibility for more information:
CSS transitions

score 0 · Answer 2 · answered Jul 12 '23 at 15:40

0

By setting

animation-iteration-count: infinite;

in the CSS, the animation keeps repeating every 5 seconds (the animation-delay property you have set).

If don't want the animation to keep repeating forever, just set the animation-iteration-count to a number.

answered Jul 12 '23 at 15:40

Sina Haghshenas

28
6

They wanted to display the element after 5 seconds, not every 5 seconds. The keyframes for fadeIn were simply missing. – Peter Krebs Jul 13 '23 at 08:24
Didn't notice that, thank you for the comment! – Sina Haghshenas Jul 13 '23 at 10:11

How do I delay an element?

2 Answers2