1

我正在开发一个使用 webkit 动画的项目。这是一个带有 Javascript 和 CSS3 的 HTML 项目。

我尝试在 Chrome 上运行它，它运行良好，但是一旦我在低配置下尝试它，它就会变得越来越慢。所以我激活了 Chrome 的时间线和..惊喜。CSS 样式从一开始就每 2 毫秒重新计算一次！

所以我的问题是，有没有办法将这些计算限制为每秒 40 次计算以释放 CPU 一点点..

我正在使用一些代码来动画所有这些 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("",""); 每 2 毫秒重新定义一次样式？

4

0 回答 0