在關鍵幀中獲取background-img

Question

我想弄清楚關鍵幀動畫，並且這樣做，我想要合併多張圖片。例如，每增加10％我就會想要更改圖像以顯示某人正在運行。

我試過在background-img中添加我的演示程序，它根本不會顯示圖像。我搜索了這個，但我發現的唯一結果是2013年，他們說那是不可能的，但我認爲三年內這可能已經改變。

如果這是不可能的，你會如何建議我每10％左右改變圖像？

這是我一直在努力迄今：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url("http://optimumwebdesigns.com/images/brain.jpg"); 
 
    position: relative; 
 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */ 
 
    animation-name: example; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: 3; 
 
    animation-direction: normal; 
 
} 
 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    0% {background-color:red; left:0px; top:0px;} 
 
    25% {background-color:yellow; left:500px; top:0px;} 
 
    50% {background-color:blue; left:500px; top:200px;} 
 
    75% {background-color:green; left:0px; top:200px;} 
 
    100% {background-color:red; left:0px; top:0px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    0% {background-color:red; left:0px; top:0px;} 
 
    25% {background-color:yellow; left:500px; top:0px;} 
 
    50% {background-color:blue; left:500px; top:200px;} 
 
    75% {background-color:green; left:0px; top:200px;} 
 
    100% {background-color:red; left:0px; top:0px;} 
 
}

<div></div>

Answer 1

添加background-size

background-repeat: no-repeat; 
background-size: 100% auto; 

https://jsfiddle.net/bu7tgz5y/