移动设备上的字体大小转换不平滑

Question

我正在尝试在font-size属性上应用转换。它在桌面浏览器上运行顺畅但在移动浏览器的情况下，例如android chrome或iOS chrome或safari字体大小的过渡并不顺畅。
以下是CSS

.dummy-text{
        font-size: 24px;
        transition: font-size 0.5s linear;
    }

下面是小提琴
https://jsfiddle.net/3y7zbv0c/1/
有人可以告诉我如何在移动设备浏览器上顺利播放它吗？

Answer 1

如果您使用@keyframes的动画，性能将优于transition。然而，你的问题是增加文本大小的javascript。在这里，你是没有javascript的解决方案：

https://jsfiddle.net/3y7zbv0c/2/

＆＃13;

＆＃13;

@keyframes example {
  from {font-size: 24px;}
  to {font-size: 34px;}
}
.dummy-text{
  font-size: 24px;
  animation: example 4s infinite;
}

＆＃13;

<div class="dummy-text">
  This is text
</div>

＆＃13;

＆＃13;

＆＃13;