字体大小的动画在 Safari 上无法正常工作

Question

我的 CSS 动画在 Firefox 和 Chrome 上运行良好，但在 Safari 上会抖动。

在这个页面上： http://www.warhaftig.com/access-marketing.html

CSS：

    /* ------------- 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;
}

我正在添加一个.selected-msg 类，以便在选择 li 文本时为其设置样式。

Answer 1

看看下面我们可以读到的关于在CSS Triggers page 的动画中使用font-size 的内容。

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

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

明确地说，为了获得更好的性能，请避免在 font-size 属性上做动画。

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

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

您可以在 fiddle 上看到带有 CSS 的实时示例！直接点击Run查看运行效果。