How to reverse CSS image animation?

Issue

I am trying to build an animation that uncovers an image from right to left. However it doesn’t seem to be working the way I expected, it is currently going from left to right even after I changed "linear-gradient(to right" to "linear-gradient(to left". Is there a method that would be better suited for this or am I just missing something?

this is my code.

<div class="fade-in-img-2">
<img class="fade-img-2" src="url"/>
</div>
<style>

.fade-in-img-2 {
  animation: left-to-right-fade-in-2 1s ease-in;
  -webkit-mask-repeat: no-repeat;
  display: flex;
  justify-content: center;
}
.fade-in-img-2 .fade-img-2 {
    width: 60%;
}
@keyframes left-to-right-fade-in-2 {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
  100% {
    -webkit-mask-size: 100%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
}

</style>

I changed "linear-gradient(to right" to "linear-gradient(to left" and expected the animation to be reversed however the animation ran in the same direction and did not seem to do anything.

Solution

In addition to to left in the linear gradient, you need to add

-webkit-mask-position: right

to the element

As tested and shown below

.fade-in-img-2 {
  animation: left-to-right-fade-in-2 1s ease-in;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right;
  display: flex;
  justify-content: center;
}
.fade-in-img-2 .fade-img-2 {
    width: 60%;
}
@keyframes left-to-right-fade-in-2 {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
  100% {
    -webkit-mask-size: 100%;
    -webkit-mask-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
}

<div class="fade-in-img-2">
<img class="fade-img-2" src="https://picsum.photos/200/300"/>
</div>

Answered By - Jaromanda X