css - 字体大小的动画在 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 的内容.

Changing font-size alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

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

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

Changing transform does not trigger any geometry changes or painting, which is very good. This means that the operation can likely be carried out by the compositor thread with the help of the GPU.

您可以在这个 fiddle 上看到一个使用您的 CSS 的实例!点击Run即可看到运行效果。