CSS 변환 : scaleX가 Safari에서 작동하지 않습니다.

Question

내 사이트에서 수영하는 상어가 있습니다. http://jaredshurtliff.com/ CSS 변환 : scaleX 속성을 사용하여 앞뒤로 이동합니다. 그것은 한 편으로 가고, 돌아 서고, 다른 편으로 가고, 돌아서는 등의 일을하기로되어 있습니다. Safari를 제외한 모든 단일 브라우저에서 작동합니다. 어떤 아이디어?

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; 

}

그리고이다 애니메이션 (난 그냥 -webkit- 부분을 표시 할 수 있습니다 :

@-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%; 
} 

을 }

Answer 1

난 당신이 추천에 대한 @keyframes

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