CSS image transition in Mozilla doesn't work

Asked Oct 25 '17 at 15:57

Active Oct 25 '17 at 16:22

Viewed 31 times

.news-img {
    width: 100%;
    height:170px;
    background-image: url('images/chiron.jpg');
    transition-property: all;
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out;
}

.news-img:hover {
    background-image: url('images/royale.jpg');
}

I've watched a few tutorials about transitions, read some posts here and I still can't understand why my transition works? I've tried as well with:

transition: all 1s ease-in-out;

I know it's the same thing, but still doesn't work..

edited Oct 25 '17 at 16:22

marc_s

732,580
175
1,330
1,459

asked Oct 25 '17 at 15:57

specbk

i've tried it. I'm using mozilla and i don't know if that's the problem. – specbk Oct 25 '17 at 16:01
As mentioned in the duplicate question, the `background-image` is not an animatable property. – Gabriele Petrioli Oct 25 '17 at 16:05
it works but only in webkit (tested in latest Chrome on Windows): https://codepen.io/svitch/pen/ZXgOKa – Sergey Sklyar Oct 25 '17 at 16:09

CSS image transition in Mozilla doesn't work

0 Answers0