CSS旋转动画在Firefox中不稳定答案

【问题标题】：CSS rotating animation is choppy in firefoxCSS旋转动画在Firefox中不稳定
【发布时间】：2014-03-31 08:58:12
【问题描述】：

我正在尝试旋转页面上的元素而不旋转其子元素。因此，我尝试以相同的速度向相反的方向旋转它们。动画在 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');

    });
});

我们将非常感谢您对此事的任何帮助

【问题讨论】：

你能不能把 jsfiddle 放在一起，让我们在 firefox 上试试？
我刚刚添加了一个 jsfiddle 之类的

标签： css firefox animation css-animations

【解决方案1】：

尝试使用@keyframes 而不是@moz-keyframes

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
@skuntsel 我在发布答案之前检查了我的理论。