Pulsating text with delay

I don't know how to implement code for pulsating text with delay. I have a background image and over it, I have 2 different texts that appear at different times. 1st text is ok, but with the second one, I have a problem where I don't know how to make it pulsate with delayed appearance.

Code:

<?php 


?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
  /*https://dynamicwallpaper.club/landing-vids/1.png*/
  height: 100%; 
  /* Center and scale */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/*still to use for wellcome*/
#test {
    margin-top: 25px;
    font-size: 8rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)

    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 5s;
}

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

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test2 {
    margin-top: 150px;
    font-size: 2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)


    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 5s;
            animation-delay: 5s;
}/* This was missing*/

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


/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

</style>
</head>
<body>
<a href="skills.php">
  <div class="bg tekst_slika">
    <div id="test" class="centered">WELLCOME</div>
    <div id="test2" class="centered">>> Press here to start <<</div>
  </div>
</a>

</body>
</html>

Thank you all for your help in advance.

Solution

Here is a Fiddle that I think gives you the solution your after: https://jsfiddle.net/v1pm2y8f/3/

You had several syntax errors that needed to be fixed but the main differences where setting the opacity to 0 on startup and the use of animation-fill-mode: forwards; to preserve the animation values once fadein had completed.

HTML

<div class="bg tekst_slika">
  <div id="test" class="centered">WELCOME</div>
  <div id="test2" class="centered">>> Press here to start <<</div>
</div>

CSS

body, html {
 height: 100%;
 margin: 0;
}

.bg {
  background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
  /*https://dynamicwallpaper.club/landing-vids/1.png*/
  height: 100%; 
 /* Center and scale */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

/* Centered text */
.centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
}

#test,
#test2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*still to use for wellcome*/
#test {
  margin-top: 25px;
  font-size: 8rem;
  opacity: 0;

  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
        animation: fadein 5s;
        animation-fill-mode: forwards;
}

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

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

#test2 {
   margin-top: 150px;
   font-size: 2rem;
   opacity: 0;

   -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
        animation: fadein 5s;
        animation-delay: 5s;
        animation-fill-mode: forwards;

}

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

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
}