0

I have a background that I want to update when the user hovers over an input using a transition. Works great in Chrome, but the transition is instantaneous in IE and Firefox regardless of what transition-duration I set.

CSS

body {
    background: url( 'some_url.jpg' ) no-repeat center center fixed;
    -webkit-transition: background 500ms ease-in-out 0s;
    -moz-transition: background 500ms ease-in-out 0s;
    transition: background 500ms ease-in-out 0s;
}

body.enhanced {
    background: url( 'some_different_url.jpg' ) no-repeat center center fixed;
}

JS

jQuery( document ).on( 'mouseover focus', 'input' , function() {
    jQuery( 'body' ).addClass( 'enhanced' );
} );
jake_feyereisen
  • 709
  • 1
  • 7
  • 18
  • 2
    Background-image transitions are not really supported. This should provide good information on this issue: http://stackoverflow.com/questions/9483364/css3-background-image-transition – Marcelo Sep 29 '15 at 14:47
  • 1
    You cannot transition binary images. – connexo Sep 29 '15 at 14:49
  • In a few more words, browsers don't support the same function that programs like Adobe Premiere Pro does. They can't interlace two images in a transition like that. – TylerH Sep 29 '15 at 14:50

0 Answers0