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

我想你忘了为webkit 和@keyframes 中的其他浏览器添加前缀

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