0

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

@-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;，但我只想玩一次。

4

1 回答 1

0

启用此功能的属性是：animation-fill-mode: forwards

于 2013-07-04T10:50:38.307 回答