CSS 动画导致锯齿状边缘

Question

我正在尝试使用 CSS 动画为我的画廊创建预加载器动画。当我应用下面的 CSS 代码时，它在 Chrome、Firefox 中看起来不错，但在 Internet Explorer and Safari. For your reference here is the original picture - for a demo see this fiddle.

中看起来不太好

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

你们 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

好的，在非常具体的例子中，问题是这些浏览器无法将 200 像素的图像重新调整为 20 像素。一旦我将 png 的大小减小到 40px 并使用 backgroud-size 属性调整到 20px，它就像一个魅力。希望能帮助其他人解决同样的问题。

这是一个演示 fiddle with the solved issue and here is one with the issue 仍在进行中。

background-size: 20px 20px;

CSS 动画导致锯齿状边缘

CSS animation causes jagged edges

css

css-animations