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