为什么我的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转换后颜色变回黑色？

回答

相关问题