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 중국어 웹사이트의 기타 관련 기사를 참조하세요!