css3 - CSS Transform: scaleX not working in Safari -


I have this shark that floats on my site. It goes back and forth by using CSS conversion: scaleX property this one Goes on, goes on the other side, revolves, etc. It works in every browser except Safari. Any ideas?

HTML:

  & lt; Div id = "shark" & gt; & Lt; Div id = "shark_body" & gt; & Lt; / Div & gt; & Lt; Div id = "shark_fin" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  # sharks {width: 500 px; Height: 220 pixels; Status: Completed; Top: 75%; Left: 20%; Padding: 0; Animation-name: Swimming; Animation-period: 50s; Animation- Count of Travel: Infinity; Animation-timing-function: linear; -moz- Animation-name: swim; -moz- Animation-duration: 50s; -moz-animation-count of travel: infinity; -MOZ-animation-time-work: linear; -webkit- Animation-name: swim; -webkit- Animation-duration: 50s; -webkit- Animation- Count of Travel: Infinity; Webkit-animation-timing function: linear;  

}

And here's the animation (I'll only display the -webkit-part:

  @ - WebKit-keyframe swim {Left: 20%;} 20% {left: 1%; scale: scale x (1);} 20.5% {transformed scalex (-1); left: 0%;} 21% {balance: 5%;} 50% {left: 55%; scale: scale x (-1);} 50.5% {conversion: scalax (1); left: 58%;} 51% {left: 53%;} 70% {balance: 1 Conversion: scale x (1);} 70.5% {conversion: scale x (-1); left: 0%;} 71% {left: 5%;} 82% {left: 55%; -1}}}}}} 82.5% {form Drop: scalex (1); left: 58%;} 83% {left: 53%;} to {left: 20%;}  

}

I think you forgot to add another browser in the prefix for webkit and @ keyframe

  -WebKit-transform: Scalex (1); -MOZ-Transforms: Scalex (1); MA-Transform: Scalex (1); -O-Transform: ScaleX (1); 1);  

Comments

Popular posts from this blog

c# - Process.Kill() returns access denied -

c# - NewtonSoft JArray - how to select multiple elements with LINQ -

c# - Using the generic type 'System.Collections.Generic.List<T>' requires 1 type arguments -