图像从左向右擦拭，然后向右擦拭

Question

尝试锻炼身体，但运气不佳。本质上，我已经看到一种流行的效果，其中元素“擦除”（通常是图像）。

我最初的想法是制作一个带有图像的包装容器，然后在其中进行动画处理。从左到右都是可行的，但是例如，我不能从右手开始。我也不想在这种情况下缩放或移动图像。我希望它几乎像一个剪贴蒙版。我用一个白色盒子伪造了它，然后将其抹去，但感觉肯定有更简单的方法。

有什么想法吗？这是我在https://codepen.io/shane-harley/pen/dyyaoQp

的位置

.wrapperBox {
  width: 800px;
  height: 800px;
  overflow: hidden;
}
.containerBox {
  width: 0px;
  height: 800px;
  overflow: hidden;
  background-color: red;
}
.bearBox {
  width: 100%;
  height: 100%;
  background-color: red;
  background-image: url('https://placebear.com/800/800');
  background-position: left center;
  background-size: cover;
}
.white {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  transform: translateX(-100%);
}
.wrapperBox:hover .white {
  transform: translateX(0%);
  transition: all 1.5s;
  transition-delay: 1s;
}
.wrapperBox:hover .containerBox {
  width: 800px;
  transition: all 1s;
}