Làm cách nào để thay đổi vị trí nền bằng hoạt ảnh css3?

Question

phép nói rằng tôi có một phần tử div, với một nền tảng về position: 0%; thế nào tôi sẽ thay đổi vị trí tới eg position: 100%; nhưng với các khung hình chính trên di chuột

tôi dường như không thể sử dụng khung hình đúng cách, nó không bao giờ làm việc và tôi có tất cả các trình duyệt mới nhất.

Cảm ơn.

Answer 1

Nếu bạn chỉ muốn tạo hiệu ứng vị trí nền trên di chuột, việc sử dụng chuyển tiếp thay vì hoạt ảnh khung hình dễ dàng hơn rất nhiều. Hãy xem ví dụ này để biết ví dụ: http://jsfiddle.net/hfXSs/

Nếu bạn muốn nỗ lực thêm làm cho hoạt ảnh trở thành hoạt ảnh, bạn sẽ phải đặt trạng thái hoạt ảnh trên div thành 'tạm dừng' và thay đổi thành ' chạy 'trên di chuột. Xem spec trên tạm dừng hình ảnh động ở đây: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: Tôi đã chán vì vậy đây là điều tương tự sử dụng hình ảnh động keyframe: http://jsfiddle.net/wGRg5/

Rõ ràng, fiddle có vấn đề mà khi bạn không lơ lửng trên div sự hoạt ảnh tạm dừng mà có lẽ không phải là hiệu ứng mong muốn.

Answer 2

Một số mã, trông giống như chỉ webkit tại thời điểm này.

.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; 
} 

Via: http://jsfiddle.net/hfXSs/

More đây: http://css-tricks.com/parallax-background-css3/