为什么我的CSS动画这么慢？

Question

我的动画有效，但在3 DIV增长后，动画会减慢浏览器的速度。我认为CSS是采用高性能动画的方法吗？

这是我的代码：

HTML：

    <div id="redi" class="backgroundheart"></div>
    <div id="redii" class="backgroundheart"></div>
    <div id="rediii" class="backgroundheart"></div>
    <div id="rediv" class="backgroundheart"></div>
    <div id="redv" class="backgroundheart"></div>
    <div id="redvi" class="backgroundheart"></div>
    <div id="redvii" class="backgroundheart"></div>
    <div id="redviii" class="backgroundheart"></div>
    <div id="redix" class="backgroundheart"></div>
    <div id="redx" class="backgroundheart"></div>
    <div id="redxi" class="backgroundheart"></div>

CSS：

.start{
    animation: grow 10s ease-in;
}
@keyframes grow {
    0% {transform: scale(0.1) rotate(45deg);}
    100% {transform: scale(100) rotate(45deg);}
}

CSS样式：

.backgroundheart{
width: 50px;
height: 50px;
position: fixed;
top: 50%;
left: 50%;
margin:5px 0px 0px -35px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.backgroundheart:before,.backgroundheart:after { 
position: absolute;
width: 110%;
height: 110%;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.backgroundheart:before{
bottom: 0px;
left: -60%;
}
.backgroundheart:after{
top: -60%;
right: 0px;
}
   #redi.backgroundheart,#redi.backgroundheart:before,#redi.backgroundheart:after{background: #b71c1c;}
    #redii.backgroundheart,#redii.backgroundheart:before,#redii.backgroundheart:after{ background: #c62828; }
    #rediii.backgroundheart,#rediii.backgroundheart:before,#rediii.backgroundheart:after{ background: #d32f2f; }
#rediv.backgroundheart,#rediv.backgroundheart:before,#rediv.backgroundheart:after{ background: #e53935; }
#redv.backgroundheart,#redv.backgroundheart:before,#redv.backgroundheart:after{ background: #f44336; }
#redvi.backgroundheart,#redvi.backgroundheart:before,#redvi.backgroundheart:after{ background: #ef5350; }
#redvii.backgroundheart,#redvii.backgroundheart:before,#redvii.backgroundheart:after{ background: #e57373; }
#redviii.backgroundheart,#redviii.backgroundheart:before,#redviii.backgroundheart:after{ background: #ef9a9a; }
#redix.backgroundheart,#redix.backgroundheart:before,#redix.backgroundheart:after{ background: #ffcdd2; }
#redx.backgroundheart,#redx.backgroundheart:before,#redx.backgroundheart:after{ background: #ffebee; }
#redxi.backgroundheart,#redxi.backgroundheart:before,#redxi.backgroundheart:after{ background: #fff; }

JQuery的：

$('.backgroundheart').each(function(index, el) {
    i = index * 2000;
    setTimeout(function(){
        $(el).addClass('start');
    },i)
});

感谢您的帮助！