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);

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

1 个答案: