我正在使用关键帧来缩放我网页上的元素。问题是动画在 chrome 中运行完美,但在 safari 中没有运行。我在关键帧中提供了 0% 、 80% 和 100% 的值,每次动画结束时它都会返回到定义在 80% 而不是 100% 处的属性。我也使用填充模式在最后一帧停止动画,但仍然没有解决办法。
@-webkit-keyframes leftpageanim {
0%{ -webkit-transform:scale(1);
bottom:-26px;
}
80%{
-webkit-transform:scale(1.8) ; bottom:140px;
}
100%
{
-webkit-transform:scale(1.7); bottom:120px; }
}
动画结束后再次恢复到 80% 的属性
最佳答案
我对代码做了一些修改。看这个jsfiddle .动画现在停在 100%。这就是你想要的,对吧?
来自:
.animator {
-webkit-animation-name: leftpageanim;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
到:
.animator {
-webkit-animation: leftpageanim 5.0s ease-in-out forwards;
-webkit-animation-iteration-count: 1;
关于css - -safari 中的 webkit-animation-fill-mode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9530914/