css3 - CSS Transform: scaleX not working in Safari -

css3 - CSS Transform: scaleX not working in Safari -

i have shark swims on site. http://jaredshurtliff.com/ goes , forth using css transform: scalex property. it's supposed go 1 side, turn around, go other side, turn around, etc. works in every single browser except safari. ideas?

html:

<div id="shark"> <div id="shark_body"></div> <div id="shark_fin"></div> </div>

css:

#shark { width: 500px; height: 220px; position: absolute; top: 75%; left: 20%; padding: 0; animation-name:swim; animation-duration:50s; animation-iteration-count:infinite; animation-timing-function: linear; -moz-animation-name:swim; -moz-animation-duration:50s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function: linear; -webkit-animation-name:swim; -webkit-animation-duration:50s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function: linear;

}

and here's animation (i'll display -webkit- portion:

@-webkit-keyframes swim{ from{ left: 20%; } 20%{ left:1%; transform:scalex(1); } 20.5%{ transform:scalex(-1); left:0%; } 21%{ left: 5%; } 50%{ left: 55%; transform:scalex(-1); } 50.5%{ transform:scalex(1); left: 58%; } 51%{ left: 53%; } 70%{ left: 1%; transform:scalex(1); } 70.5%{ transform:scalex(-1); left:0%; } 71%{ left: 5%; } 82%{ left: 55%; transform:scalex(-1); } 82.5%{ transform:scalex(1); left: 58%; } 83%{ left: 53%; } to{ left:20%; }

}

i think forgot add together prefix webkit , other browsers in @keyframes

-webkit-transform:scalex(1); -moz-transform:scalex(1); -ms-transform:scalex(1); -o-transform:scalex(1); transform:scalex(1);

css3 animation safari transform scale