CSS3 키 프레임 애니메이션의 위치가 창 크기에 따라 변경됩니다.

Question

CSS3를 사용하여 키 프레임 애니메이션에 문제가 있습니다. 움직이는 이미지의 위치는 윈도우/스크린 크기에 따라 바뀝니다. 이 문제에 대한 해결책을 찾기 위해 노력했지만 잃어 버렸습니다. 애니메이션을 재생할 수 있도록 경계를 지정하려했지만 작동하지 않았습니다.

here을 참조하고 창 크기를 조정 해보십시오. 나는 이것이 position:absolute과 관련이 있다는 것을 알고 있습니다. 나의 궁극적 인 목표는 공간 배경을 왼쪽에서 오른쪽으로 움직이는 것이었지만 그것이 의미가있는 경우에는 여전히 중심에서 죽은 채로 남아있게하는 것이었다.

도움 주셔서 감사합니다.

Answer 1

---

문제 space-bg의 애니메이션 절대 좌측 위치를 수정하면서 가장자리 왼쪽과 오른쪽 마진 특성이 tdr-main 왼쪽 가장자리를 조정 자동으로 설정되는 점이다. 창 크기를 더 작은 크기로 조정하면 tdr-main의 왼쪽 여백은 45px로 줄어들지 만 배경 이미지의 왼쪽 위치는 여전히 절대 크기 342px와 450px 사이에서 이동합니다.

<div id="tdr-main"> 
     <div id="space-bg"> 
     </div> 
     [...] 
</div> 

당신이 그것에 자동 마진을 가지고 같은 컨테이너 내부 space-bg을 포함 할 경우

후 모두 중앙에 유지됩니다 및 공간 BG의 위치는 중심 컨테이너 사업부를 기준으로 할 것이다. 물건을 정확하게 쌓아두기 위해 절대 또는 상대 위치 지정과 함께 Z- 색인을 사용하십시오.