title: Only with CSS, looping 30 images one after another for infinite time creating a burning fire effect
body: <p>sorry if this question repeats another one , but i did not find result for only CSS usage for creating this effect . </p>
  
  <p>I have 30 images , with which i need to create a burning effect ( hence they need to show in the same div content and to loop infinite. </p>
  
  <p>I tried with percentages and with adding the browser prefixes as well. Also with "opacity property and "fade in" , but i get only one image to repeat itself. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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)
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box4"&gt;&lt;img src="assets/fireImages/fire_1.png"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have also tried with creating css class , so the image src not to be the URL , but the class, and still does not work. i am doing ,i guess, everything wrong , but i need somoone to point me in a direction .</p>
  
  <p>Thank you to everyone in advance</p>