Question

我想知道如何避免在启动anhereher或访问浏览器的另一个标签后自动重置关键帧动画。

@-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

如何在启动另一个或访问另一个页面时不初始化CSS3动画？

1 个答案: