Html 在脉冲动画中使用CSS盒阴影会消耗大量CPU

要求在标签上显示脉冲动画，以便突出显示未完成的通知。 我是在网上搜索时遇到的，并实现了同样的功能。然而，它工作得很好，当标签脉冲时，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);
   }
 }

    <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>
.
.

html:

.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);
   }
 }

    <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}

基本上返回“label primary pulse”

发生这种情况是因为您使用的是

框阴影

，这对动画不太好，因为它会触发重新绘制

您可以选择触发布局、绘制和合成更改的属性

最好的是

opacity

和

transform

，也许您可以更改动画以使用它们

编辑：创建了两个JSFIDLE，一个带有，另一个带有。我已经编辑了您的代码，但您可以检查性能，研究它，了解更改并使其适应您的需要

我是如何做到的：

.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);
   }
 }

    <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>
.
.

添加了一个

：在

伪元素之前，该伪元素将使动画在该编号下运行<代码>将更改：转换告诉浏览器元素的变换将更改，浏览器将对其进行优化

.pulse{
位置：相对位置；
显示：内联块；
宽度：22px；
高度：22px；
线高：22px；
边界半径：100%；
背景色：#cca92c；
文本对齐：居中；
光标：指针；
}
.脉搏：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#cca92c；
边界半径：100%；
z指数：-1；
动画：脉冲2s无限；
改变：转变；
}
.脉冲：悬停：之前{
动画：无；
}
@关键帧脉冲{
0% {
变换：比例（1）；
不透明度：1；
}
100% {
变换：尺度（2）；
不透明度：0；
}
}

---

谢谢！我真的不太了解css，更不用说使用动画了。我要坐飞机look@blueren添加了一个例子，非常感谢！我欣赏这个快速的解决方案。如果将来JSFIDLE链接失效，我建议您也将代码张贴在这个答案上。完成后，添加了

transform

代码，因为我认为这是非常奇怪的重要代码。我可以看到它在JSFIDLE和so中工作。但当我把同样的东西放进我的流星计划时。它没有动画。我只得到黄色的圆圈。