在关键帧中获取background-img

Question

I am trying to figure out keyframe animation and in doing so, I wanting to incorporate multiple pictures. For example, every 10% increment I will want to change out the image to show someone running.

I have tried adding in a background-img to my demo and it will not do show the image at all. I searched for this, but the only results I found were from 2013 and they said it wasn't possible then, but I figured in three years this may have changed.

If this is not possible, how would you recommend I change the image every 10% or so?

Here is what I have been trying so far:

 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

add background-size

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

https://jsfiddle.net/bu7tgz5y/