在关键帧中获取背景图像

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/

在关键帧中获取背景图像

Getting a background-img in a keyframe

html

css

css-transitions

css-animations