Css 字体大小动画在safari上无法正常工作

我有一个CSS动画，在Firefox和Chrome上运行良好，但在Safari上运行不稳定

在本页上：

CSS:

---

我正在添加一个

.selected msg

类，以在选择li文本时设置其样式

看看下面我们能读到的关于在屏幕上的动画中使用

字体大小的内容

更改
字体大小
会更改元素的几何图形。这意味着它可能会影响页面上其他元素的位置或大小，这两个元素都需要浏览器执行布局操作

一旦这些布局操作完成，任何损坏的像素都需要绘制，然后页面必须合成在一起

总之，为了获得更好的性能，请避免在
font-size
属性上执行动画

在您的情况下，可以使用
transform
属性和
scale（）
函数获得更平滑的结果，因为：

更改
transform
不会触发任何几何体更改或绘制，这非常好。这意味着该操作可能由合成器线程在GPU的帮助下执行

你可以在这上面看到一个带有CSS的实例！只需点击
Run
即可查看运行效果。
只想在这个答案上加上我的两便士。“缩放”确实工作得更好，但请确保从最大值向下缩放，而不是相反。也就是说，如果您想从20px缩放到40px，请将字体大小设置为40px并缩放0.5-如果您将字体大小设置为20px并缩放2，则最终会变得模糊。比例也不是完美的，因为它会在一定的尺寸下咀嚼渲染；如果你做的动画速度非常慢，你会注意到它看起来有点奇怪。
    /* ------------- msg -------*/
@-webkit-keyframes animate-selection {
    from {
    font-size: 2.7em;
    color: #a6a6a6;
    }

    to {
    font-size: 2.9em;
    color: #fff;
    }
}


@keyframes animate-selection {
    from {
    font-size: 2.7em;
    color: #a6a6a6;
    }

    to {
    font-size: 2.9em;
    color: #fff;
    }
}

.msg-marketing li.selected-msg a {
    font-family: 'Neue Haas Unica W01 Medium It', arial, helvetica, sans-serif;
    font-size: 2.9em;
    letter-spacing: 0.02em;
    font-weight: 500;
    color: #fff;
    line-height: 34px;
    display: -webkit-box;
    display: box;
    width: 100%;
    -webkit-animation: animate-selection 600ms ease-out; /* Safari 4.0 - 8.0 */
    animation-name: animate-selection;
    animation-duration: 600ms;
    animation-delay: 0s;
    animation-timing-function: ease-out;
}