CSS3アニメーション、ボタンを振ります

今日は、マウスがボタンの上に置いたときに、コードのセットを共有したいです。ボタンを振ります！！！

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタのcharset = "UTF-8" > 
    < タイトル>マウスポインタがボタンの上に置いた、ジッタ</ タイトル> 
</ ヘッド> 
< スタイル> 
       。 lanren { 
                 マージン：200pxの自動; 
                 幅：300ピクセルによって、
                 テキスト整列=左：センター; 
                 高さ：40ピクセル; 
                 行の高さ：40ピクセル; 
                 国境：1pxの固体#CCC 。
                 国境半径：2ピクセル。
                 背景色：スカイブルー。
        } 
        .lanren：ホバー{ 
                         アニメーション：0.82s立方ベジェを振る（0.36、0.07、0.19、0.97）の両方。
        } 

         振る@keyframes { 
                           10％、90％{変換：translate3dを（-1px、0、0）; } 
     
                           20％、80％{変換：translate3d（2ピクセル、0、0）; } 
                           
                           30％、50％、70％{ 変換：translate3d（-4px、0、0）; } 
   
                           40％、60％が{ 変換：translate3d（4PX、0、0）; } 
 } 
 </ スタイル> 

< 身体> 
    < divのクラス= "lanren" >私の上にホバリングあえて、私が振るう！！</ ディビジョン> 
</ ボディ> 
</ HTML >

 

レンダリング（静的なスクリーンショット）：

 

 

それは手が非常にかわいいドロップヨレンダリング、さあ聞こえた、具体的なアクション・フィギュアを見てみたいです！！！