更改CSS3关键帧动画中的其他元素属性

Question

我有以下代码。

#mf-loader-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  height: 30px;
}
.mf-loader-circle {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 2px solid #03C9A9;
  top: -15px;
  background: white;
  text-align: center;
  line-height: 30px;
  color: #03C9A9;
}
.mf-loader-text {
  position: absolute;
  width: 150px;
  top: 20px;
}
#one-text {
  left: -10px;
}
#two-text {
  left: 200px;
}
#three-text {
  left: 480px;
}
#two {
  left: 240px;
}
#three {
  left: 490px;
}
#mf-loader {
  width: 100%;
  height: 3px;
  background: #03C9A9;
  position: absolute;
  -webkit-animation: mymove 5s;
  /* Chrome, Safari, Opera */
  animation: mymove 5s;
  border-radius: 3px;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  0% {
    width: 0px;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    width: 0px;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

<div id="mf-loader-container">

  <div id="mf-loader">
    <div class="mf-loader-circle" id="one">
      1
    </div>
    <div class="mf-loader-circle" id="two">
      2
    </div>
    <div class="mf-loader-circle" id="three">
      3
    </div>
    <div class="mf-loader-text" id="one-text">
      Each day will be better than last.
      <br>This one especially
    </div>
    <div class="mf-loader-text" id="two-text">
      Subscribing .. Thank you for subscribing. We appreciate it!
    </div>
    <div class="mf-loader-text" id="three-text">
      DONE
    </div>
  </div>
</div>

这是一个使用CSS关键帧的简单加载器。现在我试图控制关键帧动画内数字下面的文本元素的不透明度。我正在尝试将每个文本的opacity从0更改为1，因为该行到达该特定点（关键帧达到相应的％） - 这是否仅在CSS中可行？

Answer 1

您可以通过定义另一个keyframes来创建，只需更改font-color，甚至包括animation-delay，animation-fill-mode即可在行到达时更改font-color终点。

  

动画延迟：

     

动画延迟CSS属性指定动画应该的时间   开始。这让动画序列在它之后的某个时间开始   应用于元素。

     

动画填充模式：

     

animation-fill-mode CSS属性指定CSS动画的方式   应该在执行之前和之后将样式应用于目标。

#mf-loader-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  height: 30px;
}
.mf-loader-circle {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 2px solid #03C9A9;
  top: -15px;
  background: white;
  text-align: center;
  line-height: 30px;
  color: #03C9A9;
}
.mf-loader-text {
  position: absolute;
  width: 150px;
  top: 20px;
}
#one-text {
  left: -10px;
  -webkit-animation: cl 3s;
}
#two-text {
  left: 200px;
   -webkit-animation: cl 3s;
   -webkit-animation-delay:2s;
   -webkit-animation-fill-mode:forwards;
   color:rgba(1,1,1,0.6);
}
#three-text {
  left: 480px;
  -webkit-animation: cl 3s;
  -webkit-animation-delay:3s;
   -webkit-animation-fill-mode:forwards;
   color:rgba(1,1,1,0.6);
}
@-webkit-keyframes cl{
  
  from{
    color:rgba(1,1,1,0.6);
  }
  to{
    color:rgba(1,1,1,1);
  }

}
#two {
  left: 240px;
}
#three {
  left: 490px;
}
#mf-loader {
  width: 100%;
  height: 3px;
  background: #03C9A9;
  position: absolute;
  -webkit-animation: mymove 5s;
  /* Chrome, Safari, Opera */
  animation: mymove 5s;
  border-radius: 3px;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  0% {
    width: 0px;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    width: 0px;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

<div id="mf-loader-container">

  <div id="mf-loader">
    <div class="mf-loader-circle" id="one">
      1
    </div>
    <div class="mf-loader-circle" id="two">
      2
    </div>
    <div class="mf-loader-circle" id="three">
      3
    </div>
    <div class="mf-loader-text" id="one-text">
      Each day will be better than last.
      <br>This one especially
    </div>
    <div class="mf-loader-text" id="two-text">
      Subscribing .. Thank you for subscribing. We appreciate it!
    </div>
    <div class="mf-loader-text" id="three-text">
      DONE
    </div>
  </div>
</div>