컨테이너 내의 Div에 대해 부드러운 왼쪽-오른쪽 CSS 애니메이션을 만드는 방법은 무엇입니까?

왼쪽-오른쪽 이동을 위한 일반 CSS 애니메이션

이 기사에서는 div를 왼쪽으로 이동하는 일반 CSS 애니메이션을 만드는 방법을 살펴보겠습니다. 그리고 오른쪽, 용기 가장자리에 닿았습니다. 이 애니메이션은 길이를 알 수 없는 절대 위치 지정이 있는 모든 div에 적용할 수 있습니다.

문제: 왼쪽을 직접 사용하면 일시적으로 사라집니다

처음에는 왼쪽을 사용 0% 및 100%에서는 이동하는 동안 div가 일시적으로 사라질 수 있습니다. 이는 100%에서 div의 왼쪽 속성이 컨테이너의 너비를 초과하여 음수 값이 발생하고 위치가 화면에서 벗어나기 때문입니다.

더 유동적인 솔루션: 변환과 왼쪽 혼합

이 문제를 해결하고 부드럽고 선형적인 움직임을 달성하기 위해 변환을 도입합니다. 이를 통해 현재 위치를 기준으로 div를 이동하여 컨테이너 경계를 초과하지 않도록 할 수 있습니다.

다음은 변환을 사용하여 업데이트된 애니메이션 버전입니다.

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

#div1 {
  /* ... */
  animation: destraSinistra 1s linear infinite alternate;
}

여기 코드에서 100%의 키프레임은 왼쪽과 변환을 모두 활용합니다. Left는 div를 오른쪽 가장자리로 이동하고, 변환은 초과를 보상하기 위해 div를 왼쪽으로 추가로 이동합니다. 이 조합은 div가 화면 밖으로 나가는 것을 효과적으로 방지합니다.

위 내용은 컨테이너 내의 Div에 대해 부드러운 왼쪽-오른쪽 CSS 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!