CSS 旋转动画在 Firefox 中不稳定

Question

我正在尝试旋转页面上的一个元素而不旋转其子元素。因此我尝试以相同的速度向相反的方向旋转它们。动画在 Chrome 中运行得非常流畅，但当我在 Firefox 中测试它时，它在 1 次后变得不稳定，并消耗大量 CPU 电量。有没有办法解决？我在这里做错了什么吗？

这里是WEBSITE的链接

这是jsfiddle Link

这是我的代码。

CSS

   .circle-animated {
    -webkit-animation:spinr 20s linear infinite;
    -moz-animation:spinr 20s linear infinite;
    animation:spinr 20s linear infinite;

}
.inner-text-animated{
        -webkit-animation:spin 20s linear  infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite; 
    }
.ch-item-animated {
    -webkit-animation:spin 20s linear  infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite; 
}
.running{
    animation-play-state:running;
    -webkit-animation-play-state:running;
}
.stopped{
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
@-webkit-keyframes spin {
    from{ -webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes spinr {
    from{-webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(-360deg);}
}


@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-moz-keyframes spinr { 
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(-360deg); } 
}

HTML

   <div class="circle-wrapper">
        <h1 class="logo">project<br/>..super<br/>medium.</h1>
        <div class="circle">
                        <div class="ch-item ch-img-1">
                            <div class="ch-info-wrap">
                                <div class="ch-info">
                                    <div class="ch-info-front ch-img-1"></div>
                                    <div class="ch-info-back">
                                        <h2 class="inner-text">word.</h2>
                                    </div>  
                                </div>
                            </div>
                        </div>
....

Javascript

$(window).load(function() {
            // Animate loader off screen
            $("#preloader").fadeOut(750);
            $('.box-lid-menu, .box-lid').delay(750).animate({opacity: 1});
            setTimeout(function(){
                    $('.ch-item').addClass('ch-item-animated');
                    $('.circle').addClass('circle-animated')
                }, 1500)                    
});

$(function(){

//#Navigation
$('.box-lid-menu').boxLid();

//Rotation Hover
$('.ch-item').hover(function(){
    $('.ch-item,  .circle').addClass('stopped');

}, function(){
    $('.ch-item , .circle').removeClass('stopped').addClass('running');

    });
});

任何有关此事的帮助将不胜感激

Answer 1

尝试使用@keyframes代替@moz-keyframes