Question

在将transform：scale与transition：scale结合使用时，动画存在两个问题，并且在Firefox和Chrome中这些问题相似。

1）过渡期间字体/边框非常模糊 2）转换大约0.3秒后，浏览器会“锁定”新的比例尺。很难解释，但您将从示例中清楚地看到。

<html>
<body>
  <div id="block">
    <div class="text">123123</div> 
    <div class="text">123123</div> 
    <div class="text">123123</div> 
  </div>
</body>
</html>

<style>
#block {
   margin-top: 100px;
   margin-left: 100px;
   width: 80%;
   height: 300px;
   display: flex;
   flex-direction: column;
}
.text {
   margin: auto;
   width: 250px;    
   font-size: 25px;
   transition: transform 0.5s;
   border: 1px solid blue;
   cursor: pointer;
}
.text:hover {
    transform: scale(1.5);
}
</style>

我尝试添加背面可见性：隐藏，但这在Firefox中无效，并且使过渡结束永久变得模糊。

还尝试使用transform-origin：100％0，但无济于事。

看看Codepen：

https://codepen.io/vibonaaci/pen/LKqrPX

有什么想法吗？如果您在其他一些风格化元素上使用效果，则问题确实会伤害眼睛。

结合使用transform：scale和transition：transform时，如何消除字体的模糊和“锁定”效果？

0 个答案: