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>