CSS3浮動小船アニメーション

Question

浮動小数点アニメーションを作成しようとしています。私は2つの動きを解決する方法を知らない

http://1.bp.blogspot.com/-m7IuLfuaIC0/UGJGAikLXII/AAAAAAAAKis/N8NfMwdMExY/s1600/GANGORRA.jpg

を、また、それを一定に：基本的要素は、画像怒鳴るのように、その下部に軸にスイングします。

-webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 

-webkit-transform: rotateZ(-30deg); 
     -ms-transform: rotateZ(-30deg); 
     transform: rotateZ(-30deg); 

-webkit-transform: rotateZ(30deg); 
     -ms-transform: rotateZ(30deg); 
     transform: rotateZ(30deg); 

Answer 1

これは何ですか？

#ship 
 
{ 
 
    animation: swing 2s infinite ease; 
 
    background: green; 
 
    color: #fff; 
 
    text-align: center; 
 
    transform-origin: bottom center; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    width: 100px; 
 
} 
 

 
@keyframes swing 
 
{ 
 
    0%{ transform: rotate(-10deg);} 
 
    50%{ transform: rotate(20deg);} 
 
    100%{ transform: rotate(-10deg);} 
 
}

<div id="ship">SHIP</div>