Chrome is actually the browser displaying unexpected behavior here. CSS transitions don't work on all properties, background images being one of the properties that isn't animatable (http://www.w3.org/TR/css3-background/#the-background-image).
But in the case of Mozilla Fire Fox most of the css properties are same as in Google Chrome . Yet there is a problem in their syntax . If you don't mind can you suggest me some sites to learn it well.
-webkit-transition: all 0.5s ease-out; /* for chrome*/
-moz-transition:all 0.5s ease-out; /* for mozilla*/
</style>
But in the case of mozilla the transition is not working.
Anybody can help me .............?
transition: all 0.5s ease-out;
I really enjoyed that.....
http://codepen.io/anon/pen/mgDhi
Worked for me in FF (somewhat, may need *animation*) and chrome (good).
But in the case of Mozilla Fire Fox most of the css properties are same as in Google Chrome .
Yet there is a problem in their syntax . If you don't mind can you suggest me some sites to learn it well.