how to do this animation on img element-CodePudding

I'm a beginner at CSS and I wanted to code an image animation in which the image starts appearing from the bottom right corner until the top left corner.

I couldn't do the animation on the image itself, I ended up adding a div element with the same background-color above the image

would anyone please teach me how to do the animation in a more professional way without using the div?

I don't mind if the code was using pure CSS or JS.

here is the code I wrote:

.personal-photo {
  padding: 4rem;
  z-index: -10;
}

.photo-effect {
  position: absolute;
  padding: 42%;
  top: 91px;
  left: 91px;
  background-image: linear-gradient(120deg, #fff 0%, #fff 50%, transparent 50%);
  background-size: 300%;
  animation: photoEffect 2s infinite;
  z-index: 10;
}

@keyframes photoEffect {
  100% {
    background-position: 100%;
  }
}

<div >
  <img src="https://placekitten.com/200/300"  alt="">
  <div ></div>
</div>

CodePudding user response：

You can use only the image if you consider mask:

.personal-photo {
  -webkit-mask:
    linear-gradient(to bottom right,#0000 50%,#000 0)
    0 0/200% 200% no-repeat;
  animation: photoEffect 1s linear forwards
}


@keyframes photoEffect {
  100% {
    -webkit-mask-position: 100% 100%;
  }
}

 <img src="https://placekitten.com/200/300"  alt="">

CodePudding user response：

I added some modifications to your code, is this what you are expecting?

.personal-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box::after {
    content: "";
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, white 50%, transparent 50%);
    background-size: 350% 100%;
    background-position: 0%;
    animation: photoEffect 2s linear infinite alternate;
}

.box {
    position: relative;
    width: 200px;
    height: 400px;
}

@keyframes photoEffect {
    100% {
        background-position: 100%;
    }
}

<div >
      <img
           src="https://placekitten.com/200/300"
           
           alt=""/>
 </div>