1
次のコードがあります。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単独で可能ですか？
はい、あなたの他のキーフレームの側面に沿って走る別のキーフレームを持つことができます。他のものの不透明度を扱うだけです。タイミングが同じである限り。またはタイミングを微調整して調整できます – Andrew