CSS slider not workin in IE - html

Question

I am using a CSS slider on my ebay page (as ebay won't let you upload scripts, etc) but I found that it won't work in IE. Coyldn't figure out how to fix it. Is there a way around it? Or is there a slider with no scripts and that works in IE8+?
Here is the css:
img {
border: none;
}
a {
outline: none;
}
/* Fades in the slideshow. Hides the initial animation on the li tag.*/
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
ul#slider {
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 70px;
height: 50px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
ul#thumb a:hover {
opacity: 1;
}
ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}
ul#slider li p {
position: absolute;
bottom: -1px;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
ul#slider li p span {
line-height: 0.5em;
padding: 10px;
display: block;
}
/* Animation for the :target image. Slides the image in. */
#-webkit-keyframes moveTarget {
0% {
left:-700px;
}
100% {
left:0px;
}
}
ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/
#-webkit-keyframes moveIt {
0% {
left:0px;
}
50% {
left:700px;
}
100% {
left:-700px;
z-index: 5;
}
}
ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}
And HTML:
<ul id="slider"> <li id="1"> <img src="(image link)" alt="" width="700" height="438" />
</li><li id="2"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="3"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="4"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="5"> <img src="(image link)" alt="" width="700" height="438" />
</li>
</ul>
<ul id="thumb">
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
</ul>
</div>

Answer 1

Maybe you should check out canIuse.com to see browser compatibilities. It could be helpful!

Answer 2

Unfortunately a cross browser, pure CSS image slider is not cur­rently a real­istic option. Using this slider is going to cause issues in earlier ver­sions of Internet Explorer no mat­ter what you do. If you need reas­on­able browser sup­port then you will have to look at a slider that uses Javascript.

Answer 3

All of those -webkit prefixes indicate that whatever CSS you copied and pasted is intended to work only with webkit browsers (Google Chrome, Safari, etc...)
Unfortunately, without webkit, I can't think of many CSS-only gallery solutions.