在CSS中使用緩存步驟（）

我正在創建一個加載微調器，並且存在動畫問題。在CSS中使用緩存步驟（）

精靈表貫穿22個步驟。我想在動畫的開頭和結尾使用緩動效果。當我添加緩動時，動畫變爲靜態。

的jsfiddle：https://jsfiddle.net/Flignats/aaaaaf6h/3/

.hi { 
    width: 68px; 
    height: 68px; 
    background-image: url("data:image/png;base64, ... "); 

    -webkit-animation: play 1s steps(23) infinite; 
     -moz-animation: play 1s steps(23) infinite; 
     -ms-animation: play 1s steps(23) infinite; 
     -o-animation: play 1s steps(23) infinite; 
      animation: play 1s steps(23) infinite; 
} 

@-webkit-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -1564px; } 
} 

@-moz-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -1564px; } 
} 

@-ms-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -1564px; } 
} 

@-o-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -1564px; } 
} 

@keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -1564px; } 
}

來源

2016-04-21 Flignats

的steps是定時中的一個（緩和）功能可用（並且不能使用多個寬鬆功能）。

閱讀docs約The steps() class of timing-functions

的steps()函數表示法限定的階梯函數除以輸出值的域在等距步。

來源

2016-04-21 22:53:55

感謝您的信息！如果我刪除了步驟功能並輕鬆定時，動畫定時功能：輕鬆;動畫不會保持靜態。對此有何想法？ – Flignats

問題是緩動控制關鍵幀之間的插值。既然你在動畫背景位置，'x'會以不同的速度動畫（*基於緩動函數*），所以它不會進入預定義的步驟（*你會看到背景精靈在'x'位置不適合其容器*）。唯一的解決方案是使用線性緩動功能並手動創建多個控制速度的關鍵幀，但這很難保持或調整。 –

在CSS中使用緩存步驟（）

回答

相關問題