I'm trying to build a content slider. You can see what I have here :

http://musicwhynot.com/slide.php

There is no auto change. The only time a slide will change is when you click left or right.

In chrome, this page works perfectly.

When I head over to IE 10 or FF 26 it stops working right. You can go left once, but when you click the left button a second time, it does not show the animation. If you refresh the page, hit left, and then hit right: you see the 2 animations. You can go back and forth between the 1st slide and the 2nd slide, but try to move left or right a second time and it doesn't show the animation.

I'll attach my code. It includes a little php. I have this feeling I am missing one line. Just one thing and I'll be ok to move forward. After all day yesterday, and most of today using google I could really use a break!

Thanks so much.

Nick

Code:
<?php $slide_width=800; ?>
<!DOCTYPE html>
<html>

<head>
	<style>
		.sliding_div	{
			width:<?php echo $slide_width; ?>px;
			position:relative;

			animation-name: right-to-left;
			animation-duration: 1s;
			animation-timing-function: ease; 
			animation-delay: 0s;           
			animation-iteration-count: 1;  
			animation-play-state:paused;
			backface-visibility: hidden;

			-moz-animation-name: right-to-left;
			-moz-animation-duration: 1s;
			-moz-animation-timing-function: ease; 
			-moz-animation-delay: 0s;           
			-moz-animation-iteration-count: 1;  
			-moz-animation-play-state:paused;
			-moz-backface-visibility: hidden;

			-webkit-animation-name: right-to-left;
			-webkit-animation-duration: 1s;
			-webkit-animation-timing-function: ease; 
			-webkit-animation-delay: 0s;           
			-webkit-animation-iteration-count: 1;  
			-webkit-animation-play-state:paused;
			-webkit-backface-visibility: hidden;
		}

		@keyframes right-to-left {
			from {left:0px;}
			to {left:-<?php echo $slide_width; ?>px;}
		}

		@-webkit-keyframes right-to-left {
			from {left:0px;}
			to {left:-<?php echo $slide_width; ?>px;}
		}

		@-moz-keyframes right-to-left {
			from {left:0px;}
			to {left:-<?php echo $slide_width; ?>px;}
		}


		@keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}

		@-webkit-keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}

		@-moz-keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}
	</style>


</head>

<body style="background-color:grey;" onload="do_load();">
	<center>
	
		<br />
		<input type="button" onclick="move_last_slide();" value="<-" />
		<input type="button" onclick="move_next_slide();" value="->" /><br />
		<span id="output"></span>
		<br /><br />

		
		<div style="overflow:hidden;width:<?php echo $slide_width; ?>px;height:400px;background-color:white;">
			<div class="sliding_div" id="my-div">
				<div id="div0" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:1;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">0</td></tr></table>
				</div>

				<div id="div1" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">1</td></tr></table>
				</div>

				<div id="div2" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">2</td></tr></table>
				</div>

				<div id="div3" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">3</td></tr></table>
				</div>

			</div>
		</div>
	</center>



	<script language="javascript" type="text/javascript">
		var num_slides=3; // INCLUDES 0!

		var cur_slide=0;

		var last_slide;
		var next_slide;

		var in_motion=0;

		var slide_width = <?php echo $slide_width; ?>;

		function do_load() {
			change_slide(0)
		};

		function change_slide(new_slide_num) {
			cur_slide = new_slide_num;

			if ( cur_slide < 0 ) { cur_slide=num_slides; }
			if ( cur_slide > num_slides ) { cur_slide = 0; }


			last_slide = cur_slide - 1;
			if ( last_slide < 0 ) { last_slide=num_slides; }


			next_slide = cur_slide + 1;
			if ( next_slide > num_slides ) { next_slide = 0;	}

			document.getElementById("output").innerHTML = "cur_slide = " + cur_slide + ", num_slides = " + num_slides + ", next_slide = " + next_slide + ", last_slide = " + last_slide;
		};


		function move_next_slide() {
			if (in_motion==0) {

			for (var i=0;i<=num_slides;i++) { 
				document.getElementById("div" + i).style.opacity="0";
			}

				document.getElementById("div" + cur_slide).style.opacity="1";
				document.getElementById("div" + cur_slide).style.left = ("0px");

				document.getElementById("div" + next_slide).style.opacity="1";
				document.getElementById("div" + next_slide).style.left = (slide_width + "px");

				cur_slide++;
				change_slide(cur_slide);

				in_motion=1;

				document.getElementById("my-div").classList.remove("sliding_div");
				document.getElementById("my-div").classList.remove("left-to-right");
				document.getElementById("my-div").classList.remove("right-to-left");
				document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
				document.getElementById("my-div").classList.add("sliding_div");


				document.getElementById("my-div").style.webkitAnimationName="right-to-left";
				document.getElementById("my-div").style.mozAnimationName="right-to-left";
				document.getElementById("my-div").style.animationName="right-to-left";


				document.getElementById("my-div").style.animationPlayState="running";
				document.getElementById("my-div").style.webkitAnimationPlayState="running";
				document.getElementById("my-div").style.mozAnimationPlayState="running";

				setTimeout("move_done()", 1000);
			}
		};

		function move_last_slide() {
			if (in_motion==0) {

			for (var i=0;i<=num_slides;i++) { 
				document.getElementById("div" + i).style.opacity="0";
			}

				document.getElementById("div" + cur_slide).style.opacity="1";
				document.getElementById("div" + cur_slide).style.left = ("0px");

				document.getElementById("div" + last_slide).style.opacity="1";
				document.getElementById("div" + last_slide).style.left = "-" + slide_width + "px";

				cur_slide--;
				change_slide(cur_slide);

				in_motion=1;



				document.getElementById("my-div").classList.remove("sliding_div");
				document.getElementById("my-div").classList.remove("left-to-right");
				document.getElementById("my-div").classList.remove("right-to-left");
				document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
				document.getElementById("my-div").classList.add("sliding_div");


				document.getElementById("my-div").style.webkitAnimationName="left-to-right";
				document.getElementById("my-div").style.mozAnimationName="left-to-right";
				document.getElementById("my-div").style.animationName="left-to-right";

				document.getElementById("my-div").style.animationPlayState="running";
				document.getElementById("my-div").style.webkitAnimationPlayState="running";
				document.getElementById("my-div").style.mozAnimationPlayState="running";

				setTimeout("move_done()", 1000);
			}
		};


		function move_done() {

			for (var i=0;i<=num_slides;i++) { 
				document.getElementById("div" + i).style.opacity="0";
			}

			document.getElementById("div" + cur_slide).style.opacity="1";
			document.getElementById("div" + cur_slide).style.left = "0px";

			in_motion="0";
		};

	</script>



</body>

</html>