[css] Picture Animation

Old 

=========================================================================

position: absolute;

overflow: hidden;

background-image:url("assets/bg_1.jpg");

background-image:url("assets/bg_2.jpg");

background-image:url("assets/bg_3.jpg");

background-image:url("assets/bg_afternoon_1.jpg");

     /*animation:fadeInOut 360s linear 2s infinite alternate;*/

      /*animation: example 5s linear 2s infinite alternate;*/

  animation-name: fadeInOut;

  animation-duration: 360s;

  animation-timing-function: ease-in-out; /*linear;*/

  animation-delay: 0s;

  animation-iteration-count: infinite;

  /*animation-direction: alternate;     */

  }

@keyframes fadeInOut {

0% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_1.jpg");}

11% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_2.jpg");}

22% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_3.jpg");}

33% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_1.jpg");}

44% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_2.jpg");}

55% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_3.jpg");}

66% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_4.jpg");}

77% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_5.jpg");}

88% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_6.jpg");}

100% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_1.jpg");}

} 

=========================================================================

New

=========================================================================

overflow: hidden;

background-image:url("assets/bg_1.jpg"),

url("assets/bg_2.jpg"),

url("assets/bg_3.jpg"),

url("assets/bg_afternoon_1.jpg"),

url("assets/bg_afternoon_2.jpg"),

url("assets/bg_afternoon_3.jpg"),

url("assets/bg_afternoon_4.jpg"),

url("assets/bg_afternoon_5.jpg"),

url("assets/bg_afternoon_6.jpg");

      animation: fadeInOut 360s ease-in-out 0s infinite; 

     /*animation:fadeInOut 360s linear 2s infinite alternate;*/

      /*animation: example 5s linear 2s infinite alternate;*/

  //animation-name: fadeInOut;

  //animation-duration: 360s;

  //animation-timing-function: ease-in-out; /*linear;*/

  //animation-delay: 0s;

  //animation-iteration-count: infinite;

  /*animation-direction: alternate;     */

  }

@keyframes fadeInOut {

0% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_1.jpg");}

11% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_2.jpg");}

22% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_3.jpg");}

33% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_1.jpg");}

44% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_2.jpg");}

55% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_3.jpg");}

66% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_4.jpg");}

77% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_5.jpg");}

88% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_afternoon_6.jpg");}

100% {Transition: background-image 1s ease-in-out;

background-image:url("assets/bg_1.jpg");}

}

=========================================================================

However, MDN spec [2] *doesn't* indicate {{background-image}} is an *animatable* property. So it might be better to use CSS animation with another property e.g. {{opacity}}.
Also, from browser perspective, every operation setting the background-image will trigger a repaint which is expensive in rendering.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties