我的网站上有一条会游泳的鲨鱼。 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%;
}
最佳答案
我想你忘了在 @keyframes
中为 webkit
和其他浏览器添加前缀
-webkit-transform:scaleX(1);
-moz-transform:scaleX(1);
-ms-transform:scaleX(1);
-o-transform:scaleX(1);
transform:scaleX(1);
关于CSS 变换 : scaleX not working in Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26434185/