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 값이 안먹어요. 무슨이유 일까요?
너무 답답합니다..