使用转换卡顿:在具有缩放子元素时缩放

Question

Oi，

https://jsfiddle.net/jbwq6y87/7/

#box {
width: 500px;
height: 500px;
transition: 0.5s;
overflow: hidden;
}
#box:hover{
transform: scale(0.9);
}
#pic{
width: 100%;
height: 100%;
background: url (http://via.placeholder.com/500x500);
background-size: cover;
transition: 0.5s;
}
#pic:hover{
transform: scale(1.2);
}   

我为我想要的效果想出了一切，但我注意到父div 在结束其transform: scale(0.9);时有一个轻微的 1px 口吃。

我知道孩子的缩放与它有关，但我并不完全知道是什么导致了口吃。我将不胜感激一些帮助来解决这个非常小的问题。

Answer 1

子容器的转换持续时间比父容器快应该可以解决此问题。这可能如下所示：

#box {
width: 500px;
height: 500px;
transition: 0.5s ;
overflow: hidden;
}
#box:hover{
transform: scale(0.9);
}
#pic{
width: 100%;
height: 100%;
background: url(http://via.placeholder.com/500x500);
background-size: cover;
transition: 0.2s;
}
#pic:hover{
transform: scale(1.2);
}