我有一个矩形的 div 对象,它正在缓慢地上下移动(无限动画)。该 div 对象具有 1px 宽度的橙色边框(例如)。有什么办法可以防止边框闪烁吗?
我假设这是因为垂直移动(左右边框不闪烁)并且与图像在显示器上的渲染方式有关,但我可以做些什么来防止它吗?我还需要该边框始终可见。
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
body {
background-color:#000;
padding-top:200px;
}
div {
border: 1px solid orange;
background-color:#000;
width:200px;
height:50px;
margin:0 auto;
animation: float 5s infinite;
}
<div></div>
最佳答案
你可以试试这个 - 它不会闪烁,但你需要一个偶数的边框才能工作(这里是 2px)。
向元素添加了一个 no-flick 类。
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
body {
background-color:#000;
padding-top:200px;
}
div {
border: 2px solid orange;
background-color:#000;
width:200px;
height:50px;
margin:0 auto;
animation: float 5s infinite;
}
.no-flick{-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);}
<div class="no-flick"></div>
关于css - 动画闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52717887/