Javascript 如何获得一致平滑的HTML文本缩放动画？ 简要说明

我需要一种使用JS缩放HTML文档中文本的方法，这样我就可以轻松地使用更好的缓和功能和CSS不提供的其他功能

这里展示了4种不同的方法来制作相同的缩放动画，因此可以并排比较它们。最左边的一个运行平稳，就像我想要的，但我正在寻找一个JS解决方案

我在Windows10上使用Chrome。对我来说，如果没有使用HA（硬件加速），文本在JS动画（使用库Velocity.JS或Anime.JS）期间会抖动。通过添加3D变换启用HA（我在父对象上添加了一个

perspective

属性），它看起来很模糊（但不是抖动）。在Edge中，没有模糊，但在JS中，无论是否启用3D变换，文本仍然会抖动。在我的iPhone上，所有方法（CSS或JS，HA或非）都运行得非常顺利

我正在寻找一个JS解决方案，它运行起来和CSS解决方案一样流畅。我不知道这个问题是否是由Windows或其他原因引起的，但我一定能做些什么来修复它。我真的很喜欢Velocity.js，尤其是Anime.js，我想使用它们，但我的文本在缩放时会变得紧张不安

更多解释 当我尝试用CSS以以下方式在悬停上设置

元素的动画时，这一切都开始了：

p {
    font-size: 2em;
    transition: all 4s;
}

p:hover {
    font-size: 6em;
}

很简单。问题是，随着文本大小的改变，它会抖动，因为它显然会在点上发生变化。我不喜欢那样。我想要奶油般光滑的动画

所以我开始寻找最好的方式来设置文本大小的动画。我已经决定，答案似乎是使用某种缩放解决方案，而不是改变字体大小

但现在我有另一个问题。我希望能够使用CSS不支持或支持非常差的功能，例如弹性和弹性放松功能以及动画链接和队列。最好的方法似乎是使用JavaScript库。但现在我有一个问题。虽然仅使用2D变换的CSS缩放提供了我非常想要的奶油般平滑、像素般锐利的缩放，但JavaScript库（我尝试了Velocity.js和Anime.js）引入了与更改字体大小时相同的抖动行为。对于CSS或JS，如果启用3D变换（导致浏览器使用硬件加速），文本缩放就会变得模糊

所以我放了一个例子来直观地说明问题是什么。以下是它们在3个浏览器中的显示方式：

Windows 10上的Chrome

完美的

模糊的

紧张的

模糊的

Windows 10上的边缘浏览器

完美的

完美的

紧张的

紧张的

在我的iPhone上的Chrome或Safari上，由于HA处理缩放的方式，所有这些都有点模糊，但模糊几乎不明显，因此不是问题

我想要的/底线

---

纯CSS的黄油般光滑的动画通过3D变换实现，无需HA，具有轻松的灵活性，动画与JavaScript库提供的样式分离。必须有一个解决办法。如果CSS可以像我在第一种方法中看到的那样平滑，那么肯定有一个库使用类似的平滑技术来防止文本在缩放时变得不稳定。非常感谢您的帮助。

“但是CSS不支持我需要的缓解功能”？不知道你是什么意思？问题是什么？使用

css

或

javascript

实现动画不需要库。问题：如何使我的javascript转换缩放动画像css一样平滑？现在一切都很紧张。你需要哪些不受支持的放松功能？弹性、反弹、物理等放松功能。。。我知道它们是可能的，但是库让它们变得非常简单。@guest271314我已经向库的GitHub页面提交了一个问题。谢谢你的帮助！：）