В mozille и IE не работает transition на background-image

@korol_lion · Регистрация: 06.04.2013

Author24 — интернет-сервис помощи студентам

Префиксы стоят, но эти два браузера просто игнорят анимацию фона. В остальных браузерах все работает

@Alex_just · 05.07.2015, 13:29

Как лечить без пациента?? Сылку на сайт..

@korol_lion · 05.07.2015, 13:47 **[ТС]**

CSS

#slider {
                width: 960px;
                height: 250px;
                margin-bottom: 20px;
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
                
            }

HTML5

<a id="link" href="">
            <div id="slider"></div>
            <div id="bigline"><img src="https://www.cyberforum.ru/images/bigline.png"></div>
        </a>

Картника фона меняется из JS. Сайта нет, это слайдер.

@Jho · 05.07.2015, 17:30

@Игор35 · 05.07.2015, 17:39

В mozille и IE не работает transition на background-image

Поподробнее напишите, пожалуйста. Киньте код, где анимация есть.

@korol_lion · 06.07.2015, 01:28 **[ТС]**

HTML5

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
 
            #slider {
                width: 960px;
                height: 250px;
                margin-bottom: 20px;
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
                
            }   
 
        </style>
    </head>
    <body>
        <a id="link" href="">
            <div id="slider"></div>
            <div id="bigline"><img src="https://www.cyberforum.ru/images/bigline.png"></div>
        </a>
        <script>
            var images = ["slider_1.png",
                          "slider_2.png",
                          "slider_3.png"];
            var links = ["slider_1.html",
                          "slider_2.html",
                          "slider_3.html"];
                          
            var slider = document.getElementById("slider");
            var link = document.getElementById("link");
            slider.style.backgroundImage = "url(images/" + images[0] + ")";
            link.setAttribute("href", links[0]);
 
            function goSlider() {
                var count = 1;
                var timer = setInterval(function() {
                    if(count < images.length) {
                        slider.style.backgroundImage = "url(images/" + images[count] + ")";
                        link.setAttribute("href", links[count]);
                        count++;
                    } else {
                        count = 1;
                    }
                    
                }, 5000)
            }
 
            goSlider();
        </script>
    </body>
</html>

@korol_lion 4 / 4 / 2 Регистрация: 06.04.2013 Сообщений: 181
		1
	В mozille и IE не работает transition на background-image 05.07.2015, 13:07. Показов 1967. Ответов 5 Метки нет (Все метки) Префиксы стоят, но эти два браузера просто игнорят анимацию фона. В остальных браузерах все работает 0

@Alex_just 0 / 0 / 0 Регистрация: 05.07.2015 Сообщений: 1
	05.07.2015, 13:29	2
	Как лечить без пациента?? Сылку на сайт.. 0

@Jho 9 / 9 / 5 Регистрация: 16.04.2015 Сообщений: 53
	05.07.2015, 17:30	4
	<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> Скрипт автоматически префиксы ставит,можно их даже не прописывать.Вставь,мне помогло. 0

@Игор35 23 / 23 / 7 Регистрация: 26.08.2013 Сообщений: 334
	05.07.2015, 17:39	5
	В mozille и IE не работает transition на background-image Поподробнее напишите, пожалуйста. Киньте код, где анимация есть. 0

	06.07.2015, 01:28