Question 294046 in Html Question posted in
Some basic documentation can be found here.

Html – How to reverse CSS image animation?

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.

Tags:

2

Answers


  1. 0

    in your .fade-in-img-2 the animation needs to be animation: right-to-left-fade-in-2 1s ease-in

    and your keyframes:

    @keyframes right-to-left-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)
    );
  }
}
    Login or Signup to reply.
  2. 0

    To reverse your animation, you need to change the direction of the linear gradient in your keyframes. If you initially had "to right," you should change it to "to left" at 0% and 100% in your keyframes.

    Here’s the modified code:

      .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 left, /* Change this to "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, /* Change this to "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://images.unsplash.com/photo-1472457897821-70d3819a0e24?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c21hbGx8ZW58MHx8MHx8fDA%3D"/>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search