css 애니메이션
본문
그냥 간단한 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에서 먹인거가 없는지 체크 해 주셔요
그거부터 우선 되어야 할거 같은데요
블럭이 무얼 말씀하시는지.. display:block; 이 블럭말씀하시는건지요?
이거라면 링크버튼 같은 개별 css에는 적용이 되어있는데 기본적인 css에는 적용되어있는게 없는데..
제가 잘못이해한거라면 블럭이 무얼 말씀하시는지 설명좀 부탁드려도 될까요? ㅜ ㅜ
MJEI 님 아래 좌표 참고하세요.
http://www.homzzang.com/b/html-103
