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动画，该关键帧在旋转时转换旋转（例如，转换为大约8度），但在结束时将旋转返回到0deg。这很可爱。

这是关于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;
}