如何在启动另一个或访问另一个页面时不初始化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