Question

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.

What I tried:

.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");
}

EDIT: JQuery is not an option.

Answer 1

CSS doesn’t fade or animate background images without a javascript plugin. If you want an only CSS option, you need to wrap it in a div, and fade in/out the whole div.