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

2023年3月28日 275次阅读

当用户向下滚动页面时,我有一组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 {
	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);
	}	
}

最佳答案 我认为这是一个奇怪的“bug”,指的是文本呈现.也许它也依赖于硬件.

我从@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);
    }   
}

在动画结束后,我能够摆脱暗化效果.

点赞