CSS动画结束后如何使元素立即回到初始位置？

Question

我正在使用以下代码为SVG元素设置动画：

#bubble_1_{
    -webkit-animation: bubble1 10s  forwards linear infinite;
}

@-webkit-keyframes bubble1{
    0%{
        -webkit-transform: translate(0px,0px);
    }

    5%{
        -webkit-transform: translate(1px,10px);
    }

    10%{
        -webkit-transform: translate(-1px,20px);
    }

    15%{
        -webkit-transform: translate(1px,30px);
    }

    20%{
        -webkit-transform: translate(-1px, 40px);
    }

    25%{
        -webkit-transform: translate(10px,45px);
    }

    30%{
        -webkit-transform: translate(20px,50px);
    }

    35%{
        -webkit-transform: translate(30px,49px);
    }

    40%{
        -webkit-transform: translate(40px, 51px);
    }

    45%{
        -webkit-transform: translate(50px,48px);
    }

    50%{
        -webkit-transform: translate(60px,51px);
    }

    55%{
        -webkit-transform: translate(70px,49px);
    }

    60%{
        -webkit-transform: translate(80px, 51px);
    }

    65%{
        -webkit-transform: translate(90px,48px);
    }

    70%{
        -webkit-transform: translate(100px,51px);
    }

    75%{
        -webkit-transform: translate(110px,49px);
    }

    80%{
        -webkit-transform: translate(120px, 51px);
    }

    85%{
        -webkit-transform: translate(130px,71px);
    }

    90%{
        -webkit-transform: translate(131px,100px);
    }

    95%{
        -webkit-transform: translate(129px,120px);
    }

    100%{
        -webkit-transform: translate(131, 140px);
    }
}

但是，当它结束时，我可以看到它回到它的初始位置。这很奇怪，因为100％和0％之间的过渡应该立即发生，对吧？我需要这种行为，我不希望看到它回来。

有谁知道我应该怎么做？我尝试了'前锋'和'后退'，但它不起作用。

Answer 1

Internet Explorer 9及更早版本不支持animation-fill-mode属性。

您必须使用-webkit-animation-fill-mode: forwards;来执行此效果：

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 2;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;  /* Chrome, Safari, Opera */
    animation: mymove 3s;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

这是一个示例 LINK

-webkit-animation-iteration-count: 1; // you will need this to set the iteration at 1 

Answer 2

您的131, 140px设置在100％关键帧处看起来只是缺少 px ，这应该会在完成后立即跳回到其起始位置（我认为是你想要什么）。

如果你需要在一场比赛后停下来，那么你需要添加-webkit-animation-iteration-count: 1;并从你的动画中删除infinte。