如何在CSS中同步两个动画？

Question

我有一个动画球，当它滚到右侧时，我需要文本淡入，当球滚回左侧时，我需要文本淡出。我无法让这个东西同步。

我尝试弄乱动画的不同秒数并执行 1、2、4、6、8 秒的计时，但没有一个可以同步。

我究竟做错了什么？

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

    }

Answer 1

使用 2 秒作为持续时间，将不透明度更改为 100%，然后考虑替代方案：body {&nbsp; background: #fff;&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; overflow-x: hidden;}.loader {&nbsp; position: fixed;&nbsp; z-index: 999;&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 0;&nbsp; height: 100vh;&nbsp; transition: width 0s 1.4s ease;}.loading_overlap {&nbsp; background: #007AE5;&nbsp; width: 100%;&nbsp; position: fixed;&nbsp; height: 100%;}.loading_overlap_float {&nbsp; width: 100%;&nbsp; overflow-x: hidden;&nbsp; overflow-y: hidden;&nbsp; height: 92px;}.bar {&nbsp; position: relative;&nbsp; height: 2px;&nbsp; width: 500px;&nbsp; margin: 0 auto;&nbsp; background: #fff;&nbsp; margin-top: 90px;}.circle {&nbsp; position: absolute;&nbsp; top: -30px;&nbsp; margin-left: -30px;&nbsp; height: 60px;&nbsp; width: 60px;&nbsp; left: 0;&nbsp; background: #fff;&nbsp; border-radius: 30%;&nbsp; -webkit-animation: move 4s infinite;&nbsp; opacity: 0;}.bar p {&nbsp; position: absolute;&nbsp; top: -35px;&nbsp; right: -85px;&nbsp; text-transform: uppercase;&nbsp; color: #007AE5;&nbsp; font-family: helvetica, sans-serif;&nbsp; font-weight: bold;}@-webkit-keyframes move {&nbsp; 0% {&nbsp; &nbsp; left: 0;&nbsp; &nbsp; opacity: 0;&nbsp; }&nbsp; 50% {&nbsp; &nbsp; left: 100%;&nbsp; &nbsp; -webkit-transform: rotate(450deg);&nbsp; &nbsp; width: 170px;&nbsp; &nbsp; height: 170px;&nbsp; &nbsp; opacity: 1;&nbsp; }&nbsp; 75% {&nbsp; &nbsp; left: 100%;&nbsp; &nbsp; -webkit-transform: rotate(450deg);&nbsp; &nbsp; width: 170px;&nbsp; &nbsp; height: 170px;&nbsp; &nbsp; opacity: 1;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; right: 100%;&nbsp; }}.bar span {&nbsp; position: absolute;&nbsp; top: -40px;&nbsp; text-transform: uppercase;&nbsp; font-family: cursive;&nbsp; font-weight: bold;&nbsp; font-size: 30px;&nbsp; left: 0;&nbsp; color: #fff !important;}.fade-in {&nbsp; animation: fadeinout 2s infinite alternate;&nbsp; opacity: 0;}@keyframes fadeinout {&nbsp; 100% {&nbsp; &nbsp; opacity: 1;&nbsp; }}<div class="loader loader--active">&nbsp; <!-- loading spinning div -->&nbsp; <div id="loader-bl">&nbsp; &nbsp; <div class="loading_overlap d-flex align-items-center">&nbsp; &nbsp; &nbsp; <div class="loading_overlap_float">&nbsp; &nbsp; &nbsp; &nbsp; <div class="bar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="circle"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="fade-in">Fade IN Out</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Loading</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>