깜박임 없이 DIV 요소의 부드러운 왼쪽-오른쪽 애니메이션을 얻는 방법은 무엇입니까?

CSS의 왼쪽-오른쪽 이동: 범용 솔루션

많은 웹 개발자는 가로 축을 따라 DIV 요소를 애니메이션화하는 문제에 직면합니다. 용기의 가장자리를 따라. 이 작업은 고정된 값으로 인해 요소가 순간적으로 사라질 수 있으므로 복잡합니다.

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

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

예를 들어 다음 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>

이 기술은 DIV가 컨테이너의 왼쪽 및 오른쪽 가장자리는 절대 위치 지정 기능을 통해 모든 DIV에 대한 다목적 솔루션을 제공합니다.

위 내용은 깜박임 없이 DIV 요소의 부드러운 왼쪽-오른쪽 애니메이션을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!