1

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

4

1 回答 1

0

我对代码做了一些更改。看看这个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;
于 2012-07-08T10:40:40.373 回答