パルスアニメーションにCSSボックスシャドーを使用するとかなりのCPUを使用する

Question

未解決の通知を強調するために、ラベルにパルスアニメーションを表示する必要がありました。 私はthisをオンラインで調べていて、同じものを実装していました。しかし、正常に動作しますが、ラベルがパルス状になっているときは、CPU使用率は50％で一定ですが、通常はほとんどありません。 私は、何が、なぜこれが起こっているのか、そして可能であれば修正を理解したいと思います。

CSS：

.pulse { 
    /*margin:100px;*/ 
    display: block; 
    /*width: 22px;*/ 
    /*height: 22px;*/ 
    /*border-radius: 100%;*/ 
    background: #cca92c; 
    cursor: pointer; 
    box-shadow: 0 0 0 rgba(204,169,44, 0.4); 
    animation: pulse 2s infinite; 
} 

.pulse:hover { 
    animation: none; 
} 

@-webkit-keyframes pulse { 
    0% { 
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    } 
    70% { 
     -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0); 
    } 
    100% { 
     -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
    } 
} 

@keyframes pulse { 
    0% { 
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    box-shadow: 0 0 0 0 rgba(196,33,61, 0.85); 
    } 
    70% { 
     -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0); 
     box-shadow: 0 0 0 10px rgba(204,169,44, 0); 
    } 
    100% { 
     -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
     box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
    } 
} 

HTML：

<a class="dropdown-toggle" data-toggle="dropdown" id="alertingDashboardDropdown" href="#">Alerts Dashboard 
        <span class="label {{alertCount.totalOpenAlertsLabelClass}} dropdown-subscript-white pull-right">{{alertCount.totalOpenAlerts}}</span> 
       </a> 
. 
. 

{{alertCount.totalOpenAlertsLabelClass}}は基本的にはあなたが非常にではありませんbox-shadowを使用しているので、これが発生し、 "ラベル・一次パルス"

Answer 1

を返します。アニメーションに適しています。なぜなら、それはレパを引き起こすからですint。

check hereどのようなプロパティがレイアウト、ペイント、コンポジットの変更をトリガすることができます。

ベストはopacityとtransformです。アニメーションを変更して使用することもできます。

編集：box-shadowとtransformの2つがあります。私はあなたのコードを編集しましたが、あなたはパフォーマンスをチェックし、それを研究し、変更を理解し、あなたのニーズに適応させることができます。私はそれをやった方法

：

は、番号の下にアニメーションを実行しています:before擬似要素を追加しました。 will-change: transform;は、要素の変換が変更され、ブラウザが最適化することをブラウザに通知します。

.pulse { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    line-height: 22px; 
 
    border-radius: 100%; 
 
    background-color: #cca92c; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.pulse:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #cca92c; 
 
    border-radius: 100%; 
 
    z-index: -1; 
 
    animation: pulse 2s infinite; 
 
    will-change: transform; 
 
} 
 

 
.pulse:hover:before { 
 
    animation: none; 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(2); 
 
    opacity: 0; 
 
    } 
 
}

<a class="dropdown-toggle" data-toggle="dropdown" id="alertingDashboardDropdown" href="#"> 
 
    <span>Alerts Dashboard</span> 
 
    <span class="pulse">5</span> 
 
</a>