JSFiddle - React, Tailwind, and code Playground

HTML

<picture class="backgroundImage">

</picture>

CSS

.backgroundImage {
      opacity: 0; /* set `opacity` to `0` */
      width: 50px;
      width: 50px;
      content: url(http://lorempixel.com/50/50/technics); /* set intial image */
      animation-name: fadein;
      animation-iteration-count: 1;
      animation-duration: 2500ms;
      animation-fill-mode: both;
    }
    
    @keyframes fadein {
      to {
        opacity: 1; /* fade in image */
      }
    }
    
    @media (min-width: 0) and (max-width: 450px) {
      .backgroundImage {
        opacity: 0; /* set `opacity` to `0` */
        content: url(http://lorempixel.com/50/50/cats); /* set image */
        animation-name: first;
      }
      @keyframes first {
        to {
          opacity: 1; /* fade in image */
        }
      }
    }
    
    @media (min-width: 451px) and (max-width: 1024px) {
      .backgroundImage {
        opacity: 0; /* set `opacity` to `0` */
        content: url(http://lorempixel.com/50/50/city); /* set image */
        animation-name: second;
      }
      @keyframes second {
        to {
          opacity: 1; /* fade in image */
        }
      }
    }
    
    @media (min-width: 1025px) {
      .backgroundImage {
        opacity: 0; /* set `opacity` to `0` */
        content: url(http://lorempixel.com/50/50/sports); /* set image */
        animation-name: third;
      }
      @keyframes third {
        to {
          opacity: 1; /* fade in image */
        }
      }
    }