CSS animation transform percentages IE

Design help Custom code
1

Hi 1st time post.

Experiencing a problem with animating objects correctly in IE. Both Firefox and Chrome renditions are fine, working exactly as planned.

I suspect IE must have a different offset rule when it comes to X and Y percentages used in the transform parameter.

Here is the CSS code I have written. Plane 1 will fly from left to right and then plane 2 will fly from right to left. In the background a small sailing ship slowly makes its way across the ocean.

Does anyone have an idea for a fix? (bunch of code I wrote below)

Many thanks

CSS

#seascapeframe {position:relative;  max-height:500px; z-index:1; overflow:hidden;}
#seascapeair { max-width:100%; z-index:2;}
#airplane1 { position:absolute; max-width:30%; margin:0 auto; bottom:50%; z-index:30; animation: airplaneleft 35s linear 0s infinite normal none;}
#airplane2 { position:absolute; max-width:30%; margin:0 auto; bottom:50%; z-index:20; animation: airplaneright 35s linear 0s infinite normal none;}
#pirateship { position:absolute; z-index:17; bottom:41%; max-width:5%; animation: piratesail 60s linear 0s infinite normal none;}

@media only screen and (max-width: 500px) {
	#airplane1 {max-width:50%; bottom:30%; }
	#airplane2 {max-width:50%; bottom:30%;}
	#pirateship {max-width:8%; }
}

@keyframes piratesail {
 0% {
	 -webkit-transform: translate(-100%,0%) scale(-1,1)  ; 
	-moz-transform: translate(-100%,0%) scale(-1,1) ;
	transform: translate(-100%,0%) scale(-1,1) ;
 	}
 100% {
	 -webkit-transform: translate(2100%,0%) scale(-1,1)  ; 
	-moz-transform: translate(2100%,0%) scale(-1,1) ;
	transform: translate(2100%,0%) scale(-1,1) ;
 }
}

@keyframes airplaneleft {
0% {
	-webkit-transform: translate(-150%,0%) ; 
	-moz-transform: translate(-150%,0%) ;
	transform: translate(-150%,0%) ;
	}
50% {
	-webkit-transform: translate(350%,0%) ; 
	-moz-transform: translate(350%,0%) ;
	transform: translate(350%,0%) ;
	}
100% {
	-webkit-transform: translate(400%,0%) ; 
	-moz-transform: translate(400%,0%) ;
	transform: translate(400%,0%) ;
}
}
@keyframes airplaneright {
0% {
	-webkit-transform: translate(400%,0%) ; 
	-moz-transform: translate(400%,0%) ;
	transform: translate(400%,0%) ;
	}
50% {
	-webkit-transform: translate(350%,0%) ; 
	-moz-transform: translate(350%,0%) ;
	transform: translate(350%,0%) ;
	}
100% {
	-webkit-transform: translate(-150%,0%) ; 
	-moz-transform: translate(-150%,0%) ;
	transform: translate(-150%,0%) ;
}

}

HTML

<div id="seascapeframe">
	<img id="seascapeair" src="seascapeimage" alt="on the sea">
    <div id="discounttitle">
 		<h1>Flying Planes & Stuff</h1>
	</div>
    <img id="airplane1" src="someimage1" alt="seo phrase">
    <img id="airplane2" src="someimage2" alt="seo phrase">
    <img id="pirateship" src="someimage3" alt="my little boat">
</div>