Safariでフォントサイズのアニメーションが正しく動作しない

Question

FirefoxとChromeではうまく動作するが、Safariではうまく動作するCSSアニメーションがあります。

これは、このページにある： 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; 
} 

私はそれを選択したITときのliテキストのスタイルを.selected-msgクラスを追加しています。

Answer 1

アニメーションのfont-sizeについては、CSS Triggers pageでご覧になれます。

font-sizeを変更すると、要素のジオメトリが変更されます。つまり、ページ上の他の要素の位置やサイズに影響を与える可能性があります。どちらの場合も、ブラウザはレイアウト操作を実行する必要があります。

これらのレイアウト操作が完了したら、破損したピクセルをペイントする必要があり、ページを合成する必要があります。

明らかに、パフォーマンスを向上させるには、font-sizeプロパティでアニメーションを実行しないでください。あなたのケースでは

ので、あなたは、スムーズな結果を得るためにtransformプロパティとscale()機能を使用することができます。transformを変更すると、非常に良いですこれは、任意の形状の変更や絵をトリガしません

。これは、GPUの助けを借りてコンポジットスレッドによって操作が実行される可能性があることを意味します。

あなたはこのfiddleにあなたのCSSで実際の例を見ることができます！実行中の効果を確認するには、Runをクリックしてください。