如何让div中的文字内容反复增减字体大小？

Question

我想知道是否有可能让 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 函数不断运行，这可能会减慢我的页面速度。

有没有更好的方法来获得这种效果？

Answer 1

使用带有缩放变换的 CSS 过渡。字体大小的转换从来都不是平滑的，而且转换transform成本很低。

.grow { 
    transition: all .2s ease-in-out;
}
.grow:hover {
    transform: scale(1.5);
}

重复可以通过 CSS3 动画来完成：

.grow {
  width: 100px;
  text-align: center;
  animation: grow-animation 2s linear infinite;
}

@keyframes grow-animation {
  0% { transform: scale(1); }
  50% {transform: scale(2); }
  100% {transform: scale(1); }
}