只有使用CSS，无限时间将30张图像循环一次，从而产生燃烧的火力效果

Question

对不起，如果这个问题重复了另一个问题，但是我没有发现仅用于创建此效果的CSS使用结果。

我有30张图像，我需要创建燃烧效果(因此，它们需要以相同的DIV内容显示并无限循环。

我尝试了百分比，并添加浏览器前缀。还有"不透明度属性和"淡入淡出"，但我只得到一个图像可以重复。

.box4 {
  grid-column: 2/3;
  grid-row: 2/3;
}
.box4 img {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 60%;
  height: 80px;
  margin-left: 20%;
  margin-top: 5%;
  animation-name: myAnimation;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}
@keyframes myAnimation {
  0% {
    background-image: url(../fireImages/fire_1.png)
  }
  5% {
    background-image: url(../fireImages/fire_2.png)
  }
  10% {
    background-image: url(../fireImages/fire_3.png)
  }
  15% {
    background-image: url(../fireImages/fire_4.png)
  }
  20% {
    background-image: url(../fireImages/fire_5.png)
  }
  28% {
    background-image: url(../fireImages/fire_6.png)
  }
  32% {
    background-image: url(../fireImages/fire_7.png)
  }
  36% {
    background-image: url(../fireImages/fire_8.png)
  }
  40% {
    background-image: url(../fireImages/fire_9.png)
  }
  45% {
    background-image: url(../fireImages/fire_10.png)
  }
  49% {
    background-image: url(../fireImages/fire_11.png)
  }
  53% {
    background-image: url(../fireImages/fire_12.png)
  }
  58% {
    background-image: url(../fireImages/fire_13.png)
  }
  62% {
    background-image: url(../fireImages/fire_14.png)
  }
  64% {
    background-image: url(../fireImages/fire_15.png)
  }
  68% {
    background-image: url(../fireImages/fire_16.png)
  }
  72% {
    background-image: url(../fireImages/fire_17.png)
  }
  76% {
    background-image: url(../fireImages/fire_18.png)
  }
  78% {
    background-image: url(../fireImages/fire_19.png)
  }
  82% {
    background-image: url(../fireImages/fire_20.png)
  }
  84% {
    background-image: url(../fireImages/fire_21.png)
  }
  86% {
    background-image: url(../fireImages/fire_22.png)
  }
  88% {
    background-image: url(../fireImages/fire_23.png)
  }
  90% {
    background-image: url(../fireImages/fire_24.png)
  }
  92% {
    background-image: url(../fireImages/fire_25.png)
  }
  94% {
    background-image: url(../fireImages/fire_26.png)
  }
  96% {
    background-image: url(../fireImages/fire_27.png)
  }
  98% {
    background-image: url(../fireImages/fire_28.png)
  }
  99% {
    background-image: url(../fireImages/fire_29.png)
  }
  100% {
    background-image: url(../fireImages/fire_30.png)
  }
}

<div class="box4"><img src="assets/fireImages/fire_1.png"></div>

我还尝试过创建CSS类，因此图像SRC不是URL，而是类，但仍然不起作用。我想，我在做所有错误的事情，但是我需要索马奥将我指向一个方向。

谢谢大家

Answer 1

不幸的是，背景图像不是可以通过CSS对动画进行动画的属性。为此，您别无选择，只能使用脚本。参考：https：//developer.mozilla.org/en-us/docs/web/css/css_animated_properties

Answer 2

您的错误是在img元素上使用background-image属性。您可以在AM IMG元素上具有背景图像，但是在那种情况下，背景图像将被实际图像隐藏，除非它具有透明的部分，但在您的情况下却没有。分配IMG元素，并在常规部门上使用背景图像

kornelijus说背景图像无法动画时，他会投掷一些曲线球。这只是意味着它不能逐渐更改，正如他链接到的页面上所说的那样。无论如何，更改背景图像的概念逐渐没有意义 - 它是一个图像或另一个图像。

在下面运行代码段以查看行动中的概念。我减少了密钥帧的数量，并使用了内线图像，因此您实际上看不到图像更改。

.box4 {
    grid-column:2/3;
    grid-row:2/3;
 }
 .box4{
        display:flex;
        flex-direction: row;
        align-items: center;
        width: 315px;
        height: 65px;
        margin-left: 20%;
        margin-top: 5%;
        animation-name:myAnimation;
        animation-duration:2s;
        animation-iteration-count: infinite;
 }
@keyframes myAnimation {
       0%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
       20%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigyNTUsMCwwKTsiIC8+PC9zdmc+")}
       40%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
       60%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
       80%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigyNTUsMCwwKTsiIC8+PC9zdmc+")}
       100%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
 }

<div class="box4"></div>

我不建议这样做动画。视频会更好。直到第一次在页面上渲染之前，才要求图像，因此，如果您引用了外部图像，则不会及时下载它们以作为动画的第一个循环。

Answer 3

谢谢你们。情况是，这是一个有要求的任务，就是用我获得的30张图像制作动画，我也可以使用SASS/LINS/手写笔，但是我对编程很感兴趣，并且尚未对这些CSS预处理器进行研究(动画可以与预科器制作吗？(。由于没有具体的指导，我只能从这些图像中制定礼物，然后将其分配给div