Background image transition when switching classes

Background image transition when switching classes

I have a div with a background image. Using js I switch the class on that
div to chaneg the background. I would like a smooth switch - not so abrupt
as just switching. I am having difficulties with CSS transitions. Not sure
I am using them right in this case. I can do changes with :hover but this
doesn't seem to work. As a side note I am using Angular ngClass to switch
these classes and I see there is perhaps some use for ngAnimate...
.waiting {
background-image: url("/images/waiting.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
.uploading {
background-image: url("/images/uploading.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}