Question

我将2个CSS3过渡应用于图像。一切正常。只发行。升级时图像会抖动。有什么方法可以解决这个问题吗？

CSS

div{
    width:199px;
    height:253;
    margin-left:50px;
    margin-top:50px;
}
div:hover
{   -webkit-transform: scale(1.2);
    -webkit-filter: hue-rotate(180deg);
    -webkit-transition:all 2s linear;
}

编辑：不知怎的，我注意到问题不在于高级属性。如果删除hue-roate属性，图像会升级而不会出现任何抖动。但是我需要动画中的效果。

Answer 1

我将过渡放在img上并转换宽度而不是缩放，它似乎可以解决摆动

<强> FIDDLE

div{

    margin-left:50px;
    margin-top:50px;
}
img
{
    width:199px;
}
img:hover
{     width: 238px;
      -webkit-filter: hue-rotate(180deg);
      -webkit-transition:all 2s linear;
 }

Answer 2

问题是图像在不同的时间沿不同的轴放大，因为它不是方形图像，浮点尺寸被截断为整数。

唯一存在的解决方法是人为地使图像元素成为方形，以便图像的两个维度同步放大，这将消除感知的抖动。

但是，如果我可以侥幸逃脱，我可能只是缩短过渡时间，以免抖动明显。

在升级时摇晃图像

2 个答案: