css - 如何让元素在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

看起来您只是在 100% 关键帧的 131、140px 设置上缺少 px，这应该会在完成后立即跳回其起始位置(我认为这就是你想要的)。

如果您需要它在一次播放后停止，那么您需要添加 -webkit-animation-iteration-count: 1; 并移除动画中的 infinte。