Question

我一直在研究一个非常简单的效果：使用CSS3过渡对鼠标悬停在图像上的缓慢缩放效果。它在我有机会测试它的每一个broswer（Mozzila，Chrome，Safari）上呈现出漂亮和平滑，但是当我使用IE 11时它很不稳定。

以下是代码：

HTML

<div class="container">
<img />
</div>

CSS

.container {
width:310px;
height:220px;    
overflow:hidden;
}

img {
width:100%;
transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
}

.zoom {
-webkit-transform: scale(1.06); 
-moz-transform: scale(1.06);
-o-transform: scale(1.06);
transform: scale(1.06);
}

JS

$(document).ready(function(){
        $('.container').hover(function() {

        $('img',this).addClass('zoom');

        }, function() {
        $('img',this).removeClass('zoom');
        });
    });

您可以在此处找到演示：

https://jsfiddle.net/malambart/Leydw2tp/1/

如果有人知道如何解决这个问题，我很乐意尝试。但是，我很乐意删除任何版本的IE的动画。很抱歉，问一些对许多人来说可能很明显的事情，但实现这一目标的最佳方式是什么？我刚刚了解了一个名为Modernizr的图书馆，但据我所知，它只告诉我一个功能是否可用，不允许我关闭＆＃34;某些浏览器的功能。我错了吗？

非常感谢！

Answer 1

更改您的转换：

scale(1.06);

分为：

rotate(0.1deg)scale(1.06)

使用IE 11“摇摇欲坠”的CSS3过渡

1 个答案: