css - -safari 中的 webkit-animation-fill-mode

Question

我正在使用关键帧来缩放我网页上的元素。问题是动画在 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% 的属性

Answer 1

我对代码做了一些修改。看这个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;