# 解決使用 CSS transition 造成圖片模糊／跳動的問題

在做 campaign 案時常會遇到圖片（不論是 `<img>` 或 css background）使用 transition 做動態時會模糊，最後到定點後會跳動一下的問題，因為一直很惱人所以就忍不住找了解法

selector {
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
}

加了上面的設定 Chrome 看起來問題就解決了，但不曉得為何 Safari（新生代 IE）感覺好像沒有太大的改善，於是我另外加了 will-change 屬性，Safari 看起來就好多了，以下附上我的設定：

selector {
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
    will-change: margin-top, opacity       // 這邊的屬性值使用動態時會用到的就好，不建議設定太多
}

###### tags: `css` `animation`