Блог

Я пытаюсь использовать CSS-анимацию, чтобы заставить div входить/выходить со страницы при нажатии кнопки. Я знаю, как анимировать с помощью CSS, но моя проблема: если я попытаюсь сделать позицию div равной -1000%, появится горизонтальная полоса прокрутки. Я не хочу, чтобы это отображалось, но я также не хочу отключать полосу прокрутки.

используйте ключевые кадры. Например:

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

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

Используя положение элемента в CSS, вы можете использовать animation и @keyframes править. Установите для элемента значение относительное или абсолютное в соответствии с тем, как вы хотите управлять расположением элемента в родительском элементе, и используйте положение left или top в своем правиле анимации css. @ 0% установите левую позицию на странице и введите ее в 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>