.image-mask-wrapper {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 0 auto;
  --left: 0px;
}
.can-container {
  /* background-image: url(images/can.png); */
  height: 500px;
  width: 60%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  max-width: 250px;
  background-position: -25px 18px;
}
.image-container {
  background-image: url("images/can-bg-orange-2.jpg");
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  max-width: 250px;
  border: 5px solid white;
}
.can-container-full {
  background-image: url("images/can-bg-orange-2.jpg"), url("images/can.png");
  height: 500px;
  background-size: auto 100%;
  background-blend-mode: multiply;
  mask-image: url("images/can.png");
  mask-size: auto 100%;
  max-width: 250px;
  animation: rotate 1s infinite forwards;
}

.can-container-full-2 {
  background-image: url("images/can-bg-mango.jpg"), url("images/can.png");
  height: 500px;
  background-size: auto 100%;
  background-blend-mode: multiply;
  mask-image: url("images/can.png");
  mask-size: auto 100%;
  max-width: 250px;
  animation: rotate 1s infinite forwards;
}

@keyframes rotate {
  0% {
    background-position: 0px 0px, 0px 0px;
  }
  100% {
    background-position: -1000px 0px, 0px 0px;
  }
}