javascript - Webkit アニメーションで CSS スタイルの再計算を制限する

Question

Webkit アニメーションを使用するプロジェクトに取り組んでいます。これは、Javascript と CSS3 を使用した HTML プロジェクトです。

Chromeで実行しようとしましたが、正常に動作しますが、低構成で試してみるとすぐに遅くなります。そこで、Chrome のタイムラインを有効にすると..サプライズ。CSS スタイルは最初から 2ms ごとに再計算されます。

私の質問は、CPU を少し解放するために、1 秒あたり 40 回の計算に制限する方法はありますか..

このすべての CPU 電力の浪費をアニメーション化するために使用しているコードが少しあります。

.miniSignal1{
opacity: 0;
position: absolute;
top : 50px;
left :51px;
width : 400px;
height: 400px;
background-image: url("../../FEZ_resources/images/losange.png");
background-size: 100%;
background-position:center;
background-repeat: no-repeat;
overflow: visible;
-webkit-animation-timing-function: cubic-bezier(0, 0, .5, 1);
}       
@-webkit-keyframes rescale1{
    0%  { -webkit-transform : scale( 0 , 0 ); opacity: 1;}
    50%     { opacity: 1;}
    100%        { -webkit-transform : scale( 2.5 , 2.5 ); opacity: 0;}
}
@-webkit-keyframes rescale2{
    0%  { -webkit-transform : scale( 0 , 0 ); opacity: 1;}
    50%     { opacity: 1;}
    100%        { -webkit-transform : scale( 2.5 , 2.5 ); opacity: 0;}
}

この作品は Javascript によって起動されます

function windowLoaded(){
    setTimeout("launchSignal()",4000);
}

function launchSignal(){
$(".miniSignal1").css("-webkit-animation-name", '');
$(".miniSignal1").css("-webkit-animation-duration", '');
$(".miniSignal2").css("-webkit-animation-name", '');
$(".miniSignal2").css("-webkit-animation-duration", '');
$(".miniSignal3").css("-webkit-animation-name", '');
$(".miniSignal3").css("-webkit-animation-duration", '');
$(".miniSignal4").css("-webkit-animation-name", '');
$(".miniSignal4").css("-webkit-animation-duration", '');
if(signal){
    signal = false;
    $(".miniSignal1").css("-webkit-animation-name", 'rescale1');
    $(".miniSignal1").css("-webkit-animation-duration", '1.5s');
    $(".miniSignal2").css("-webkit-animation-name", 'rescale21');
    $(".miniSignal2").css("-webkit-animation-duration", '1.5s');
    $(".miniSignal3").css("-webkit-animation-name", 'rescale31');
    $(".miniSignal3").css("-webkit-animation-duration", '1.5s');
    $(".miniSignal4").css("-webkit-animation-name", 'rescale41');
    $(".miniSignal4").css("-webkit-animation-duration", '1.5s');
}else{
    signal = true;
    $(".miniSignal1").css("-webkit-animation-name", 'rescale2');
    $(".miniSignal1").css("-webkit-animation-duration", '1.5s');
    $(".miniSignal2").css("-webkit-animation-name", 'rescale22');
    $(".miniSignal2").css("-webkit-animation-duration", '1.5s');
    $(".miniSignal3").css("-webkit-animation-name", 'rescale32');
    $(".miniSignal3").css("-webkit-animation-duration", '1.5s');
    $(".miniSignal4").css("-webkit-animation-name", 'rescale42');
    $(".miniSignal4").css("-webkit-animation-duration", '1.5s');
}
timedSignalCount();
}

それはすべて element.css("",""); 2msごとにスタイルを再定義しますか?