生澀的動畫-Jquery / CSS3

Question

我正在嘗試將jQuery和CSS3結合使用，以提供流暢的動畫，但是我仍然發現即使在台式機上，動畫也可能會變得生澀。

我正在使用以下內容將我的id從頁面的一側移到頁面上。

$(id).addClass('active').css({ left: pageWidth })
                        .animate({left: 0}, 500, function(e){deferred.resolve()})
                        .css("-webkit-transform", "translate3d(0px,0px,0px)")
                        .css("-moz-transform", "translate3d(0px,0px,0px)")
                        .css("-ms-transform", "translate3d(0px,0px,0px)")
                        .css("-o-transform", "translate3d(0px,0px,0px)")
                        .css("transform", "translate3d(0px,0px,0px)");

如果我還有其他可以做的事情，誰能提供任何建議？

Answer 1

使用諸如Velocity的插件/擴展程序可以在幕后自動為您使用CSS動畫。

我們最近使用它來避免動畫在移動設備上出現卡頓現象，並大大改善了效果。

Answer 2

如果您想要更流暢的動畫並且可以不受限制地使用CSS3，則可以使用CSS3關鍵幀。

看一下這個名為Animate.css的CSS3動畫集合：

http://daneden.github.io/animate.css/

這利用了運行非常流暢的CSS3關鍵幀。 您可以根據要完成的動畫來編輯動畫或創建新動畫。 使用關鍵幀，您可以在動畫的任何幀上設置動畫的狀態，以便根據制作方式的不同，使其看起來像想要的那樣平滑。

看一下有關關鍵幀的本文，如果您不想使用Animate.css上的關鍵幀，請嘗試修改它們或構建自己的關鍵幀：

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

對於動畫，想要獲得代碼並不難。 您也可以使用jQuery動畫來執行此操作，但是如果您在框架上工作得更好，則關鍵幀將運行得更流暢。