다음은 기사의 핵심을 포착하는 몇 가지 질문 기반 제목입니다. 짧고 직접적인: * 요소가 사라지지 않고 CSS에서 부드러운 수평 이동에 애니메이션을 적용하는 방법은 무엇입니까? * CSS 애니메이션: Ac

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

이 질문은 div를 왼쪽과 오른쪽 사이에서 가로로 이동하는 CSS 전용 애니메이션을 찾습니다. 컨테이너의 오른쪽 가장자리. 단순한 왼쪽 값을 사용할 때의 문제점은 오른쪽에서 왼쪽으로 이동할 때 요소가 순간적으로 사라진다는 것입니다.

이를 극복하기 위해 제공된 답변에서는 왼쪽 또는 오른쪽과 결합된 변환을 활용할 것을 제안합니다. 이렇게 하면 고정 값이 필요하지 않습니다.

<code class="css">@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform:translateX(-100%);
  }
}</code>

다음 CSS를 사용하여 이 애니메이션을 div에 적용하면:

<code class="css">#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate
}</code>

div는 컨테이너 가장자리 사이에서 수평으로 이동하여 다음을 유지합니다. 애니메이션 전반에 걸쳐 가시성을 확보할 수 있습니다. 이 솔루션은 일반적이며 너비에 관계없이 절대 위치 지정이 있는 모든 div에 적용할 수 있습니다.

위 내용은 다음은 기사의 핵심을 포착하는 몇 가지 질문 기반 제목입니다. 짧고 직접적인: * 요소가 사라지지 않고 CSS에서 부드러운 수평 이동에 애니메이션을 적용하는 방법은 무엇입니까? * CSS 애니메이션: Ac의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!