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;