How to create in "slide-in" animation without resizing the browser?

Question

I have an animation where on page load an img object (and text object) slide in from outside the frame of the webpage. It works great, however, the only glaring issue is that at the very beginning of the load the webpage is resized for approx. half a second. This is because at that point in time, the img object is outside the frame so it resizes to compensate. This creates a really jerky effect on load. Is there anyway to treat it so that it just acts like it is outside the current bounds of the frame and only shows up on the webpage once part of it is in frame.

This is the simple CSS code for the animation as well as the CSS code for the image (it is a float so I can wrap text around it).

Also the current framework I am using is react, so if there is a React or JS solution, I would be happy to hear that as well.

@keyframes slideFromRight {
    0% {
        transform: translateX(800px) translateY(-80px);
    }
  
    100% {
        transform: translateX(0px) translateY(0px);

.img--berk {
    float: right;
    width: 335px;
    height: 213px;
    margin-top: 1%;
    margin-right: 1%;
    margin-left: 1%;
    border-radius: 9%;
    border: 4px solid var(--blue);
    animation: slideFromRight 1.2s cubic-bezier(0.35,-0.15, 0.63, 1.58);
}

Answer 1

If you are using react, I would use framer motion.

Install framer motion using npm i --save framer-motion in the terminal.

    import {motion} from "framer-motion";
            
            const variants = {
            initial: { x: "100vw" },
            animate: { x: "0vw", 
            transition: { duration: 1.2 }
             }
            }
            
            export default function ImgComponent() {
return <motion.img class="img--berk" src="https://picsum.photos/200" initial="initial" animate="animate" variants={variants} />
        }

Not Forgetting to give your "App.js" component "overflow: hidden;"