如何動畫滑塊元素，如果他們不是絕對定位？

我試圖爲我的網站創建一個動畫滑塊，我使用浮動和邊距來定位滑塊的元素，我正在搜索任何可以融入我的滑塊的動畫元素，我發現我需要使用CSS3轉換，並且這些元素需要完全置於其父元素中，這就是問題所在。我不想將元素的位置絕對因爲我現在定位的方式，元素的大小可變。如何動畫滑塊元素，如果他們不是絕對定位？

那麼，如何在不使用絕對位置的情況下動畫或轉換這些元素？我想用不同的持續時間和方向以不同的方式動畫每個元素。

謝謝。

UPADTE：我使用Flexslider的WooThemes

2012-12-06 Pierre

提供您的標記示例http://jsfiddle.net/ – kidwon

您可以使用保證金屬性編碼您的邏輯 –

可以廣告通過JavaScript到CSS的

'+=10px' or '-=10px'

因此增加或減少要動畫elemnt的價值，而不必狀態結果的確切數量。希望它可以幫助

編輯

你也可以在你的@keyframes使用沒有任何JavaScript

2012-12-06 13:14:37

「+ = 10px」或「 - = 10px」是什麼意思？並將關鍵幀工作，而不是絕對定位元素？ – Pierre

我的意思是你增加或減少elemnt已有的數量，是的，它會工作 –

使用transform: translate(x,y)。變換獨立於周圍的標記/樣式（例如position: absolute），即使在移動設備上硬件也會加速。

2012-12-06 13:19:00

如果您使用的是jQuery，您可以使用.animate()修改DOM元素的任何屬性，這意味着您可以爲元素的邊距和填充添加動畫，以保持其相對位置。

2015-06-03 20:16:31

回答