펄스 애니메이션을위한 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입니다. 코드를 편집했지만 성능을 확인하고 연구하고 변경 사항을 이해하고 필요에 맞게 수정할 수 있습니다.

내가 그것을 어떻게 :

추가 된 애니메이션이 수에서 실행해야하는 :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>