title: How to fade-in and fade-out background-image with CSS transition?
body: <p>I have an element which does not have a background image when the app is loaded. Then when a button is clicked, a CSS class gets added to the element which sets the background-image for that element for a few seconds. Problem is - I can't get the background image to fade-in and fade-out.</p>
  
  <p>What I tried:</p>
  
  <pre><code>.MyBox.formElementInput {
  background-repeat: no-repeat;
  background-position: 65px center;
  background-size: "contain";
  -webkit-transition:background-image 2s ease-in-out;
  -moz-transition: background-image 2s ease-in-out;
  -o-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
  }
  
  .MyBox.formElementInput.showSpinner {
      background-image : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
  }
  </code></pre>
  
  <p>EDIT: JQuery is not an option. </p>