如何在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 {

  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>