CSS3 变换 - 有时会在 Chrome 上缩放动画

Question

当我将鼠标反复悬停在两张图片上时，缩放动画有时会回弹。但是，缩放动画在 Firefox 上运行良好。我做错了什么？

ul li .image{
    display:inline-block;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;

    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
} 
ul li:hover .image{
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

这是 jsfiddle

上的 example

Answer 1

我刚刚为 :hover 添加了 width:100.1% 和 height:100.% 然后它再次在 Chrome 上完美运行。它应该是某种 css hack，但它对我有用，这是更新代码

ul li .image{
    display:inline-block;
    width:100%;
    height:100%;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;

    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
} 
ul li:hover .image{
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    width:100.1%;
    height:100.1%;
}

CSS3 变换 - 有时会在 Chrome 上缩放动画

CSS3 transform - scale animation sometimes snapback on Chrome

css

transform