如何在不调整浏览器大小的情况下创建 "slide-in" 动画？

Question

我有一个动画，在页面上加载一个 img 对象（和文本对象）从网页框架外滑入。它工作得很好，但是，唯一明显的问题是在加载的最开始，网页的大小被调整了大约。半秒钟。这是因为在那个时间点，img 对象位于框架之外，因此它会调整大小以进行补偿。这对负载产生了非常不稳定的影响。有没有办法处理它，让它就像在框架的当前边界之外一样，只有在它的一部分在框架中时才会显示在网页上。

这是动画的简单 CSS 代码以及图像的 CSS 代码（它是一个浮点数，因此我可以在其周围环绕文字）。

另外我目前使用的框架是react，所以如果有React或JS解决方案，我也很乐意听到。

@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

你可以让img从左边进入：

.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);
}
@keyframes slideFromRight {
  0% {
    transform: translateX(-800px) translateY(-80px);
  }

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

<img class="img--berk" src="https://picsum.photos/200" />

Answer 2

如果你用的是react，我会用framer motion。

在终端中使用 npm i --save framer-motion 安装 framer motion。

    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} />
        }

不要忘记给你的“App.js”组件“溢出：隐藏；”

如何在不调整浏览器大小的情况下创建 "slide-in" 动画？

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

html

javascript

css

css-animations

reactjs