爲什麼我的CSS3轉換後顏色變回黑色？

我有一組divs設置爲當用戶向下滾動頁面時向上滑動。一旦文本完全「到達」他們的位置，顏色從我定義的顏色回到黑色。爲什麼我的CSS3轉換後顏色變回黑色？

我不明白爲什麼。

我已經嘗試添加！對顏色已經很重要。

任何幫助將是偉大的。

謝謝！

<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 
 
}

來源

2016-05-21 sk03

'已棄用，且此代碼不足以重現您的問題 – dippas

我應該添加....這是H3標記的文字從＃6D1A66變回黑色。 – sk03

你使用什麼代碼來動畫div？該代碼可能是問題。 –

可以使用

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

這將讓動畫ST就像在完成動畫之後一樣。我同意提供的代碼不足以重新創建問題，但我肯定認爲這將解決您的問題。

more details...

來源

2016-07-08 12:12:57 Ryxle

我想這是一個奇怪的「錯誤」指的是文本渲染。也許它也依賴於硬件。

我把小提琴從@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); 
    } 
}

，我能夠在動畫結束後襬脫變黑的效果。

來源

2016-08-01 09:40:38 Seika85

爲什麼我的CSS3轉換後顏色變回黑色？

回答

相關問題