我的页面有一个widget，它是一个span元素，样式如下：
span.widget
{
line-height: 0;
font-size: 150%;
transition: font-size 1s;
}
我有 JavaScript 修改它的字体大小：
var widget=document.getElementById('the_widget');
widget.style.fontSize='200%';
如果我这样做，字体大小会在 1 秒内连续放大，效果很好。
然而，我想要实现的是字体大小瞬间跳起来，然后平滑地缩小。我试过以下代码：
widget.style.transition='none';
widget.style.fontSize='200%';
widget.style.transition='font-size 1s';
widget.style.fontSize='150%';
但是这不起作用，因为浏览器在第一次调整大小后不会重排元素，所以第二次调整大小只是保持不变，没有动画，也没有任何变化的迹象。
我也想到了与其他 css 大小转换类似的事情，比如高度和宽度，但遇到了同样的问题。
所以，在输入这个问题之后，我实际上偶然发现了一个可能是可持续解决方案的变通办法或 hack，即使它有点神秘；我发现了这个问题：
表示您可以使用 JavaScript 强制重排，使用
offsetHeight我发现这在 Chrome 和 Firefox 中有效，尚未在任何其他浏览器中测试过：
widget.style.transition='none';
widget.style.fontSize='200%';
void(widget.offsetHeight);
widget.style.transition='font-size 1s';
widget.style.fontSize='150%';
我认为这是可行的，因为将表达式传递给
void通过更改 CSS 类，然后将
font-sizetransition不需要javascript。
试试这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font-size Animation</title>
<style>
div {
width: fit-content;
margin: auto;
}
span.widget {
font-size: 150%;
color: red;
animation: stayingalive 1.5s ease-out infinite;
}
@keyframes stayingalive {
0%, 30%, 100% {
font-size: 150%;
}
15% {
font-size: 210%;
}
50% {
font-size: 250%;
}
}
</style>
</head>
<body>
<div>
<span class="widget">Uh uh uh uh ⚞ ❤ ⚟ staying alive!</span>
</div>
</body>
</html>