有没有办法让 div 用纯 CSS 飞入/飞出

Question

我正在尝试使用 CSS 动画让 div 在单击按钮时飞入/飞出页面。我知道如何使用 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>