CSS3过渡：移动时稍微倾斜/旋转，然后恢复为水平

Question

使用CSS过渡，是否有可能在元素移动的上半部分使其稍微偏离水平方向倾斜（旋转），并在元素到达其运动结束时在后半部分中使其倾斜回到水平状态？ 我不要360度旋转。 稍微倾斜一下，然后再次向后倾斜。

这是我想到的过渡的开始，中间和结束的图片：

通过观看可以很好地证明这个问题。 这是一个小提琴，显示了我想要实现的目标，但是我想通过CSS转换而不是JavaScript来实现：

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

运行此程序时，请密切注意灰色框。 它在运动过程中会稍微倾斜，然后在中途反转其倾斜度-因此当它静止时，它不再倾斜。

我希望整个动作是在一个状态从一个状态到另一个状态的单个转换中发生的，只需将一个类添加到元素中即可，而不是在两个转换中进行，因为这将需要我将一个状态的结束与下一个状态的开始计时。

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

谢谢。

Answer 1

你可以做这样的事情。 http://cdpn.io/sIxFA

显然，您可以根据需要平滑旋转，并在单击时添加旋转类。

Answer 2

这将是它的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;
    }
}

Answer 3

我知道了！

解决方案是使用带有关键帧的CSS动画，当关键帧经过50％时将其旋转（例如，旋转到大约8度），但最后将旋转返回到0度。 很甜

这是有关JSBin的演示：

http://jsbin.com/ogiqad/4/edit

（以下代码使用-webkit，但您可以添加所有其他浏览器变体以使其在更多浏览器上运行。）

@-webkit-keyframes tilt-and-move {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    -webkit-transform: rotate(8deg);
  }
  100% {
    left: 100px;
    top: 100px;
  }
}

#card {
    position: relative;
}

#card.moved {
    left: 100px;
    top: 100px;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-name: tilt-and-move;
}