0
Google 크롬에는 두 개의 요소가 있는데 하나는 CSS3 애니메이션이고 다른 하나는 고정 위치와 절대 위치에 부모가있는 배경 이미지가 있습니다.) 고정 된 속성은 애니메이션이 활성화되면 작동을 멈 춥니 다. 여기 CSS3 애니메이션으로 고정 위치 이미지가 작동하지 않음
은 크롬에서 열린 JSFiddle입니다 위로 스크롤 아래로 이미지가 고정보고, 다음, 고정 자산 휴식 볼 수있는 빨간색 사각형 위에 마우스를 올려 :http://jsfiddle.net/keleturner/44mjq/
<div class="animation">
</div>
<div class="background">
<span></span>
</div>
.animation { display: block; width: 300px; height: 300px; background: red; -webkit-transition: 1.8s -webkit-transform ease; }
.animation:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
.background { position: absolute; left:0; top: 300px; display: block; width: 100%; height: 500px; }
.background span { background-attachment: fixed; background-size: cover; background-image: url(http://image.jpg); width: 100%; height: 100%; display: block; }
을 어떤 아이디어?