<div class="square">
  <div class="dot"></div>
  <div class="directions">
    <span class="span1">Breathe In</span>
    <span class="span2">Hold</span>
    <span class="span3">Breath Out</span>
    <span class="span4">Hold</span>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body{
  background: black;
  margin:0;
  padding:0;
  width: 100vw;
  height: 100vh;
  font-family: Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square{
  display: flex;
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid white;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.dot{
  width: 10px;
  height: 10px;
  position: absolute;
  background: teal;
  border-radius: 50%;
  box-shadow: 0 0 10px 10px teal;
  top: -5px;
  left: -5px;
  animation: breathe 16s infinite;
}

.directions{
  height: 125px;
  width: 125px;
  color: white;
  background: teal;
  text-align: center;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: expand 16s infinite;
}
span{
  position: absolute;
  color: rgba(255, 255, 255, 0);
}
.span1{
  animation: words1 16s infinite;
}
.span2{
  animation: words2 16s infinite;
}
.span3{
  animation: words3 16s infinite;
}
.span4{
  animation: words4 16s infinite;
}


@keyframes breathe{
  0% {
    top: -5px;
    left: -5px;
    //transform: translate(0px, 0px);
  }
  25% {
    //top: -5px;
    //right: -5px;
    transform: translate(200px, 0px);
  }
  50% {
    //bottom: -5px;
    //right: -5px;
    transform: translate(200px, 200px);
  }
  75% {
    //bottom: -5px;
    //left: -5px;
    transform: translate(0px, 200px);
  }
  100% {
    //top: -5px;
    //left: -5px;
    transform: translate(0px, 0px);
  };
}

@keyframes expand{
  0% {
    height: 125px;
    width: 125px;
  }
  25% {
    height: 175px;
    width: 175px;
  }
  50% {
    height: 175px;
    width: 175px;
  }
  75% {
    height: 125px;
    width: 125px;
  }
  100% {
    height: 125px;
    width: 125px;
  };
}

@keyframes words1{
  0% {
    color: rgba(255, 255, 255, 1);
  }
  24% {
    color: rgba(255, 255, 255, 1);
  }
  26% {
    color: rgba(255, 255, 255, 0);
  }
  50% {
    color: rgba(255, 255, 255, 0);
  }
  75% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}

@keyframes words2{
  0% {
    color: rgba(255, 255, 255, 0);
  }
  24% {
    color: rgba(255, 255, 255, 0);
  }
  26% {
    color: rgba(255, 255, 255, 1);
  }
  49% {
    color: rgba(255, 255, 255, 1);
  }
  51% {
    color: rgba(255, 255, 255, 0);
  }
  75% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}

@keyframes words3{
  0% {
    color: rgba(255, 255, 255, 0);
  }
  24% {
    color: rgba(255, 255, 255, 0);
  }
  26% {
    color: rgba(255, 255, 255, 0);
  }
  49%{
    color: rgba(255, 255, 255, 0);
  }
  51% {
    color: rgba(255, 255, 255, 1);
  }
  74% {
    color: rgba(255, 255, 255, 1);
  }
  76% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}

@keyframes words4{
  0% {
    color: rgba(255, 255, 255, 0);
  }
  24% {
    color: rgba(255, 255, 255, 0);
  }
  26% {
    color: rgba(255, 255, 255, 0);
  }
  50% {
    color: rgba(255, 255, 255, 0);
  }
  74% {
    color: rgba(255, 255, 255, 0);
  }
  76% {
    color: rgba(255, 255, 255, 1);
  }
  99% {
    color: rgba(255, 255, 255, 1);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}