javascript - 如何使div中的文本内容反复增加和减小字体大小？

我想知道是否有可能让div的文本内容每秒重复地增加和减少字体大小。这将产生一种效果，即文本在移回之前似乎更靠近查看器，理想情况下，这将是一个平滑的过渡，而不像2帧gif。
这是我尝试使用Javascript每秒更改字体大小：

<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
   var textdiv = document.getElementById("textdiv");
   textdiv.style.fontSize = "20px";
   textdiv.style.fontSize = "25px";

   setTimeout(zoomtext, 1000);
}
</script>

这不起作用，我不确定这段代码是否会导致平稳的转换。
也许可以通过将字体更改十分之一像素（例如：20px、20.1px、20.2px…等等，直到25px，然后以同样的方式将其减小回20px）来实现平滑过渡。
我担心该方法可能导致Javascript函数不断运行，这可能会减慢我的页面速度。
有没有更好的方法来达到这个效果？

最佳答案

使用CSS Animations也可以达到同样的效果。这也很简单，而且远比使用Javascript更好。
您需要为元素分配animation属性，然后定义该属性。

#textdiv {
   animation: textgrowth 1s infinite alternate;
}

@keyframes textgrowth {
    0% {
    font-size: 20px;
    }
    100% {
    font-size: 25px;
    }
}

确保在CSS规则的末尾添加alternate，使动画来回播放。