Question

我有一组div设置为在用户向下滚动页面时向上滑动。一旦文本完全到达＆＃34;在他们的位置，颜色从我定义的颜色变回黑色。

我无法弄清楚原因。

我已经尝试过添加！重要的颜色了。

任何帮助都会很棒。

谢谢！

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

＆＃13;

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

＆＃13;

Answer 1

我认为这是一个奇怪的错误＆＃34;指文本呈现。也许它的硬件依赖。

我从@MaximillianLaumeister那里拿走了小提琴，并将 translateZ(0px) 添加到关键帧＆＃39;转换：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);
    }   
}

动画结束后，我能够摆脱暗化效果。

Answer 2

你可以使用

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

这将保留完成动画后的动画样式。我同意提供的代码不足以重现问题，但我绝对认为这将解决您的问题。

more details...

我的CSS3过渡后为什么我的颜色会变回黑色？

2 个答案: