我正在使用比例转换为section标签设置动画,我注意到在执行动画时,顶部和底部边框都有一些闪烁。有没有办法阻止这种行为?我已经尝试添加transform-style: preserve-3d;
和backface-visibility: hidden;
并没有成功,我让Codepen复制了我的问题
谢谢!
body {
background: rgb(0, 0, 0);
background: linear-gradient( 0deg, rgba(0, 0, 0, 1) 0%, rgba(18, 18, 18, 1) 15%, rgba(55, 55, 55, 1) 100%);
height: 100vh;
color: #f2f2f2;
}
section {
display: flex;
flex-wrap: wrap;
height: 500px;
opacity: 0;
transform: scale(1, 0);
animation: show-section 1s forwards;
}
@keyframes show-section {
100% {
opacity: 1;
transform: scale(1);
}
}
article {
box-shadow: inset 0 0 0 1px #f2f2f2;
flex: 1;
min-width: 50%;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
<section>
<article>
<h2>Text 1</h2>
</article>
<article>
<h2>Text 2</h2>
</article>
<article>
<h2>Text 3</h2>
</article>
</section>