CODEWITHSUNDEEP
htmlcssanimation
mgrenier
mgrenier

Reputation: 1447

Animation Not Working in IE11

I have a scrolling banner that will not work in IE. Works fine in Firefox, Chrome, and Opera though. Here is my HTML:

<div id="container">
            <div class="photobanner">
                <a class="first" href="http://www.site1.com" ><img src="/images/image1.jpg" alt="site1"></img></a>
                <a href="http://www.site2.com"><img src="/images/site2.jpg" alt="site2"></img></a>
                <a href="http://www.site3.ca"><img src="/images/image3.jpg" alt="site3"></img></a>
                <a href="http://www.site4.org"><img src="/images/image4.jpg" alt="site4"></img></a>
                <a href="http://www.site1.com" ><img src="/images/image1.jpg" alt="site1"></img></a>
                <a href="http://www.site2.com"><img src="/images/image2.jpg" alt="site2"></img></a>
            </div>
        </div>

It is my understanding that -ms-transform should work in IE9 and beyond but that doesn't seem to be the case, here is my CSS:

.photobanner {
    width: 3805px;
}

.photobanner img {
    height: 175px;
    margin: 25px 0px 25px 0px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;

    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

/*keyframe animations*/
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2545px;  
 }
}

@-moz-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2545px;
 }
}

@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2545px;
 }
}

@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2545px;
 }
}

@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2545px;
 }
}

Any ideas how I can get this to work???

Upvotes: 0

Views: 1516

Answers (2)

Pegues
Pegues

Reputation: 1783

You have to remove the double quotes ( " ) from the @keyframes. It'll then work in IE11.

Upvotes: 1

Linh Pham
Linh Pham

Reputation: 3025

Just remove the " quote from your @keyframes name. Like this:

@-webkit-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2545px;  
  }
}

@keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2545px;  
  }
}

http://jsfiddle.net/z5ep9hjk/1/

Also it won't run on IE 9 http://caniuse.com/#feat=css-animation Because it is not support animation property.

Upvotes: 1

Related Questions