在关键帧中获取背景图像

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/