Question

我正在尝试制作浮动效果动画。基本上，元素将在其下部以轴为摆动，如下图所示：

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

这是你想要的吗？

＆＃13;

#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);}
}

＆＃13;

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

＆＃13;

CSS3浮船动画

1 个答案: