Javascript CSS3动画图像质量分级

我已经缩小了图片的尺寸，点击缩放到图片的原始尺寸。当图像处于缩小状态时，图像质量非常差。有什么办法可以改进吗

（这里是一个jsfiddle:）

$（文档）.ready（函数（）{
var zoomed=false；
var卡=$（“#卡0”）；
卡片。单击（函数（）{
zoomFunction（）；
});
函数zoomFunction（）{
如果（缩放）{//翻转卡片，则正面不可见，背面可见。
缩放=假；
card.removeClass（'zoom'）；
}否则{//卡未翻转，因此正面可见，背面不可见
缩放=真；
card.addClass（'zoom'）；
}
};
});
html{height:100%；}
.zoom{transform:scale（1.0）；}
img{
变换：比例（0.5）；
变换样式：保留-3d；
过渡：1s；
}

添加背面可见性：隐藏

使用
zoom:50%
代替
transform:scale（0.5）
：


这两个修复都只适用于chrome
 最好在任何照片编辑应用程序中拍摄图像并调整其大小。我发现，如果我需要调整图像的大小，并且不想在第三方应用程序中使用颗粒状和像素化的照片，那么我可以这样做。如果您希望在单击或悬停图像时进行转换，您可以复制原始图像，并以所需大小制作图像的第二个副本。然后，您可以使用另一个过渡，这样当单击照片时，它会在看起来正常的同时变换图像的大小，即使它是两个不同的图像
 我只需要使用一个缩略图并设置一个onclick来加载您的大图像。如果不想在jquery中使用CSS，您可以通过这种方式分别格式化缩略图和常规图像。但更简单的方法是保存以前编辑过的两个版本。
尝试为img标记添加以下属性。它们可能会有所帮助，具体取决于图像

img{
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering:   -o-crisp-edges;          /* Opera   */
    image-rendering: -webkit-optimize-contrast; /* Webkit  */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;   /* IE      */

    will-change: transform; // will consume additional memory
}

将更改：transform
属性将使缩放后的图像在Chrome上看起来更好，这是因为它在GPU上完成了工作，并且通常会提高变换动画的速度（平滑度）。然而，它会占用设备内存，如果有很多卡的话，这可能是一个问题，尤其是在移动设备上

另一个更“有保证的”解决方案是仅在动画制作时使用performant
缩放
转换，当动画完成时，删除缩放属性并将
宽度设置为原始宽度的一半

缩小比例的基本算法是，例如：

设置仅影响转换的转换（
转换：转换1s；
）
使用
变换：缩放（0.5）
缩小图像。图像现在看起来很糟糕
移除
转换：转换1s属性，以便变换是即时的，然后删除
transform:scale（0.5）
属性。图像现在看起来很好，但为原始大小

在删除“缩放”特性的同时，将图像的宽度设置为一半，以便宽度更改不可见。现在图像大小只有原来的一半，看起来不错
下面修改的
更好地说明了这一点。不，不，除了使用SVG图像，还需要使用css吗？使用jquery的解决方案将为您提供更好的图像质量。例如，在动画中是否有使用它的方法？这是一个技巧，不起作用。质量仍然很差。请避免使用仅适用于XX的非标准属性，我们需要实现一个免费的万维网，而不是一个仅适用于chrome的世界。我几乎需要在所有现代浏览器上运行它，包括手机