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