Image Animation / How to make image slide in when page is loaded? (HTML/JAVASCRIPT) [closed]

Question

I have no Javascript experience and I've been so overwhelmed reading through so many posts. Your help is seriously appreciated.

I'm trying to make my page's image "slide-in" slowly to its eventual position: from the (invisible) left to the center, when the page is clicked.

I've tried searching for this but most of the things that pop up are "how to make a javascript slide show."

The question would also be "how do I make a div slide in from one position to the next?" (since the image will be inside a div.

I'm guessing it would occur onWindowLoad().

Again, thank you so much for your help. This community is wonderful.

Answer 1

I know you're asking regarding JS but here's a thought. You can do that in CSS as well with animations. Take a look:

Apply this to the container:

animation: slideInFromRight 1s ease-in;

This needs to go separate:

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}