當使用CSS3轉換jQuery.animate步驟函數等效

Question

我正在使用CSS過渡動畫界面周圍（節點）屏幕。

CSS：

.circle {-webkit-transition: all 0.8s ease-in-out; } 

JS：

$('.circle').css({ webkitTransform: "translate3d(20px, 20px, 0px)" }) 

我希望能夠知道在任何時候翻譯的屬性，這樣我就可以更新連接節點的線。

如果我使用jQuery的動畫，我可以使用「步進」功能。 CSS過渡中有沒有類似的東西？我已經看到了一個「webkitTransitionEnd」事件，但沒有爲個別動畫步驟。

或者我會用定時器來做嗎？

Answer 1

從理論上講，你可以使用一個計時器，讓動畫元素的計算值，但它幾乎肯定會運行緩慢。我從不覺得需要逐步訪問計算值，並且同時開始2個或更多動畫。

如果要像動畫與他們之間的線條圈更復雜的東西，你應該考慮使用畫布庫像raphael。

目前已經有像你要完成，像this一個什麼一些類似的演示。