jquery - jQuery連続前後回転アニメーション

Question

これについて助けが必要です。

自分のサイトの要素の 1 つで、素敵な Web キット アニメーションを作成しました。連続して前後に7度回転することになっています。残念ながら、Chrome でしか動作しません。コードは次のとおりです。

#brk {
background: url("../images/brk.png");
width: 118px;
height: 54px;
display: block;
position: relative;
top: 65px;
left: 93px;
     -webkit-animation: brk-spin 3s infinite linear;
     -moz-animation: brk-spin 3s infinite linear;
     -o-animation: brk-spin 3s infinite linear;
     -ms-animation: brk-spin 3s infinite linear;
}


@-webkit-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-moz-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-o-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-ms-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
} 

そのため、Webkit アニメーションをサポートしていないブラウザーには jQuery を使用すると考えました。私は多くのバリエーションを試しましたが、何もうまくいきませんでした。

jQuery 回転プラグインをダウンロードしました ( https://code.google.com/p/jqueryrotate/ )

私はこのようなことを試しました：

<script>
if(!Modernizr.cssanimation) { 
    $(function() {

    $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: 

function() {
        $('#brk').stop().rotate({ animateTo: -7, duration:600});
        }
    });

(function roty() {
     setTimeout(function() { roty() },1200);
             })();
       });
}
</script>

しかし、これで画像（背景のあるdiv）が前後に1回だけ揺れて止まります。

ループさせる方法はありますか？

助けていただければ幸いです。ありがとうございました！