CSS3 VS的Javascript只有轉變

通過蘋果的Safari 360演示 https://developer.apple.com/safaridemos/threesixty.php CSS3 VS的Javascript只有轉變

似乎在Firefox中工作，以及留下深刻的印象。

任何人都可以總結使用CSSonly與JavaScript的優點和缺點的動畫和變換？

來源

2012-03-15 eco_bach

我想說在舊版瀏覽器中缺乏支持（即css3），但我注意到css3在動畫vs js的某些方面更快。 css3也會是輕量級的（沒有庫可以導入等），再加上css3本身支持對象旋轉 – zero 2012-03-15 19:55:07

該頁面涉及很多JavaScript – 2012-03-15 19:55:12

該演示與問題的其餘部分有什麼關係？ – 2012-03-15 19:56:48

我個人的觀點是，用房子作爲比喻，HTML用於鋪設基礎，CSS用於繪畫房間，JS用於翻修。如果你想添加一個水景功能，CSS將負責該功能的外觀，但JS會讓水通過它。

同樣，我可以使用CSS製作一個時鐘，並使用一個簡單的CSS動畫進行旋轉（時針爲12小時，分針爲1小時，秒針爲1分鐘），但我會更重要的是在JavaScript中製作它，因爲JS能夠檢查用戶的時鐘並保持自己的同步。特別是如果瀏覽器由於用戶在他們的計算機上打開太多或者只是一般的老式計算機而滯後，這一點很重要。

另外，我非常確定CSS必須每秒重新評估動畫數百次，而使用JS則可以明確地將幀速率設置爲更合理的值，例如每幀4幀250ms的間隔第二個（對於時鐘和進度條來說足夠了）或者25ms（40fps）用於更高級的動畫（偶爾在我的網站中使用，因爲它們是遊戲）。通過這種控制，您可以管理網站的效率等等。

另一方面，CSS轉換非常有用 - 這是因爲它們會影響元素的外觀，正如CSS應該那樣。然後，使用JS來控制它們，可以用最少的代碼創建非常複雜的動畫（例如在前面提到的遊戲中，有一個完整的序列在純CSS中是完全不可能的，但是使用CSS變換在JS中變得非常容易）。

這就是爲正確的工作使用正確的工具。

來源

2012-03-15 19:59:39

爲什麼要重新評估CSS？好的是，UA爲你做所有的工作，比如選擇一個可接受的幀速率，當不需要時停止動畫等等，甚至可以提供更好的硬件支持。在JS中，你需要getAnimationFrame（）... 最後一句話+1。 – Bergi 2012-03-15 20:15:42

如果CSS沒有重新評估，請解釋爲什麼有一個有幾百行的表很好，但是在'：hover'上定義一個'background-color'會導致大量的滯後？：我可能沒有使用正確的單詞，但導致混亂...... – 2012-03-15 20:20:07

CSS3 VS的Javascript只有轉變

回答

相關問題