CSS3 过渡 : tilt/rotate slightly while moving, 然后恢复为水平

Question

是否有可能，使用 CSS 过渡，在其移动的前半部分倾斜(旋转)一个元素稍微偏离水平方向 - 并在后半部分将其倾斜回水平，因为它到达其移动的终点？我不想要 360 度旋转。稍微倾斜一下，然后再向后倾斜。

这是我脑海中过渡的开始、中间和结束的图片:

这个问题最好通过观看来证明。这是一个 fiddle ，它显示了我想要实现的目标——但我想用 CSS 转换来实现它，而不是 JavaScript:

http://jsfiddle.net/bmorearty/S5Us6/22/

运行此程序时，请仔细观察灰色框。它在运动过程中稍微倾斜，然后在中途反转倾斜 - 所以当它停止时，它不再倾斜。

我希望整个 Action 发生在从一种状态到另一种状态的单一转换中，只需将一个类添加到一个元素——而不是在两个转换中发生，因为这需要我在一个状态的结束和下一个。

我怀疑答案会包含 transition-delay和/或 @keyframes .

谢谢。

Answer 1

这将是它的 css:

#card {
    padding: 2em;
    border: 1px solid gray;
    display: inline-block;
    position: relative;
    background-color: #eee;
    /*instead of infinite you can add a number of times you want it running*/
    animation: moving infinite 6s;

}
@keyframes moving {
    0%{
      margin: 0;
    }
  50% {
 -webkit-transform: rotate(45deg);
  }
  100% {
    margin: 50px;
    }
}