javascript - 如何让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); }
}