CSS3 Плавающая анимация корабля

Question

Я пытаюсь сделать анимацию с плавающим эффектом. В основном элемент будет качаться с осью на ее нижней части, как в изображении ниже:

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

Я не знаю, как решить эти 2 движения, а также сделать его постоянным.

-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>