keyframeアニメーションの前後の状態を維持する

animation-fill-modeで設定する

[設定値]
none
アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない。
forwards
アニメーションの最後に適用されたキーフレームの指定によって計算された値を維持する。
backwards
アニメーションの適用先に、'0%' または 'from' キーフレームで定義された値を即座に適用する。
both
forwards と backwards の両方の規定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。

例:

.hoge{
    animation: keyframename 1s linear 5s  forwards;
}

参考：https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode