CSS变换：scaleX在Safari中不起作用

Question

我有这种在我的网站上游泳的鲨鱼。 http://jaredshurtliff.com/它使用CSS Transform：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);