CSS3の移行後に私の色が黒に戻ってしまうのはなぜですか？

Question

ユーザーがページを下にスクロールすると、divのグループがスライドするように設定されています。テキストがその場所に完全に「到着」すると、色は私の定義した色から黒に戻ります。

私は理由を理解できません。

私はすでに色に重要な追加しようとしました！

助けがあれば助かります。

ありがとうございます！

<div class="row" style="margin-top: 50px; background-color: #fafafa; padding-bottom: 30px;"> 
     <div class="col-md-4" id="firstcol"> 
      <center> 
       <h3 style="padding-top: 40px; color: #6D1A66 !important;">About Us</h3> 
       <p style="padding: 40px; text-align: left !important;"> 
       </p> 
      </center> 
     </div> 

     <div class="col-md-4" id="secondcol"> 
      <center> 
       <h3 style="padding-top: 40px; color: #6D1A66 !important;">Browse Our New Selection</h3> 
       <p style="padding: 40px; text-align: left !important;"> 
       </p> 
      </center> 
     </div> 

     <div class="col-md-4" id="thirdcol"> 
      <center> 
       <h3 style="padding-top: 40px; color: #6D1A66 !important;">Come Stop By!</h3> 
       <p style="padding: 0 40px 40px 40px; text-align: left !important;"> 

       </p> 
      </center> 
     </div> 
    </div> 

これは、遷移コードです：

.expandUp{ 
    animation-name: expandUp; 
    -webkit-animation-name: expandUp; 

    animation-duration: 1.5s; 
    -webkit-animation-duration: 1.5s; 

    animation-timing-function: ease;  
    -webkit-animation-timing-function: ease;   

    visibility: visible !important; 
} 

@keyframes expandUp { 
 
\t 0% { 
 
\t \t transform: translateY(100%) scale(0.6) scaleY(0.5); 
 
\t } 
 
\t 60%{ 
 
\t \t transform: translateY(-7%) scaleY(1); 
 
\t } 
 
\t 75%{ 
 
\t \t transform: translateY(3%); 
 
\t } \t 
 
\t 100% { 
 
\t \t transform: translateY(0%) scale(1) scaleY(1); 
 
\t } \t 
 
} 
 

 
@-webkit-keyframes expandUp { 
 
\t 0% { 
 
\t \t -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); 
 
\t } 
 
\t 60%{ 
 
\t \t -webkit-transform: translateY(-7%) scaleY(1); 
 
\t } 
 
\t 75%{ 
 
\t \t -webkit-transform: translateY(3%); 
 
\t } \t 
 
\t 100% { 
 
\t \t -webkit-transform: translateY(0%) scale(1) scaleY(1); 
 
\t } \t 
 
}

Answer 1

あなたは、これはアニメーションSTを維持します

div { 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ 
    animation-fill-mode: forwards; 
} 

を使用することができますアニメーションを完成させた後はそれをそのまま残します。私は、提供されたコードが問題を再現するのに十分ではないことに同意しますが、私はこれがあなたの問題を解決すると確信しています。

more details...

Answer 2

私はそれがテキストのレンダリングを参照奇妙な「バグ」だと仮定します。ハードウェアにも依存しているかもしれません。

私は@MaximillianLaumeisterからバイオリンを取り、キーフレームトランスフォームにtranslateZ(0px)を追加しました：https://jsfiddle.net/frx650tL/2/

@keyframes expandUp { 
    0% { 
     transform: translateY(100%) scale(0.6) scaleY(0.5) translateZ(0px); 
    } 
    60%{ 
     transform: translateY(-7%) scaleY(1) translateZ(0px); 
    } 
    75%{ 
     transform: translateY(3%) translateZ(0px); 
    } 
    100% { 
     transform: translateY(0%) scale(1) scaleY(1) translateZ(0px); 
    } 
} 

そして私は、アニメーションが終了した後に暗くなる効果を取り除くことができました。