CODEWITHSUNDEEP
csshtmlinternet-exploreropera
sasi
sasi

Reputation: 99

background animate image is not working in IE and Opera browsers

This is my css code:

body {
        margin: 0;
        padding: 0;
    }
    #slideshow {
        position: relative;
        overflow: hidden;
        height: 100px;
    }
 #fixme
{

    height : 60px;
    position: relative;
    overflow : hidden;
}
    #animate-area { 
        height: 122%;
        width: 2538px;
        position: absolute;
        left: 0;
        top: -15px;
        background-image: url('http://s30.postimg.org/qnju89rkx/banner.png') ;
        -ms-animation: animatedBackground 40s linear infinite;
        -moz-animation: animatedBackground 40s linear infinite;
        -webkit-animation: animatedBackground 30s linear infinite;
    }
    /* Put your css in here */
    @keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-webkit-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-moz-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }

Thsi is JSfiddle: http://jsfiddle.net/cz04c4nx/8/

Now its working fine in chrome and mozilla browsers, but didn't work animation in IE and Opera.

May i know what is the reason? and how to fix this?

Any help would be appreciated. Thanks in advance.

Upvotes: 0

Views: 2280

Answers (1)

Dragos Sandu
Dragos Sandu

Reputation: 664

I'm not sure, but i think you forget something. Try the code below. Replace your #animate-area div with this:

 #animate-area { 
    height: 122%;
    width: 2538px;
    position: absolute;
    left: 0;
    top: -15px;
    background-image: url('http://s30.postimg.org/qnju89rkx/banner.png') ;
    animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 30s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -o-animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;  
}

Difference is just in animation tag. After that, at the bottom of your CSS add the following.

    @-ms-keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}

  @-o-keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}

ANIMATION IN IE8. Copy the following lines in your head section of you website. IF user browser is low than IE10 than the jQuery animation will be load.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--[if lt IE 10]>
<script> 

    $(document).ready(function(){
        $("#animate-area").animate({left:'-1269px'}, 40000, function() {});
    });
    </script> 
    <![endif]-->

It doesn't look exactly like CSS3 Key-frames, but is a little replacement.

Upvotes: 1

Related Questions