CSS3 keyframe-transition on iPad - ios

Question

I have build a pretty simple animation with CSS (just moving an image a few pixels) which works fine on all browser I had available for testing EXCEPT the iPad mobile Safari (iOS 8.1).
On the iPad nothing even slightly moves. The image sits still.
Has anybody else encountered such a bug or behaviour with iOS? ... or am I missing something important with webkit here?
Thanks for hints ;o)
This is what I did so far:
body { font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; text-align:left;
SCROLLBAR-FACE-COLOR: #001428; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #001428;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #001428; text-align:center; width:100%; margin:0 auto}
.BodyHeader {background-image: url(../images/Header-Singleton.jpg); background-repeat: repeat-x; position:absolute; height:90px; width:100%; border: 0px solid #cc0033;}
.BodyHeaderPic { background-image: url(../images/Header.jpg); background-repeat: repeat-x; position:absolute; right:200; height: 90px; width:322px; border:0px solid #cc0033;}
.BodyScroller {position:absolute; left:1%; top:90px; width:98%; bottom:10px; overflow:auto; border: 0px solid #FF9933;}
.BodyMain { position:absolute; left:0; top: 30px; width:70%; border:opx solid #cc0033; text-align:left; vertical-align:text-top; z-index:1}
.Footer { position:absolute; width:640px; left:50%; margin-left:-320px; bottom: 5px; height:25px; border:1px solid #dcdcdc; text-align:center; font-size:10px; color:#7896be; z-index:9999;}
.Footer p { margin:5px;}
a {font:Arial, Helvetica, sans-serif; color:#2d5578; text-decoration:none; border: none}
a:hover {font:Arial, Helvetica, sans-serif; color:#7896be; text-decoration:underline; border: none}
a:active {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
a:selected {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
img {border: none;}
h1 {font-style:normal; font-variant:normal; font-size:12pt; font-family:Arial; color:#2d5578; padding-top:5px; padding-bottom:5px; margin:0px; }
h2 {font-style:normal; font-variant:normal; font-size:11pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
h3 {font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
.vbar-lightblue {width:300px; height:2px; background-image:url(../images/vbar-lightblue.jpg); background-repeat:no-repeat}
.HPflyInImages {position:absolute; left:50%; margin-left:200px; top: 220px; width:217px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:999;}
.HPflyInImagesCrossFrame1 {position:absolute; left:50%; margin-left:135px; top: 180px; width:317px; height:241px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:100; background-image:url(../images/imageCrossFrame.png)}
.image1 {position: relative; right:-200px; top:00px; border: 0px solid #cc0033; text-align:right; width:200px;}
.CrossFrameSmall1 {position:absolute; right:50px; top: 150px;z-index:100;}
.CrossFrameSmall1MoveImage{position:absolute; right:150px; top: 205px;z-index:99;
-moz-animation-name: moveImage;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: moveImage;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-name: moveImage;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards
}
#-moz-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#-webkit-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
.HPflyInImagesSmall {position:absolute; right:50px; top: 200px; border: 1px solid #cc0033; overflow:hidden;}
.HPflyInImagesCrossFrameSmall1 {width:200px; height:180px; border: 1px solid #cc0033; overflow:visible; text-align:right; }
.HPflyInImagesCrossFrameSmall2 {width:195px; height:180px; border: 1px solid #cc0033; overflow:hidden; background-image:url(../images/imageCrossFrameSmall.png)}
.CrossFrameSmallMoveImage { }
/* *** Menu *** */
.Menubar {position: absolute; left:0px; top:90px; width:100%; background-color:#cc0033; text-align:left; background-image:url(../images/MenueBackground.jpg); background-repeat:repeat-x; }
.Menubar ul { left:10px;}
/* *** MAIN *** */
.mainHephy {position:absolute; right:100px; width:170px; height:220px; top:20px; background-image:url(../images/mainHephy.jpg); background-repeat:no-repeat; border: 0px solid #cc0033;}
.wiseSpell {position:relative; top: 310px; border:0px solid #996600; text-align:left; width: 95%;}
.quotation { font-size:8px; margin:0px; padding:5px; color:#7896be}
.mainGreetings {position: relative; top: -50px; text-align:left; width:400px; padding-left:50px; }
/* *** PRIVATE *** */
.tdHeader { font-weight:bold; color:#325f82}
.moreBody { width:600px;}
.imageGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** AVIATION *** */
.FlightBooklet {position:absolute; left:50%; margin-left:100px; top: 80px; width:244px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:101;}
.imageAVGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** CONTACT *** */
.FMS-TextLine { width:400px;}
.FMS-TextField { width:600px; height:150px;}
.FMS-Button { width:100px;}
and this is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/CSS/CSS3Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<link rel="stylesheet" type="text/css" href="/CSS/ASW.css">
<title>ASW 15</title>
</head>
<body ontouchstart="">
<div class="BodyHeader"></div>
<div class="BodyHeaderPic"></div>
<script language="javascript" type="text/javascript" src="/JS/ASW-MenueEmbed.js"></script>
<script language="javascript" type="text/javascript" src="/JS/ASW-FooterEmbed.js"></script>
<div class="BodyScroller">
<div class="BodyMain">
<br />
<div class="moreBody">
<h1>... more</h1>
<br />
</div>
</div>
</div>
<img src="../images/imageCrossFrameSmall.png" alt="Hephy" class="CrossFrameSmall1"/>
<img src="../images/more01.jpg" alt="Hephy" class="CrossFrameSmall1MoveImage"/>
</body>
</html>