테스트 사이트 - 개발 중인 베타 버전입니다

css 애니메이션 채택완료

MJEI 9년 전 조회 2,244

그냥 간단한 rotate되는 애니메이션을 적용하려고 하는데요.

 .box {   position: absolute;left:0;width:100px;height:100px;border-radius: 50px;text-align: center;

  animation-name: rint;   animation-duration: 2s;   animation-iteration-count: infinite;   animation-direction: alternate;   animation-timing-function: linear;  }   @keyframes rint {   from {left: 0; transform: rotate(0deg);} 50% {left: 900px;} to {left: 900px; transform: rotate(360deg);}

 } 

이런걸로 테스트중이였는데 이걸 적용하면 애니메이션이 구동되는대신 다른 위치의 div에 백그라운드 이미지 fixed 해놓은게 fixed 값이 해제되는건지 안먹는건지 배경이미지가 fixed가 안되네요...

 

#visual1 { position:relative; margin:100px 0 0; width:100%; height:280px; z-index:99; background: url('../img/bg_main.jpg') no-repeat fixed; background-size: 100%; } 배경 이미지가 고정되있는 div css는 이렇게 되어있어요. 그냥 일반적인것들로 되어있어서... 별다를게 없는데..ㅠㅠ 왜이러는건지.. 

 

 

근데 파이어 폭스에서는 정상이고 크롬에서만 배경 fixed 값이 안먹어요. 무슨이유 일까요?

너무 답답합니다..

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

div의 모든 속성의 기본은 블럭을 따라가는거 같습니다.

기본CSS에서 먹인거가 없는지 체크 해 주셔요

그거부터 우선 되어야 할거 같은데요 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

M
MJEI
9년 전
블럭이 무얼 말씀하시는지.. display:block; 이 블럭말씀하시는건지요?
이거라면 링크버튼 같은 개별 css에는 적용이 되어있는데 기본적인 css에는 적용되어있는게 없는데..

제가 잘못이해한거라면 블럭이 무얼 말씀하시는지 설명좀 부탁드려도 될까요? ㅜ ㅜ
홈짱
9년 전
MJEI 님 아래 좌표 참고하세요.
http://www.homzzang.com/b/html-103

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인