Animation Not Working in IE11 - html

Question

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>
<img src="/images/site2.jpg" alt="site2"></img>
<img src="/images/image3.jpg" alt="site3"></img>
<img src="/images/image4.jpg" alt="site4"></img>
</img>
<img src="/images/image2.jpg" alt="site2"></img>
</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???

Answer 1

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.

Answer 2

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