更改CSS3关键帧动画中的其他元素属性
问题描述：
我有以下代码。更改CSS3关键帧动画中的其他元素属性
#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中单独使用？
答
您可以通过定义另一个keyframes只是改变font-color和甚至包括animation-delay，animation-fill-mode改变font-color当行到达终点创建。
动画延迟：
动画延迟CSS属性指定动画应该 开始。这可以让动画序列在将 应用于元素之后开始一段时间。
动画填充模式：
动画填充模式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>
是的，你可以有沿侧你的另一关键帧运行另一个关键帧。只是处理其他事物的不透明性。只要时间是一样的。或者你可以调整时机来适应 – Andrew