html - 转换 : scale while having 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 的轻微卡顿。

我知道 child 的缩放比例有一定关系，但我不完全知道是什么导致了口吃。如果能帮我解决这个非常小的问题，我将不胜感激。

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