CSS3過渡：在移動時稍微傾斜/旋轉，然後恢復到水平

是否可以使用CSS過渡將元素在其前半部分略微偏離水平方向傾斜（旋轉） - 然後將其傾斜回到下半場水平，當它達到其運動的結束？我不想要360度旋轉。只是稍微傾斜，然後再向後傾斜。CSS3過渡：在移動時稍微傾斜/旋轉，然後恢復到水平

這裏的開頭，中間和過渡的結束的照片我的想法：

tilt during motion

這個問題最好是通過觀看無餘。下面是表明我是想達到什麼樣的小提琴 - 但我想利用CSS轉換，而不是JavaScript來實現它：

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

當你運行它，密切關注灰箱。它在運動過程中會稍稍傾斜，然後在中途將其翻轉 - 所以當它休息時，它不會再傾斜。

我希望整個動作發生在從一個狀態到另一個狀態的單個轉換中，僅僅是通過向一個元素添加一個類而不是在兩個轉換中，因爲這將需要我以一開始的時間結束一個狀態的下一個。

我懷疑答案會包含transition-delay和/或@keyframes。

謝謝。

來源

2013-02-21 Brian Morearty

他們被稱爲動畫。其使用的關鍵幀 – 2013-02-21 18:03:18

P.S.我並不擔心瀏覽器的兼容性。如果某些瀏覽器完全忽略旋轉指令，只要框出現在正確的位置，對我來說就沒有問題。 – 2013-02-21 18:03:22

這可能會幫助你... http://stackoverflow.com/questions/14857923/hover-state-and-transition-in-chrome-multiple-animations-on-one-element-do-not/14858578#14858578 – henser 2013-02-21 18:04:41

這將是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; 
    } 
}

來源

2013-02-21 18:47:19 aurel

謝謝！即使我已經知道了，並且在我看到您的答案之前仍然鍵入我的答案，我會先給您答覆，然後才能正確回答。 – 2013-02-21 20:01:07

你可以做這樣的事情。 http://cdpn.io/sIxFA

顯然，您可以按照自己的意願平滑旋轉，並在點擊時添加旋轉類。

來源

2013-02-21 18:40:16 user2096660

我知道了！

解決方案是使用帶有關鍵幀的CSS動畫，該關鍵幀在旋轉50％時轉換旋轉（例如，大約8deg），但在最後將旋轉返回到0deg。這很漂亮。

這裏有JSBin演示：（下面的代碼使用-webkit但您可以添加其他所有瀏覽器的變化，使其在更多的瀏覽器工作）

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

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

來源

2013-02-21 18:56:23

CSS3過渡：在移動時稍微傾斜/旋轉，然後恢復到水平

回答

相關問題