Reply To: [Solved] Css3 slideshow vs IE

[Baerspective]

i am not sure why its not working anymore?
this slideshow doesnt want to play in IE 9. any ideas?

it works fine in all browsers only IE is not doing its thing
http://baerspective.com/alcan/

.container {
    overflow:hidden;    
    position: relative;
    width: auto;
    padding: 2em 1.5em;
    color: rgba(0,0,0, 0.8);
    text-shadow: 0 1px 0 #fff;
    line-height:1.8;
    top: -5em;
    z-index:1;  
}

#content-slider {
    width:auto;
    height:382px;
    margin: 2px auto 0;
}

#slider {
    background:#000;
    border: 5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:382px;
    width:auto;
    margin:10px auto 0;
    overflow:visible;
    position:relative;
    z-index: 1;
    top: 1em;
    -o-border-radius: 2px 2px 2px 2px;
    -ms-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
    -o-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    -ms-box-shadow: 0 0 3px rgba(0,0,0, 0.2);   
    -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

#slider:before, #slider:after {
    position: absolute;
    display:block;
    bottom:16px;
    width: 35%;
    height: 10px;
    content: " ";
    background: rgba(0,0,0,0.1);
    -o-border-radius: 25%;
    -ms-border-radius: 25%;
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    border-radius: 25%;
    -o-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -ms-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    box-shadow: 0 0 2px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7); 
    z-index: -3;
}

#slider:before {
    left:0;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

#slider:after {
    right:0;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    transform: rotate(4deg);
}

#mask {
    overflow:hidden;
    height:380px;
}

#slider ul {
    margin:0;
    padding:0;
    position:relative;
}

#slider li {
    width:949px;
    height:382px;
    position:absolute;
    list-style:none;
    top: -384px;
}

#slider img {
    width:949px;
    height:382px;
    margin-left: -4em;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;   
    -webkit-animation:cycle 25s linear infinite;
    -ms-animation:cycle 25s linear infinite;
    -o-animation:cycle 25s linear infinite;
    animation:cycle 25s linear infinite;    
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;
    -ms-animation:cycletwo 25s linear infinite;
    -o-animation:cycletwo 25s linear infinite;
    animation:cycletwo 25s linear infinite;     
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;
    -ms-animation:cyclethree 25s linear infinite;
    -o-animation:cyclethree 25s linear infinite;
    animation:cyclethree 25s linear infinite;   
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;
    -ms-animation:cyclefour 25s linear infinite;
    -o-animation:cyclefour 25s linear infinite;
    animation:cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;
    -ms-animation:cyclefive 25s linear infinite;
    -o-animation:cyclefive 25s linear infinite;
    animation:cyclefive 25s linear infinite;        
}