字体大小的动画在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类时，它选择的样式李文本。

Answer 1

看看我们在CSS Triggers page动画中使用font-size的内容。

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

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

明确，为了更好的表现，请避免在font-size属性上做动画。

在你的情况，你可以使用transform属性和scale()功能得到平滑的结果，这是因为：

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

您可以在此fiddle上看到一个带有CSS的实例！只需点击Run即可看到效果运行。