stutter with transform：scale while while scaling child element

Question

爱，

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);
    }