【发布时间】：2022-01-19 13:36:28
【问题描述】：
我有一个带有大约 320 个点标记的自定义 SVG 地图。我正在尝试在标记上做一些动画。第一个是通过不透明动画让它们散布负载（最终在初始负载之后添加一些其他动画，例如每秒左右随机发光一个）。
页面加载后，JS 将带有自定义延迟的 CSS 动画添加到每个标记。当我把它放在一个页面上时，整个浏览器变得笨拙并且不会滚动，并且我的 CPU 开始发出各种噪音，所以不知何故需要更好地优化它以不杀死用户的计算机。在 CodePen 中，由于某种原因，它似乎并没有引起那么严重的问题，但是对于后半部分标记，动画确实变得笨拙。
我尝试过使用 jQuery animate 并没有帮助，因为我遇到了同样的性能问题。
问题仅仅是标记过多吗？
HTML
<div id="map">
<div class="container">
<!-- SVG CODE IS HERE, SEE CodePen as it is too big to fit here -->
</div>
</div>
CSS
#map {
background: radial-gradient(circle, rgba(77,75,75,1) 0%, rgba(47,47,47,1) 100%);
padding: 50px;
}
#markers circle {
fill: #4ca7fc;
stroke: rgba(255,255,255,0.44);
stroke-width: 1;
opacity: 0;
}
@keyframes enter {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS（使用 jQuery）
var animation_delay = 0;
jQuery( '#markers circle' ).each(function(){
animation_delay += .01;
jQuery( this ).css( 'animation', 'enter 1s ease-out ' + animation_delay + 's normal 1 forwards' );
});
【问题讨论】：
标签： jquery css css-animations