css - 別のページを起動したり、別のページにアクセスしたりするときに、CSS3 アニメーションを初期化しないようにするにはどうすればよいですか?

Question

別のブラウザを起動したり、ブラウザの別のタブにアクセスした後に、キーフレーム アニメーションが自動的にリセットされないようにする方法を知りたいです。

@-webkit-keyframes play1 {
            0% {
              -webkit-transform: translate(0px,0);
            }
           50% {
              -webkit-transform: translate(-60px,0) rotate(-1080deg) scale(1.5);
           }
           100% { 
               -webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
           }
        }
.play1 {         
    -webkit-animation-name: play1;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes play2 {
    0% {
        -webkit-transform: translate(0px,0);
    }
    50% {
        -webkit-transform: translate(-60px,0) rotate(-1080deg) scale(3);
    }
    100% {
        -webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
    }
}
.play2 {         
    -webkit-animation-name: play2;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
}

この例では、要素にそれぞれのクラスを追加することにより、アニメーションplay1を起動すると、アニメーションplay2に応じた要素の位置play1が自動的に初期位置にリセットされます (別のタブにアクセスして戻ってくると、すべての要素が彼らの初期位置）、これを回避する方法は？

mozilla ではさらに悪いことに、アニメーションが終了するとアニメーションがリセットされます。プロパティを使用してこの動作はありませんが、animation-iteration-count: infinite;一度プレイしたいだけです。

Answer 1

これを可能にするプロパティは次のとおりです。animation-fill-mode: forwards