0

This transition is smooth in Chrome, but Firefox and IE change it from one to another without smooth transition.

.bstrap.footer-logo {
    background: url("../img/bootstrap_bw.png") no-repeat;
    background-size: contain;
    height: 64px;
    /*cursor: pointer;*/
}

.bstrap.footer-logo:hover {
    background: url("../img/bootstrap.png") no-repeat;
    background-size: contain;
    height: 64px;
    /*cursor: pointer;*/
}

.footer-logo {
    transition: background .5s ease-in-out;
    -moz-transition: background .5s ease-in-out;
    -webkit-transition: background .5s ease-in-out; /* Safari */
}
MosquitoPenguin
  • 13
  • 2
  • 6
  • 1
    duplicate of http://stackoverflow.com/questions/6084268/why-is-my-css3-transition-not-working-in-firefox?rq=1 or http://stackoverflow.com/questions/6309691/css3-transition-hover-effect-not-working-in-firefox-a-firefox-bug?lq=1 ? – Raidri Jul 26 '13 at 14:45
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties – CBroe Jul 26 '13 at 15:08
  • I think background-image is not in the list of animate-able properties, because then someone would have to specify _how exactly_ to transition from one image to another first … but maybe you could emulate something similar by having two containers with the background images positioned underneath your content, and then transition their opacity – the one from none to full, and the other one the other way around … that should “blend over” from one image to the other. – CBroe Jul 26 '13 at 16:47

0 Answers0