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

debugcn 发表于 Dev

决明子

我使用以下代码对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％之间的过渡应该立即发生，对吗？我需要这种行为，我不希望这种行为被追溯到过去。

有谁知道我该怎么办？我尝试过“前进”和“后退”，但没有用。

史蒂文·霍斯金斯（Steven Hoskins）

它看起来像你只是缺少PX您131, 140px以100％的关键帧的设置，应该再让它瞬间跳回到其起始位置，一旦完成（我认为这是你想要的）。

如果您需要在播放后停止播放，则需要添加-webkit-animation-iteration-count: 1;和删除动画中的infinte。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。