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

时间:2016-03-09 11:27:31

标签: html css css3 css-transitions css-animations

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

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


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

1 个答案:

答案 0 :(得分:0)

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

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



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

<div class="dummy-text">
  This is text
</div>
&#13;
&#13;
&#13;