css3 애니메이션으로 백그라운드 위치를 변경하려면 어떻게해야합니까?

Question

은 내가

내가 제대로 키 프레임을 사용하는 것 수는 없지만 가져가에 키 프레임 position: 100%;을 예 수있는 위치를 변경 얼마나 position: 0%;의 배경, div 요소가 있다고 가정하자, 그것은 작동하지 않습니다와 나는 모든이 최신 브라우저.

감사합니다.

Answer 1

호버에 배경 위치 만 애니메이션으로 적용하려면 키 프레임 애니메이션 대신 전환을 사용하는 것이 훨씬 쉽습니다. 예를 들어이 바이올린을 참고하십시오 : http://jsfiddle.net/hfXSs/

애니메이션을 만들기 위해 더 많은 노력을 기울이고 싶다면 div의 애니메이션 재생 상태를 '일시 중지'로 설정하고 ' 실행 중 '을 가리 킵니다. http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

편집 : 여기에 애니메이션을 일시 중지에 대한 사양을 참조하십시오 내가 지금 여기에 지루 키 프레임 애니메이션을 사용하여 같은 일이되었습니다 분명히 http://jsfiddle.net/wGRg5/

을, 바이올린은 당신이 유혹되지 않는다는 문제가있는 DIV 아마도 원하는 효과가 아닌 애니메이션 일시 중지.

Answer 2

일부 코드는 현재로서는 웹킷처럼 보입니다.

.box { 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://lorempixum.com/300/300') no-repeat; 
    background-position:-300px; 
    -webkit-transition:background-position 1s ease; 
} 

.box:hover{ 
    background-position:0px; 
} 

통해 : http://jsfiddle.net/hfXSs/

여기에 더 많은 : http://css-tricks.com/parallax-background-css3/