How do I delay an element?

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;
}

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):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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; }
}

<!-- language: lang-html -->

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

<!-- end snippet -->

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

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.