1

キーフレームを使用して、Webページ上の要素をスケーリングしています。問題は、アニメーションがChromeで完全に実行されているが、Safariでは実行されていないことです。キーフレームに0％、80％、100％の値を指定していますが、アニメーションが終了するたびに、100％ではなく80％で定義されたプロパティに戻ります。また、塗りつぶしモードを使用して最後のフレームでアニメーションを停止しましたが、それでも解決策はありませんでした。

@-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 に答える