為什么這不起作用？我究竟做錯了什么？的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;}演示http://jsfiddle.net/hAGKv/提前致謝！
3 回答
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
背景圖片不是可以動畫的屬性 -您不能在屬性之間進行補間。
相反，請嘗試使用position：absolute將所有圖像疊加在一起，然后將所有圖像的不透明度動畫化為0（除了您要重復的圖像之外）。
慕碼人2483693
TA貢獻1860條經驗 獲得超9個贊
我需要做與您相同的事情，然后著手回答您的問題。最后，我找到了有關從此處了解的步驟功能的信息。
JSF我的解決方案的中間部分（請注意，它目前在Firefox中有效，我將讓您添加跨瀏覽器行，以使解決方案保持混亂）
首先，我創建了一個具有兩個框架的Sprite表。然后我創建了div并將其作為背景，但是我的div只是我的精靈的大?。?00px）。
<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;
}
動畫設置為2個步驟，整個過程需要1秒鐘。
@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提到了步驟功能，但我想我會對此進行詳細說明。很簡單，真棒的東西。
莫回無
TA貢獻1865條經驗 獲得超7個贊
這確實很快速而且很骯臟，但是可以完成工作：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% {
}
}
我正在使用jQuery在我的網站上進行類似的操作，但是當用戶向下滾動頁面時會觸發轉換-jsFiddle
- 3 回答
- 0 關注
- 1409 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消