圖像模糊，是janky

2016-07-30 52 views 0 likes

您好我正在學習創建一些懸停效果，併成功地拉斷了我腦子裏想的這個動畫：http://jsbin.com/xawibo/圖像模糊，是janky

該動畫形象的CSS是這樣的：

transform: scale(3, 3) translateY(50%);

但動畫不平滑。過渡期間縮略圖變得模糊，只有在過渡停止時纔會變得清脆。還有一個輕微的左/右搖晃運動。

這裏是什麼，我看到一個快速的Youtube視頻：

我在做什麼是影響該動畫的perforamce？我是否嵌套太多DIV？

2016-07-30 codemon

我不認爲有圖像模糊周圍的方式 - 過渡時期那麼圖象就會模糊，這是動畫圖像的本質。我會說這是開發者注意到的比用戶更多的東西 - 對我來說這個動畫第一次看起來很棒，我曾兩次看到這個問題。 – Toby

您正在瀏覽Chrome嗎？我忘了提及我注意到這在鉻，並不能測試其他瀏覽器ATM。 – codemon

是的，在Mac上的鉻 – Toby

回答

似乎Chrome特定的問題。

相反的transform:scale()你可以動畫width：

.caption:hover > span img{ 
    background: rgba(0, 158, 205, 0.45); 
    transform: translate(0,10%) ; 
    width:100%; 
}

2016-07-30 01:05:03

謝謝！我嘗試了它，它表現更好！然而，右側仍然有輕微的推動 – codemon

這種情況發生在Windows上的Chrome顯然。

與transform: [...]一起使用時-webkit-transform: [...]會發生什麼？

2016-07-30 00:58:10 codeSwim

謝謝我試圖從其他SO問題的修復，但沒有發生任何事。我只是嘗試使用-webkit-沒有骰子。我在Windows 10上。我添加了原始帖子中看到的視頻。 – codemon

我看了視頻，它與我在Chrome上得到的非常相似，都在Windows7和Windows10上。 – codeSwim

相關問題