有什么方法可以用纯 CSS 使 div 飞入/飞出

Question

我正在尝试使用 CSS 动画在单击按钮时使 div 飞入/飞出页面。 我知道如何使用 CSS 制作动画，但我的问题是：如果我尝试将 div 的 position 设为 -1000%，则会出现水平滚动条。 我不希望它出现，但我也不想禁用滚动条。

Answer 1

使用关键帧。 例如：

.fly{
    animation: superman-fly-right ease-in-out 0.5s forwards;
}

@keyframes superman-fly-right {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(100vw);
        }
    }

Answer 2

使用CSS中元素的 position，可以使用animation和@keyframes规则。 根据您想要控制元素在父元素中的位置的方式将元素设置为相对或绝对，并在 css animation 规则中使用left或top position。 @ 0%将左侧position 设置为离开页面并将其以100% => 0

 body { overflow-x:hidden; } #main { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; position: relative; } #header { position: absolute; left: 37%; z-index: 10; font-size: 3rem; animation: slideup 1.2s ease-in-out; text-shadow: 1px 1px white; font-family: sans-serif; } #image { position: absolute; left: 0px; top: 0px; animation: slidein 1s ease-in-out; z-index: 1; } @keyframes slidein { 0% { top: -1900px; } 100% { top: 0px; } }

 <div id="main"> <img id='image' src="https://assets3.thrillist.com/v1/image/1679696/size/tmg-facebook_social.jpg"> <h2 id="header">My Vacation</h2> </div>