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即可查看正在运行的效果。

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

1 个答案: