Thay đổi Ảnh nền bằng Ảnh động CSS3

Question

Tại sao tính năng này không hoạt động? Tôi đang làm gì sai?

CSS

@-webkit-keyframes test { 
    0% { 
    background-image: url('frame-01.png'); 
    } 
    20% { 
    background-image: url('frame-02.png'); 
    } 
    40% { 
    background-image: url('frame-03.png'); 
    } 
    60% { 
    background-image: url('frame-04.png'); 
    } 
    80% { 
    background-image: url('frame-05.png'); 
    } 
    100% { 
    background-image: url('frame-06.png'); 
    } 
} 

div { 
    float: left; 
    width: 200px; 
    height: 200px; 
    -webkit-animation-name: test; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: linear; 
} 

DEMO

http://jsfiddle.net/hAGKv/

Cảm ơn trước!

Answer 1

Hình nền không phải là thuộc tính có thể hoạt ảnh - bạn không thể tween thuộc tính.

Thay vào đó, hãy thử đặt tất cả các hình ảnh lên trên nhau bằng cách sử dụng vị trí: tuyệt đối, sau đó tạo hiệu ứng cho độ mờ của tất cả chúng thành 0 ngoại trừ số bạn muốn lặp lại.

Answer 2

Như đã nêu ở trên, bạn không thể thay đổi hình nền trong hoạt ảnh. Tôi đã tìm thấy giải pháp tốt nhất để đưa hình ảnh của bạn vào một trang ma trận và sau đó tạo hiệu ứng bằng cách thay đổi vị trí nền, nhưng nếu bạn đang xây dựng cho thiết bị di động, các trang ma trận của bạn bị giới hạn dưới 1900x1900 px.

Answer 3

Nó hoạt động trong Chrome 19.0.1084.41 beta!

Vì vậy, tại một số thời điểm trong tương lai, khung hình chính có thể thực sự là ... khung!

Bạn đang sống trong tương lai;)

Answer 4

Tôi cũng có thể thay đổi chúng bằng chrome. Đơn giản và hoạt động tốt trong Chrome bằng cách sử dụng các thuộc tính css -webkit.

Answer 5

Bạn có thể làm theo bởi mã này:

#cd{ 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 281px; 
 
    width: 450px; 
 
} 
 
#cf img{ 
 
    left: 0; 
 
    position: absolute; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
#cf img.top:hover{ 
 
    opacity: 0; 
 
}

<div id="cf"> 
 
    <img class="button" src="Birdman.jpg" /> 
 
    <img src="Turtle.jpg" class="top" /> 
 
</div>

Answer 6

Đây thực sự là nhanh chóng và dơ bẩn, nhưng nó được công việc làm: jsFiddle

#img1, #img2, #img3, #img4 { 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:-1; 
    animation-name: test; 
    animation-duration: 5s; 
    opacity:0; 
} 
#img2 { 
    animation-delay:5s; 
    -webkit-animation-delay:5s 
} 
#img3 { 
    animation-delay:10s; 
    -webkit-animation-delay:10s 
} 
#img4 { 
    animation-delay:15s; 
    -webkit-animation-delay:15s 
} 

@-webkit-keyframes test { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
    } 
} 
@keyframes test { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
    } 
} 

Tôi đang làm việc trên một cái gì đó tương tự cho trang web của tôi bằng cách sử dụng jQuery, nhưng quá trình chuyển đổi được kích hoạt khi người dùng cuộn xuống trang - jsFiddle

Answer 7

Chức năng thời gian linear sẽ tạo hiệu ứng động các thuộc tính được xác định tuyến tính. Đối với background-hình ảnh có vẻ như có hiệu ứng mờ dần/thay đổi kích thước trong khi thay đổi khung hình của bạn hoạt hình (không chắc chắn nếu nó là hành vi tiêu chuẩn, tôi sẽ đi với cách tiếp cận @ Chukie B).

Nếu bạn sử dụng chức năng steps, nó sẽ hoạt hình một cách rõ ràng. Xem tài liệu về hàm thời gian trên MDN để biết thêm chi tiết. Đối với trường hợp của bạn, hãy làm như sau:

-webkit-animation-timing-function: steps(1,end); 
animation-timing-function: steps(1,end); 

Xem này jsFiddle.

Tôi cũng không chắc đó có phải là hành vi tiêu chuẩn hay không, nhưng khi bạn nói rằng sẽ chỉ có một bước, nó cho phép bạn thay đổi điểm xuất phát trong phần @keyframes. Bằng cách này bạn có thể xác định từng khung hình của bạn.

Answer 8

Bạn có thể sử dụng thuộc tính hình nền động và hình ảnh sprite.

Answer 9

Tôi cần phải làm điều tương tự như bạn và cập nhật câu hỏi của bạn. Tôi đã kết thúc việc tìm kiếm về các bước chức năng mà tôi đọc từ here.

JSFiddle of my solution in action (Lưu ý nó hiện đang làm việc trong Firefox, tôi sẽ cho phép bạn thêm các dòng crossbrowser, cố gắng để giữ cho các giải pháp làm sạch lộn xộn)

Trước tiên tôi tạo a sprite sheet that had two frames. Sau đó, tôi tạo ra div và đặt nó làm nền, nhưng div của tôi chỉ là kích thước của sprite của tôi (100px).

<div id="cyclist"></div> 

#cyclist { 
    animation: cyclist 1s infinite steps(2); 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-image: url('../images/cyclist-test.png'); 
    background-repeat: no-repeat; 
    background-position: top left; 
    } 

Hoạt ảnh được đặt thành 2 bước và có toàn bộ quá trình mất 1 giây.

@keyframes cyclist { 
    0% { 
    background-position: 0 0; 
    } 
    100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px 
    } 
} 

Thiago above mentioned the steps function nhưng tôi nghĩ tôi sẽ giải thích thêm về nó. Công cụ khá đơn giản và tuyệt vời.

Answer 10

Tôi cần làm điều tương tự gần đây. Dưới đây là một việc thực hiện đơn giản

#wrapper { width:100%; height:100%; position:relative; } 
 
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; } 
 
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; } 
 
@keyframes fadeOut { 
 
    0% { opacity:1; } 
 
    100% { opacity:0; } 
 
}

<div id="wrapper"> 
 
    <img src="img1.jpg" class="top" style="z-index:2;"> 
 
    <img src="img2.jpg" style="z-index:1;"> 
 
</div>

Answer 11

trình cho tôi. Lưu ý việc sử dụng background-image để chuyển đổi.

#poster-img { 
    background-repeat: no-repeat; 
    background-position: center; 
    position: absolute; 
    overflow: hidden; 
    -webkit-transition: background-image 1s ease-in-out; 
    transition: background-image 1s ease-in-out; 
}