0

I use transition in javascript but doesn't work on firefox, someone know why ? Is good on google chrome. This is my code :

el.style.backgroundImage = "url('menu.jpg')";
el.style.transition = "background 0.4s";
guest271314
  • 1
  • 15
  • 104
  • 177
Kakoum
  • 1
  • 1
  • 1
    Curious as to why you're putting the transition in Javascript in the first place? Also, see http://stackoverflow.com/questions/19808764/transition-for-background-image-in-firefox – jeremy Jan 17 '16 at 17:54
  • because i want this effect www.kakoum.fr (on menu hover) – Kakoum Jan 17 '16 at 18:19
  • You can put the transition in the CSS and still have it appear when you modify it in the JS. also look at the post I linked you to – jeremy Jan 17 '16 at 18:22

1 Answers1

0

Following suggestion at link posted by @Jeremy ; substituted setting transition to affect background-size for opacity

div a {
  color: #fff;
  z-Index: 3;
  position: absolute;
}
div:before,
div:after {
  content: " ";
  position: absolute;
  background-repeat: no-repeat;
  display: block;
  width: 50px;
  height: 50px;
  transition: background-size 0.4s;
}
div:before {
  background: #1F1F1F;
  background-size: 100% 100%;
}
div:after {
  background: url(http://lorempixel.com/50/50/nature);
  background-size: 0% 0%;
}
div:hover:before {
  background-size: 0% 0%;
}
div:hover:after {
  background-size: 100% 100%;
}
<div><a href="#">abc</a>
</div>

plnkr http://plnkr.co/edit/XJMvtEnuvS1TF1xqIVVQ?p=preview

guest271314
  • 1
  • 15
  • 104
  • 177