CSS 动画会导致锯齿状边缘

Question

我正在尝试使用 CSS 动画为我的画廊创建预加载器动画。当我应用下面的CSS代码时，它在Chrome，Firefox中看起来不错，但在Internet Explorer和Safari中看起来并不好。供您参考，这里是原始图片 - 有关演示，请参阅此小提琴。

我浏览了与此主题相关的大多数文章，并应用了似乎有意义的修复程序（请参阅代码中的注释），但唉，它看起来仍然像废话。

你们中的任何一个CSS向导都有解决此问题的方法吗？

div.preloader-container {
    background-image: url('img/preloader.png') no-repeat !important;
    background-size: 20px 20px !important;
    height: 20px !important;
    width: 20px !important;
    position: relative !important;
    top: 50% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* Attempt to fix it 1 */
    -webkit-backface-visibility: hidden !important;
    -ms-backface-visibility:     hidden !important;
    -moz-backface-visibility:    hidden !important;
    backface-visibility:         hidden !important;
    /* Attempt to fix it 2 */   
    outline: 1px solid transparent !important;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { 
    -moz-transform:rotate(360deg);  
    }
}
@-webkit-keyframes spin { 100% { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotate(360deg);
    }
}
@keyframes spin { 100% {
    transform:rotate(360deg);
    }
}   

Answer 1

好的，

在非常具体的情况下，问题是这些浏览器将 200px 图像重新调整为 20px 处理得很糟糕。一旦我将 png 的大小减小到 40px 并使用背景大小属性调整为 20px，它就像一个魅力。希望能帮助其他人解决同样的问题。

这是已解决问题的演示摆弄，这是一个问题仍在发生的演示。

background-size: 20px 20px;