直接上代码

只需在最后加上"forwards"即可实现animation动画停留在最后一帧。

"forwards"意为向前，即动画只会一直向前进行，不会回到最初始的关键帧。

animation: xxx 1.5s forwards;

案例

css部分代码

    #demo {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 50px;
        animation: xxx 1.5s forwards;
    }
   
    @keyframes xxx {
        0% {
            transform: none;
        }

        50% {
            transform: translateX(200px);
        }

        100% {
            transform: translateX(200px) translateY(100px);
        }

    }

html部分代码

<div class="wrapper">
        <div id="demo"></div>
</div>