CSS3 浮船动画

Question

我正在尝试制作 float 效果动画。基本上，该元素将在其下部随轴摆动，如下图所示:

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>