CSS 变换 : scaleX not working in 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 和其他浏览器添加前缀

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