有没有办法让div用纯CSS飞in/out

Question

我正在尝试使用 CSS 动画在单击按钮时使页面 div 飞行 in/out。我知道如何使用 CSS 设置动画，但我的问题是：如果我尝试将 div 的位置设置为 -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中元素的位置，可以使用animation和@keyframes 规则。根据您希望如何控制元素在父元素中的定位，将您的元素设置为 relative 或 absolute，并使用 left 或 top 在你的 css 动画规则中的位置。 @ 0% 将 left 位置设置为离开页面并将其引入 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>

有没有办法让div用纯CSS飞in/out

Is there any way to make div fly in/out with pure CSS

html

css

animation

css-animations