CSS에서 절대 위치에 있는 Div에 대해 부드러운 왼쪽-오른쪽 이동을 달성하는 방법은 무엇입니까?

CSS의 왼쪽-오른쪽 이동: 일반 솔루션

웹 디자인 영역에서는 요소에 유동성을 불어넣는 능력이 중요합니다. . 그러나 절대 위치에 있는 div의 왼쪽-오른쪽 이동과 관련하여 일반적인 문제가 발생합니다. 즉, 요소가 다시 나타나기 전에 잠시 사라졌습니다. 이 문제는 부적절한 애니메이션 전환으로 인해 발생하는 경우가 많습니다.

이 문제를 해결하려면 왼쪽이나 오른쪽에 고정 값을 사용하지 않는 것이 중요합니다. 대신 왼쪽 또는 오른쪽과 함께 변환 속성을 활용하는 것을 고려하세요. 이 기술은 애니메이션 중에 갑자기 사라지는 것을 방지합니다.

다음은 사라지는 문제를 해결하는 업데이트된 CSS 스니펫입니다.

<code class="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;
}</code>

이 업데이트된 코드에서는 요소를 100% 왼쪽으로 이동하여 눈에 보이는 사라지는 현상을 방지하는 변환 속성입니다. 이를 통해 중단 없이 부드럽고 직선적인 좌우 움직임이 보장됩니다.

위 내용은 CSS에서 절대 위치에 있는 Div에 대해 부드러운 왼쪽-오른쪽 이동을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!