How to sync two animations in CSS?

Question

I have an animated ball as it rolls to the right I need the text to fade in and as the ball rolls back to the left I need the text to fade out. I cannot get this thing in sync.

I tried messing with the different seconds of the animation and doing timings of 1, 2, 4, 6 ,8 seconds but none can get this in sync.

What am I doing wrong?

body {
      background: #fff;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }

    .loader {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      width: 0;
      height: 100vh;
      transition: width 0s 1.4s ease;
    }

    .loading_overlap{
        background: #007AE5;
        width: 100%;
        position: fixed;
        height: 100%;

    }
    .loading_overlap_float{
    width: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 92px;
    }
    .bar {
      position: relative;
      height: 2px;
      width: 500px;
      margin: 0 auto;
      background: #fff;
      margin-top: 90px;
    }

    .circle {
      position: absolute;
      top: -30px;
      margin-left: -30px;
      height: 60px;
      width: 60px;
      left: 0;
      background: #fff;
      border-radius: 30%;
      -webkit-animation: move 4s infinite;
      opacity: 0;
    }

    .bar p {
      position: absolute;
      top: -35px;
      right: -85px;
      text-transform: uppercase;
      color: #007AE5;
      font-family: helvetica, sans-serif; 
      font-weight: bold;
    }

    @-webkit-keyframes move {
      0% {left: 0; opacity: 0;}
      50% {left: 100%; -webkit-transform: rotate(450deg); width: 170px; height: 170px; opacity: 1;}
      75% {left: 100%; -webkit-transform: rotate(450deg); width: 170px; height: 170px; opacity: 1;}
      100% {right: 100%;}
    }


    .bar span {
      position: absolute;
      top: -40px;  
      text-transform: uppercase; 
      font-family: cursive; 
      font-weight: bold;
      font-size: 30px;
      left:0;
      color: #fff !important;
    }

    .fade-in {  
        -webkit-animation: fadeinout 8s infinite;
        animation: fadeinout 8s infinite;
        opacity: 0;
    }

    @-webkit-keyframes fadeinout {
      50% { opacity: 1; }
    }

    @keyframes fadeinout {
      50% { opacity: 1; }
    }

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

        <div class="loader loader--active">
          <!-- loading spinning div -->
          <div id="loader-bl">
            <div class="loading_overlap d-flex align-items-center">
              <div class="loading_overlap_float">
                <div class="bar">
                  <div class="circle"></div>
                  <span class="fade-in">Fade IN Out</span>
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>   
        </div>

body {
  background: #fff;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.loader {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  transition: width 0s 1.4s ease;
}

.loading_overlap {
  background: #007AE5;
  width: 100%;
  position: fixed;
  height: 100%;
}

.loading_overlap_float {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 92px;
}

.bar {
  position: relative;
  height: 2px;
  width: 500px;
  margin: 0 auto;
  background: #fff;
  margin-top: 90px;
}

.circle {
  position: absolute;
  top: -30px;
  margin-left: -30px;
  height: 60px;
  width: 60px;
  left: 0;
  background: #fff;
  border-radius: 30%;
  -webkit-animation: move 4s infinite;
  opacity: 0;
}

.bar p {
  position: absolute;
  top: -35px;
  right: -85px;
  text-transform: uppercase;
  color: #007AE5;
  font-family: helvetica, sans-serif;
  font-weight: bold;
}

@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  50% {
    left: 100%;
    -webkit-transform: rotate(450deg);
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  75% {
    left: 100%;
    -webkit-transform: rotate(450deg);
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    right: 100%;
  }
}

.bar span {
  position: absolute;
  top: -40px;
  text-transform: uppercase;
  font-family: cursive;
  font-weight: bold;
  font-size: 30px;
  left: 0;
  color: #fff !important;
}

.fade-in {
  -webkit-animation: fadeinout 8s infinite;
  animation: fadeinout 8s infinite;
  opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% {
    opacity: 1;
  }
}

@keyframes fadeinout {
  50% {
    opacity: 1;
  }
}

<div class="loader loader--active">
  <!-- loading spinning div -->
  <div id="loader-bl">
    <div class="loading_overlap d-flex align-items-center">
      <div class="loading_overlap_float">
        <div class="bar">
          <div class="circle"></div>
          <span class="fade-in">Fade IN Out</span>
          <p>Loading</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Use 2s as duration, make the opacity change at 100% then consider alternate:

body {
  background: #fff;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.loader {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  transition: width 0s 1.4s ease;
}

.loading_overlap {
  background: #007AE5;
  width: 100%;
  position: fixed;
  height: 100%;
}

.loading_overlap_float {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 92px;
}

.bar {
  position: relative;
  height: 2px;
  width: 500px;
  margin: 0 auto;
  background: #fff;
  margin-top: 90px;
}

.circle {
  position: absolute;
  top: -30px;
  margin-left: -30px;
  height: 60px;
  width: 60px;
  left: 0;
  background: #fff;
  border-radius: 30%;
  -webkit-animation: move 4s infinite;
  opacity: 0;
}

.bar p {
  position: absolute;
  top: -35px;
  right: -85px;
  text-transform: uppercase;
  color: #007AE5;
  font-family: helvetica, sans-serif;
  font-weight: bold;
}

@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  50% {
    left: 100%;
    -webkit-transform: rotate(450deg);
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  75% {
    left: 100%;
    -webkit-transform: rotate(450deg);
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    right: 100%;
  }
}

.bar span {
  position: absolute;
  top: -40px;
  text-transform: uppercase;
  font-family: cursive;
  font-weight: bold;
  font-size: 30px;
  left: 0;
  color: #fff !important;
}

.fade-in {
  animation: fadeinout 2s infinite alternate;
  opacity: 0;
}


@keyframes fadeinout {
  100% {
    opacity: 1;
  }
}

<div class="loader loader--active">
  <!-- loading spinning div -->
  <div id="loader-bl">
    <div class="loading_overlap d-flex align-items-center">
      <div class="loading_overlap_float">
        <div class="bar">
          <div class="circle"></div>
          <span class="fade-in">Fade IN Out</span>
          <p>Loading</p>
        </div>
      </div>
    </div>
  </div>
</div>