CSS의 왼쪽-오른쪽 이동: 보편적인 솔루션

많은 웹 개발자가 가로 축을 따라 DIV 요소를 애니메이션화하는 데 어려움을 겪고 있습니다. 용기의 가장자리를 따라. 이 작업은 고정된 값으로 인해 요소가 순간적으로 사라질 수 있으므로 복잡성을 나타냅니다.

이 문제를 해결하려면 일반 CSS 애니메이션을 사용하여 DIV를 왼쪽에서 오른쪽으로 원활하게 이동할 수 있습니다. 그러나 왼쪽 속성을 0%와 100%로 활용하면 요소가 화면에서 완전히 벗어나 깜박임이 발생할 수 있습니다.

이를 극복하려면 변환과 왼쪽 또는 오른쪽 속성의 조합을 권장합니다. 이 메소드는 원하는 움직임을 제공하면서 화면의 요소를 유지합니다.

예를 들어 다음 CSS 코드는 이 효과를 얻습니다.

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}

이 기술은 DIV가 컨테이너의 왼쪽과 오른쪽 가장자리 사이를 원활하게 전환하도록 보장하여 절대 위치 지정이 있는 모든 DIV에 대한 다목적 솔루션을 제공합니다.