所以我一直在尝试这种不使用 JS 交互元素的形式挑战,我决定让它变得“花哨”。单击时,表单下降,箭头旋转;但是,您会注意到像素的跳跃。我看过盒子模型好几次,所有的像素都加起来了——我不知道这个跳跃是从哪里来的。阻止它的唯一方法是使箭头成为绝对箭头,但如果布局没有变化,为什么会发生这种情况仍然没有意义。有什么想法吗?
https://codepen.io/mtbroomell/pen/zeMYdb
.ins {
display: block;
text-shadow:
20px 0 0 rgba(255,0,0,.6),
-20px 0 0 rgba(0,255,0,.6),
0 20px 0 rgba(0,0,255,.6);
font-size: 200px;
line-height:1;
color: transparent;
transform: rotate(0deg);
transition: .5s;
}
.form-toggle:checked ~ .ins-wrap .ins {
text-shadow:
0 0 0 rgba(0,0,0,.5),
0 0 0 rgba(0,0,0,.5),
0 0 0 rgba(0,0,0,.5);
transition: .5s;
transform: rotate(90deg);
}
^^^ 以上是一些示例样式,因为我不允许在没有代码的情况下发布 CodePen。
最佳答案
我要先说这对我来说在使用 Chrome 72 的 2017 Macbook Pro 上看起来相当流畅。
也就是说,通过诱使浏览器使用 GPU 线程而不是 CPU 来渲染元素,几乎所有基本变换上的 CSS 动画卡顿都可以得到改善。您可以通过强制进行 3d 变换来做到这一点。
.animatedElement {
transform: translateZ(0);
}
Chrome 和 FF 中的闪烁和跳跃通常可以通过 backface-visibility
和 perspective
来修复。请记住使用浏览器前缀或添加它们的构建工具。
.animatedElement {
backface-visibility: hidden;
perspective: 1000;
}
它们本身并没有在视觉上做任何事情,但它们会诱使浏览器渲染器进行一些额外的计算。
关于html - CSS旋转动画上的像素跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54718832/